Web design with photoshop

Web design with photoshop
Lecture 8
 Photoshop is an image manipulation software
 You will design the buttons/headers/footers..
 But it does not CODE
Pros and cons
 Why use it?
 It gives you fast visual representation
 Expanded vector tool set
 Problems
 No multi-page workflow
 Limited css support
 Css not always „clean“
Design workflow
 Sketch your site
 Build a mock-up in photoshop
 Have mock up coded
 Design is coded using css
 http://www.w3schools.com/css/
 Different browsers tend to behave differently
 You have to test on different browsers
Design principles
 What should the page do? How to help people achieve it
 Communication
 What kind of information needed?
 Organize using headlines and sub-headlines
 Use bulleting
Design principles
 Fonts
 Serif vs sans serif
 Sans serif fonts – contemporary looking fonts without
decorative finishes
 Arial
 Verdana
 Easier to read
 Ideal font size for web 16 px
 Keep to 3 fonts and 3 sizes to keep design simple
Design principles
 Colors
 Do not use too vibrant or too dark colors
 Hard to read small white text on black background
 Use contrast colors on background and text
 White spaces/areas are used quite often in modern design
 Images
 Sometimes images speak more than words – use info
 Using images can have emotional impact – do not
overcrowded the design
Design principles
 Navigation
 Logical page hierarchy
 Three click rule – you should be able to reach every page
with three clicks
 Grid based layouts
 Align your elements
 Arraign content into sections
Design principles
 Positioning
 Important information to left and top
 People read in „F“ pattern
Design principles
 Load time
 Optimize image size
 Combine code into central css or javascript library (less
HTTP requests)
 Optimize HTML/css/javascript library size (less bits to
 Mobile friendliness
 Use code that detects mobile and uses other layout
 Or design layout so that all devices are able to show it
Other things to remember
Keep things simple
Keep the focus
Design examples
Simple blog layout
 Now we will make simple layout for blog
 4 sections
 Header
 Content
 Footer
 Menu
 Open new file
 Web has no „certain width“ – design has to take this into
 Use gridlines
 Use shape tools – rectangle and/or gridlines to define
your header
 Use image on header with clipping mask
 Adjust colors/contrasts to fit with design
 Add logo
 Use character options
 Usually wider letter spacing is used for neater look
 Using aligning options at the top
 Bringing the logo out
 Outline?
 Use blending options, add stroke
 Background?
 Use rectangle tool/new layer and lower fill
 Add title
 Choose font
 Choose color that stands out
 I use gridlines and shape->line to make double under
 Using gradient to create reflection
 I copy merge my header image with adjustment layers
 New layer – flip vertically
 Add layer mask
 Use gradient tool (same position as paint bucket)
 Choose white/black gradient
 Paint over layer mask so that only upper part is visible
and image fades
 Design blog post title and sub header (for date)
 Add content text
 Use paragraph options to align text
 Use new layer/shape tool to make new area
 Footer usually contains contact information and/or
copyright notification
 Usually small text
 Use rectangular tool with line tool to create menu area
 Add menu elements
 Fill the background to make buttons stand out more
Final design
Saving elements for coding
 No easy option
 Some parts, like menu and footer, will be fully coded –
nothing to copy
 Header image
 You need to remove text and logo and do a copy merge, make new
file and save it there
 Reflection
 Same, you remove everything else in the file, so that transparency
becomes visible
 Copy merge, new file, save
 Logo
 Turn everything else off
 Copy merge, new file, save
Saving elements for coding
 What format?
 If no transparency, jpg can be alright
 PNG keeps transparency (if interlaced option checked)
 No loss of quality