Laid out starting top left to top right, then going down. Info can surround, but however it fits.
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
![Page 1: Starting off in PhotoShiop and how it fits into the web design process](https://reader035.fdocuments.net/reader035/viewer/2022062615/548c6199b47959f60c8b624e/html5/thumbnails/1.jpg)
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
![Page 2: Starting off in PhotoShiop and how it fits into the web design process](https://reader035.fdocuments.net/reader035/viewer/2022062615/548c6199b47959f60c8b624e/html5/thumbnails/2.jpg)
2
Complete Guide series: Starting off with PhotoShop and how it fits into the web
design picture
View Full Video at www.webpayload.com
![Page 3: Starting off in PhotoShiop and how it fits into the web design process](https://reader035.fdocuments.net/reader035/viewer/2022062615/548c6199b47959f60c8b624e/html5/thumbnails/3.jpg)
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.
![Page 4: Starting off in PhotoShiop and how it fits into the web design process](https://reader035.fdocuments.net/reader035/viewer/2022062615/548c6199b47959f60c8b624e/html5/thumbnails/4.jpg)
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
![Page 5: Starting off in PhotoShiop and how it fits into the web design process](https://reader035.fdocuments.net/reader035/viewer/2022062615/548c6199b47959f60c8b624e/html5/thumbnails/5.jpg)
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
![Page 6: Starting off in PhotoShiop and how it fits into the web design process](https://reader035.fdocuments.net/reader035/viewer/2022062615/548c6199b47959f60c8b624e/html5/thumbnails/6.jpg)
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.
![Page 7: Starting off in PhotoShiop and how it fits into the web design process](https://reader035.fdocuments.net/reader035/viewer/2022062615/548c6199b47959f60c8b624e/html5/thumbnails/7.jpg)
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
![Page 8: Starting off in PhotoShiop and how it fits into the web design process](https://reader035.fdocuments.net/reader035/viewer/2022062615/548c6199b47959f60c8b624e/html5/thumbnails/8.jpg)
8
✓ Allow you to hide certain areas of images
✓ It’s not all or nothing, you can use semi transparent
Masks
![Page 9: Starting off in PhotoShiop and how it fits into the web design process](https://reader035.fdocuments.net/reader035/viewer/2022062615/548c6199b47959f60c8b624e/html5/thumbnails/9.jpg)
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
![Page 10: Starting off in PhotoShiop and how it fits into the web design process](https://reader035.fdocuments.net/reader035/viewer/2022062615/548c6199b47959f60c8b624e/html5/thumbnails/10.jpg)
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