Starting off in PhotoShiop and how it fits into the web design process
-
Upload
john-macpherson -
Category
Design
-
view
54 -
download
3
description
Transcript of 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
View Full Video at www.webpayload.com
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
View Full Video at www.webpayload.com
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!
View Full Video at www.webpayload.com