Starting off in PhotoShiop and how it fits into the web design process

1

Why use Photoshop at all?

Look into the PSD of this site - Web Payload

How PhotoShop / Image editor fits into the web design process

Alternatives to PhotoShop

2

Complete Guide series: Starting off with PhotoShop and how it fits into the web

design picture

View Full Video at www.webpayload.com

3

Overview

✓ PhotoShop is the industry standard image editing tool

✓ It’s not perfect for web design but it works ok

✓ It’s very expensive (£600)

✓ There are alternatives

✓ Macaw

✓ Gimp - open source and free

✓ Sketch - http://bohemiancoding.com/sketch/

✓ It’s not about the tool! - it’s about the person using it! Someone in these new tools could blow away what i do although i have been using Photoshop for over 10 years.

4

Why use an image editor at all?

✓ There is a camp of web designers that don’t use an image editor at all - they jump straight into HTML and CSS

✓ The downside to this is creativity and detail work

✓ You can very quickly edit and move around elements in PhotoShop

✓ Textures and background patterns can make or break a design and by designing in the browser it restricts creativity.

✓ The are issues with Photoshop and responsive web design - see OTHER video


5

Planning / Documentation > Design/ PhotoShop > Development (HTML/ CSS)

Planning / Documentation > Development (HTML/ CSS)

(Designing in the browser)

There is also the agile design process - short bursts - but we will leave that for now

6

Planning / Documentation > Design/ PhotoShop > Development (HTML/ CSS)

My process (August 2014)

80% complete

Fonts are a problem in Photoshop and i like to test them out in a browser - much more accurate way of doing things.

PhotoShop is not suited to multi device layouts - thats where the browser comes into play.

7

✓ They are the different image elements that make up your design

✓ Your PhotoShop document can contain literally thousands of layers

✓ Good to have them grouped and in folders

✓ Also good practice to name them well

Layers


8

✓ Allow you to hide certain areas of images

✓ It’s not all or nothing, you can use semi transparent

Masks

9

✓ When you are ready to export your designs you ‘slice it up’

✓ Due to the power of CSS and HTML there is a lot less slicing to be done. If you think buttons - these can be created in CSS with shadows and gradients when previously you would have sliced them.

✓ A good example of a slice would be your logo.

Slicing

10

Other resources

✓ Covered the basics and way out with the scope of this tutorial to go in depth into PhotoShop or other tools!

✓ See YouTube or Google Search for more detailed tutorials.

✓ This site isn’t going to concentrate too much on Photoshop as there are so other great resources out there.

✓ Thanks!
