Year: 2011
Author: Kate McInnes
Genre: CG Photoshop
Publisher: Rockable press
Language: English
Format: PDF
Pages 271
Picture Perfect Icons
Icons for desktops can be small feature guides or large application icons chock full of detail - a giant canvas, just waiting to be filled and nicely detailed can be very intimidating. Don’t worry, though: Icon Resource will show you how to fit your vision into those power- of-two pixel size documents, one shape layer at a time.
Built to Scale
Icons come in many shapes and sizes; from glyphic pictograms to elaborate ‘realistic’ HIG-compliant OS X and Windows icons, Icon Resource covers sketching them out, modeling them in just Photoshop or similarly featured software, and ensuring they kick ass at all intended sizes – including fitting them into cramped spaces.
Theoretically Academic
Icon Resource doesn’t just let you figure out the design methods and step-by-steps for pretty pictures, it also tells you a bit about the background of icon design, the guidelines you have to adhere on various platforms, and teaches you common pitfalls so you can prevent those nasty ‘redesign situations’.
Veteran icon designer Kate McInnes introduces you to the wonderful world of icon design, so you too can become a Rockstar Icon Designer!
In this book Kate shares with you her experience and expertise by covering everything from the history and theory of icon design, to best practices and methods. She’ll also take you through the whole process of creating your own icon set, and walk you through actual tutorial exercises where you’ll design icons from scratch.
Introduction 7
A Picture Tells a Thousand Words 7
What You Will Learn 8
A Brief History of Computer Icons 10
Conclusions 34
Design Guidelines 40
Icon Basics 40
What Makes a Good Icon? 42
File Formats and Terminology 51
Icon Categories and Conventions 62
Application Icons 62
Document, Settings and Plug-ins 63
Alerts 65
Toolbar Icons 66
Smartphones & Tablet Devices 68
Web-based Interfaces and Sites 72
Emoticons 74
Rendering Styles 78
1. Hyper Realistic 78
2. Clear and Simple 80
3. Creative and Informative 82
4. Pictograms 84
4 Table of Contents
Perspective 88
A Word on Perspective 89
Zero-Point Perspective 89
One-Point Perspective 94
Two-Point Perspective 103
Planometric Projection 109
Isometric Projection 122
View Points 135
Flat View Icons 137
Front View Icons 164
Shelf View Icons 175
Desk View Icons 183
Conclusion 203
Popular Platforms –
Guidelines and Style Tips 205
Designing Icons for Windows 205
Windows XP 206
Aero – Windows Vista and 7 209
Mac OS X 212
iOS 216
Android 2.0 221
Tango 226
Basic Steps to Plan and
Create an Icon Set 230
Get the Specs 230
Create a Checklist 231
Sketch Designs 231
Digital Rendering 232
Asses the Final Designs 233
Name and Export the Assets 234
5 Table of Contents
Troubleshooting 236
Designer Interviews 246
Jakub Steiner 246
Benjamin Nathan 253
Tatyana Suhodolska 258
Appendix: Resources 267
Acknowledgements 269
About The Author 270
Lessons on DVD
Theory
1.IntroductionWelcoming and preparing you for Icon Resource
2.About IconsWhat makes an icon?
3.The History of IconsIcons go way back. We step back and look at the origins of them.
4.Standards and GuidelinesAll about the existing guidelines and standards of icon design.
Technique Duration
1.IntroductionBefore we jump in, a few notes.
2.Sketching Your Icon: Taking a look at our tools and preparing for making awesome stuff.
3.Illustration 101: Get the basics of shape layers down.
4.Sample Icon: Make a PencilMaking a ‘realistic’ pencil in Photoshop.
5.Sample Icon: Make a DocumentA document to go with our pencil.
6.Putting the Pieces Together: Icons often contain several elements. Combining them well is key.
7.Shading and Shadows: Give depth and realism to icons with consistent shading and shadows.
8.Composing the Icon: Compose the icon to a final state.
9.Resizing IconsIcons have to be redrawn and reworked after resizing.
10.Creating an Icon File: Exporting to valid system icon file formats.
11.Postscript: Sumarizing what we’ve learned and looking ahead.
Added Content Duration
1.Sample Icon: Photo Frame: An exercise in advanced masking, smart objects and filters.
2.Run-through: Map Icon Timelapse: A quick look how these techniques let you ‘prototype’ icons.
3.Sample Icon: System Preferences: Very advanced gradient and material rendering.
Download File Size:3.05 GB
|
