"UW Website Designers"
Design Fundamentals Photoshop In this tutorial we will explore what separates good design from bad design and how to apply the techniques you’ll learn to your website. • Target Audience • Keep it simple • Navigation is Key • Compatibility Issues • Bandwidth What your site? is Remember who you are targeting! • Children? • Students? • Adults? • Employers? • Peers? • If you don't need it, don't use it! • Every image/animation wants attention! • Backgrounds should be backgrounds • Don’t use animated backgrounds • Certain colours are just bad • Check out colourlovers.com for popular color schemes. • This is the most important part of your site. • It needs to be: o intuitive o easy to understand • Keep navigation easy and simple • Five groups of five, instead of one group of twenty-five • The "three clicks or less" concept • Home should never be more than a single click away. Don’t • use drop-down menus • use splash pages Do • use standard link colours • use pop-up windows sparingly Display Problems • Can depend on the target audience • current resolution standard is: 1024 x The 768 Browser Compatibility • Be as compatible as possible • Validate your website’s compatibility at http://validator.w3.org/ If your website takes too long to load, people will leave. Here are some tips: • use thumbnails • take advantage of page caching • use one theme throughout the website. In this tutorial you will learn techniques to preserve quality of your design even if you upscale to meet new resolution standards. • Layers • Layer Styles • Fonts • Logo • Menu System • Slicing • Use layers! • Every new object or feature (such as a gradient) needs a new layer. • On a PC press Shift+Ctrl+N to create a new layer. • Double-click on the Layer Icon to enter the Style editor. • Use Layer styles as much as possible. • Q: Why use Layer styles? A: To retain quality even after scaling. Useful styles • Drop Shadow • Bevel and Emboss • Color Overlay • Gradient Overlay • Stroke Hint: Keep the styles subtle. • Make an awesome high-resolution Logo. • Select the layers that are part of the logo, right-click and select ‘Convert to Smart Object’. • Now, even if you downscale you can always revert to the original size. • Plan out how the menu system will look. Across the top? Down the side? • Don’t forget to design the look of the menu roll-over. • Backup your design. • Click the layer-menu and then ‘Flatten Image’. • When slicing select the features that are different from the background color. • A technique I use to help me with slicing is to select the Magic Wand tool, set tolerance to 0 un-check Anti-alias and select the background color regions to pick out the distinct regions. • Once you’ve sliced up the design, save the images out as gif, png, or jpeg in the images folder. • Make sure you get the least possible file size without loosing image quality. • These techniques will help your site load faster. FIN. Questions?