Course Details close

Course Details

(inc GST)
$ 1485
Version:Website Design
Duration:3 days
Level 3
321 Pitt St
Sydney NSW 2000
Participants:Max 10
Length:9:00 to 16:30
Break Times:
10:30 (15mins)
12:30 (1hr)
14:45 (15mins)
Course Dates: View
Course Outline: View

Advanced Photoshop Website Design Course

   (4.8 out of 5)
Location: Level 2
80 Mount St
North Sydney
NSW 2060
Break Times:
10:30 (15mins)
12:30 (1hr)
14:45 (15mins)
Duration: 3 days Participants: Max 10
Course Length: 9:00 to 16:30 Price:
(inc GST)
$ 1485
Sale Price:
(inc GST)

Quick links

Advanced Photoshop Website Design Course

Course Overview

Course Prerequisites

Students will need to have attended an Adobe Photoshop Essentials training course or have a solid working knowledge of Photoshop tools, layers, options, palettes and selection techniques. A basic knowledge of website design will also be an advantage for this course however it's not a requirement.

Course Inclusions

FREE Course Re-sit

8 months

When you book a public course at Raisng the Bar we offer you a FREE course re-sit for up to 8 months from the scheduled course date.

FREE Email Support

12 months

Free email support for up to 12 months from the scheduled course date.

Small Class Sizes

10 students

All of our courses are capped at a maximum of 10 students to maximise your learning experience.

Classroom Training

All of our courses are face to face, hands on, classroom based training delievered by .

Course Manual

With each course we provide you with a comprehensive course manual for you to practice post course.

Computer Lab

No need to bring your own laptop. Our training courses are conducted in fully equipped computer labs with free Wi-Fi.

Course Certificate

Every student receives a certificate of completion at the end of course to recognise your new skills.

Public Course Dates

Course Date Price Add Course Qty Status

There are currently no public dates scheduled for this course.

If you have 3 or more people interested in this course, call us today to discuss group training - 1300 937 782.

Virtual Course Dates (via Zoom)

Course Date Price Add Course Qty Status

There are currently no virtual course dates scheduled for this course.

Call us today to discuss - 1300 937 782.

Course Outline

Grid System Design

  • Set PhotoShop Preferences
  • Workspace Customisation
  • Create a New Document
  • Creating and Working With a Grid
  • Designing with Bootstrap’s Grid
  • View Accurate Size
  • Creating Coloured Backgrounds
  • Import Text

Editing the Layout and Adding Photos

  • Set the Page’s Background Colour
  • Import Photos
  • Set The Canvas Size
  • Grouping Layers in PhotoShop

Page Navigation and Editing Smart Objects

  • Create a Navigation Bar
  • Adding a Stroke to Content
  • Changing Layer Opacity
  • Importing Vector Graphics from Adobe Illustrator
  • Edit Vector-Based Smart Objects in Illustrator
  • Edit Pixel-Based Smart Objects in Photoshop
  • Use Content-Aware Fill
  • Swap Out Graphics

Adding Layer Styles to Text

  • Adding a Drop Shadow to Text
  • Darkening a Background Photo to Make Text More Legible

Webpage Layouts for Tablets

  • Copying the Design into a Tablet File
  • Adjust Elements to Fit New Dimensions
  • Canvas Cropping

Webpage Layouts for Mobile Phones

  • Copying the Design into the Mobile Phone File
  • Adjust Elements to Fit New Dimensions

Web Optimisation - JPEGs and HiDPI/Retina

  • Using the Save for Web Feature
  • Optimising Photos for Low-Resolution Screens
  • Optimising Photos for Hi- Resolution (HiDPI/Retina) Screens
  • Compression Settings for 1x and 2x Images
  • Optimising File Size With 2x Images

Web Optimisation - GIF vs. PNG

  • 8-Bit File Formats: GIF vs. PNG-8
  • Using PNG-24 for Partial Transparency
  • Optimising Colours
  • Limited Colours vs. Gradients vs. Black & White
  • Making a 1x from a 2x Image

Extracting Design Assets

  • The Extract Assets Panel - Pros & Cons
  • Create JPEG, PNG, GIF Files from a Design
  • Extracting PNG-8 Images with Partial-Transparency
  • Extracting 1x and 2x Graphics The Correct Way
  • Fix Low-Res JPEG Export From Photoshop

Working With 2x Photoshop Files

  • 2x versus 1x Design
  • Converting Wireframe into Real Design
  • Anti-Aliasing & Hyphenation
  • Crop an Image Using Clipping Masks
  • Align to a Selection

Styling Paragraphs

  • Create a Paragraph Style
  • Apply a Paragraph Style
  • Edit a Paragraph Style

Masking Photos and Layer Effects

  • Importing Images
  • Crop Images Using a Layer Mask
  • Colourising Icons Using Photoshop Vector Smart Objects
  • Adding Layer Effects - Stroke, Gradient Overlay and Inner Shadow etc.
  • Copy and Apply Layer Effects to Other Layers
  • Working With Fill and Opacity

Optimising Images in 2x Design

  • Extract Assets From 1x and 2x Design Files
  • Design Slicing
  • Layer Based Slices
  • Customising the Size of Slices

Working With Patterns and Textures

  • Create and Use a Pattern
  • Colourising a Pattern

Interaction States

  • Create a Video Overlay
  • Create and View Layer Composites
  • Editing Layer Composites

Batch Processing Multiple Images

  • PhotoShop's Image Processor
  • Custom Cropping and Exporting Layers to Files
  • Batch Renaming Images Using Adobe Bridge

Wire Framing

  • Adding Buttons and Placeholder Text
  • Placing Graphics
  • Duplicating and Aligning Elements
  • Evenly Distributing Elements

Design Coding - Part 1

  • Introduction to HTML
  • Create a Hyperlink
  • Introduction to Cascading Style Sheets (CSS)
  • Create a Custom Style Using a Class
  • Layout Concepts – An Introduction
  • Content Wrapping Using a Container Tag

Design Coding - Part 2

  • Bootstrap Files - Getting Started
  • Tidying up the Bootstrap Files
  • Adding Content into the Bootstrap Template
  • Create Rows and Columns Using Bootstrap Grid System
  • Inserting Content into Columns
  • Incorporating Custom Fonts
  • Finalise the Styling

Need Assistance

  • Send Email
Raising the Bar
Warning Icon Information Icon

1300 937 782 Contact us