Each class will have 3 parts, discussion of homework, demonstration of techniques, and one-on-one meetings.
Adobe Photoshop CS3 (or CS4) Classroom in a Book
Pass/Fail; To pass students must attend a minimum of five classes, gain an understanding of basic concepts, demonstrate basic technical skills, and complete and present a demonstration project.
Participants are expected to attend all class sessions.
Find 5 examples of sites that you think have an effective interface and bring to class next week.
Explore: http://wepagesthatsuck.com/ “Does Your Web Site Suck?”
Read: Lesson 1 in Classroom in a Book
Read: Lessons 9 Vector Drawing Techniques & 5 Layer Basics (these are lessons 8 and 4 in the CS4 book)
Read: Color Theory Tutorial by Worqx http://www.worqx.com/color/
Project: Sketch at least 3 different layouts for your site (if you don't have a site in mind use my examples as a place to start) and create 2 color schemes per layout.
You'll need to set your photoshop files up with guides, use at least 5 layers containing vector shapes and rastor objects, some Lorum Ipsum (so you have some text to place), and saved swatches for your 2 color schemes.
You can use the color scheme genorator at http://colorschemedesigner.com/ to help create your own schemes.
Bring your .PSD files to class so I can see your layers and color schemes.
information Architecture - Mockups and Color - Mockups round 2
Read: Lessons 8 Typographic Design & 11 Advanced Compositng (7 & 10 in CS4)
Read: 10 Web Typography Rules Every Designer Should Know
Explore: 15 Great Examples of Web Typography
Optional: Designing With Type
Project: Pick one sketch from last weeks project and refine its typography. Design a typographic logo for your site, and define fonts for headings, body copy, captions and links.
Read: Lesson 12 Preparing Files for the Web (11 in CS4)
Slice your site's layout and save the compressed files to an images folder.
And
Continue working on the design of the interior pages for your website.
Start in class: Web banner - You'll design a banner ad for a fictional travel agency. TravelCheap wants to promote their price finder feature and plans to post a number of ads on the boston phoenix site. Using the specks the boston phoenix provides create one animated banner ad or 3 static banner ads.
You'll need to create a logo for TravelCheap, find appropreate photography for the ad and layout the provided copy.
"Search travel deals, compare prices, and save big now."
Splash page specks: page should be 600px by 600px. Include appropirate photography or graphics for your design, navigation to the main pages of your site, and 2 or three lines of copy.
See this super simple splash page tutorial: http://www.thedesignworld.com/photoshop-tutorials/web-design/splash-page/ its missing navigation and copy but has a nice and simple design.
Tizag.com • a handy set of tutorials on tools, take a note that they are for Photoshop CS 1, but still apply.
Photoshop Killer Tips • iTunes Podcast
2 Minute Photoshop Tricks • iTunes Podcast
27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts • dzineblog.com • also a good source for insparation
Photoshop Secret Shortcuts • webdesignerwall.com • this site as a number of other tutorials and a job board.
Color Schemes • colorschemedesigner.com
Lorum Ipsum • lipsum.com
Tutorial 9 • tutorial9.net
Up to Speed • on amazon
Adobe Photoshop CS4 Studio Techniques • on amazon
The Web Designer's Idea Book: The Ultimate Guide To Themes, Trends & Styles In Website Design • on amazon
The Non-Designer's Web Book • on amazon
Color Harmony • on amazon
The Elements of Typographic Style Applied to the Web • webtypography.net
Protected? Online Content, and its Abuse
Photoshop is a extensive program, and you will probably have some questions and problems. If you get stuck: