ATrickDesign.com

Hello friends! I dont think we need an intro to the legendary tool, which has celebrated its 20^th birthday last month, since its release, in 1990. Let it be designing those inviting little ad banners, to the finest of hand-crafted webapp UIs, PHOTOSHOP have a special place in a web-designers heart!

With the bustle of web-designers and photoshopers around the world, every day I feel left behind, seeing the awesomeness in the works of millions of talents out there who manage to outplay me, and as a result, help me rekindle my efforts to learn, every single moment.

With the abundance of online resources, tutorials, blogs and articles which keep on excavating the trade of photoshoping, anybody with passion and readiness to work hard can become a pro over time. But what does it take to transition from just a pro, to the best? Why are there some designers who are always the best? What makes them different from the others, when the knowledge available to absorb is equal for everybody? What makes them stand apart?

Here is a quick peep into some etiquettes of a designer in terms of his/her Photoshop workflow, which groups them in a league of their own!

1. Object Oriented Photoshoping
2. Naming conventions for layers and sets
3. Ability to replicate and practice
4. Usage of paths and pen tool
5. Effective usage of adjustment layers and styles
6. Guides, Grids and notes
7. Workspace Management
8. Shortcuts, shortcuts and shortcuts
9. Last but not the least … respect and respond your critiques!

1. Object Oriented Photoshoping

Photoshoping can be fun and pain at the same time! Especially when you are working on complex visual compositions and layouts, with a lot of iterations involved. Designing a high-fidelity visual composition for a website or a web application, can be a nightmare, especially if you are in a team of creatives and when client meetings are too often, which means you will be going through a sea of changes and iterations far too often. The key here is organizing. Organizing your layers /sets and structuring your source file is really important, if you want to be in charge of your PSD.

In the last 6+ years of my career in web designing, I have found this as a unique trait in designers, who love to be organized and productive. Let us walk through a sample PSD and see how its composition can be super-organized, by smartly modularizing the elements and following an object-oriented approach.

You can create this simple form in an Object Oriented way, by identifying and breaking down the various UI elements in the design.

Here for example, there are a group of input fields and a submit button along with a hyperlink, which constitutes the complete form. Thinking in an OO way, each input fields can be considered an object, and if you create a basic textbox element, with editable text and the base block within a set in Photoshop, its just a matter of replicating the set to create multiple textbox elements. Figure below, gives the layer structure of the textbox that I have created for our sample form.

Here the textbox have been organized into a set and a duplicate of the set would be another textbox. Go edit the text, bingo! You have another textbox ready in a matter of seconds, and the layer palette looks organized and cleaner than ever!!

The final layer composition would look something like the figure below:

Implementing this ideology in whatever you design in Photoshop can bring in amazing results and believe me, you are gonna save a lot of time and, can build a solid repository of reusable components over time.

2. Naming conventions for layers and sets

I have had really tough times, working on other designers Photoshop compositions and had gone crazy, just trying to understand the structure of the layers and sets involved. With thousands of unnamed layers and sets, your day can be ruined, especially if you are working in an agile mode and need to make quick changes and updates. The solution here is to smartly name the layers and sets, so that it relates to the element contained in the layer/set. If you are a keen html/css coder, you definitely would know the importance of naming conventions, while building your css.

The ability to completely leverage, the layer palette is something that we designers need to master to get on top. This skill / technique / best practice is the most ignored one, and I find this as the core skill of a photoshoper who loves to be productive and stay organized. Let dive right into the topic! While authoring a graphic, irrespective of the tool that you may use, it is really important to have a clear idea on the various components that make the design. For e.g. . That very idea, should be brought into the canvas through the layer palette, and the way you name the layers actually can communicate the way you visualize the graphic and I normally use this fact, to evaluate the skills of a designer, when asked to choose one out of a bunch of them!

The previous concept that we covered, which is about object-oriented photoshoping have much to do with this way of organizing the composition. Here the key, is to give logical names to the layers rather than presentational names i.e., a layer named blackRectangle, can be given a better name as qLinkSolid depending on the element that it represents (here the black colored rectangle would have been a base section for a set of quick links)

(though you need not stick to this strictly, it is really interesting to figure out how your workflow and approach changes, once you embrace this way of naming the layers and sets. Below is a comparison)

For those who were wondering what logical and presentational are - presentational names are naming based on the presentational aspects of the element, like the color, shape, position or orientation etc. Whereas logical naming is based on the logical importance of the element that layer represents.

Following is a table which puts lights on your woes of naming conventions

Not always can we come up with very detailed logical naming conventions, but its better to take time out and understand the logical importance of the elements and name it accordingly, as this would pay off, when its time for you to graduate to a UX designer, where the UI patterns and naming conventions can play an important role, while doing IA or wire framing.

3. Ability to replicate and practice

“The most important skill that makes a killer designer!”
Keep in mind that nobody is born-genius, at least in our domain: P (those da vincis and Einsteins, please exclude yourselves from this list ). Its practice, practice, practice and just practice that moulds one!

As far as web-designing is concerned, it is the unique ability to appreciate, replicate and refine, that can get you ahead. Replicating doesnt mean copying! I am not asking you to rip a cool site that you found and show your creative skills on the expense of others IP (intellectual property). The collaborative and open culture of internet should be leveraged properly, to enhance your skills, and not to copy paste. So, what I mean by replicate is to try to take some solid reference point design, which you think are the best, and start working from scratch to achieve the aesthetic and creative feel that you have seen in those designs. The concept of ‘Mood Boarding‘ is something visual designers like us should embrace. By this way, you would actually push your limits to a whole new level.

Remember, you are not a good disciple, if you fail to excel your master, the famous quote by the lord of self learning – Da Vinci. So start collecting your reference points and start pushing your limits, towards the quest to become that master designer!
Here are some showcases / galleries, that can give you the kick-start.

• http://www.designbombs.com/
• http://www.cssmania.com
• http://www.cssfury.com
• http://www.csselite.com
• http://mogdesign.eu/blog/niche-showcase-galleries/
• http://inspiredology.com/41-sleek-single-page-websites/
• http://www.smashingmagazine.com/2009/07/22/50-new-beautiful-blog-designs/
• http://vandelaydesign.com/blog/galleries/outstanding-church-websites/
• http://abduzeedo.com/beautiful-personal-portfolios

4. Usage of paths and pen tool

Photoshop is a treasure chest to me the more I delve into it, the more I feel ignorant. The toolbar of Photoshop is synonymous to the Pandora box, which lets out a flood of possibilities to a designer. But there is a tool which, sits pretty out there and have been honored as the king of all tools in Photoshop, just because it is the only tool which can be mastered only over practice, practice and practice (not that all the other tools are easy to use, but this one have a special place in that terms !)

You may use it to cut out images, illustrate your artwork, create stunning new graphic for a UI, but finally what differentiates the masterful designer from the others is the ease with which you use the tool and how u use the right tool for the right task. Paths and pen tools can bring about stunning improvisations in your productivity and workflow, if used smartly. Some instances that I have found useful are

1. Save the path for future reference and usage
2. Always try to maintain the vector information of masks, to make it editable
3. With the introduction of smart objects, in the latest versions of Photoshop, it has become easier for seamlessly integrating vector tools into Photoshop. Smartly use smart objects

5. Effective usage of adjustment layers and styles

The key of a rocking visual composition is flexibility and scalability!
Maintaining the scalability and catering to the ever-changing design updating list is a challenge before every designer. Smart usage of adjustment layers option can do just this!

Using adjustment layers can bring in that flexibility to the composition, so that you can make the updating pretty quickly and easily, by just sliding the slider control. This would come really handy when you are working on layouts with multiple themes and overlays, where you will be maintaining the same design elements, but keep on changing the color schemes. You can add adjustment layers for the changing the following options of the graphic:

6. Guides, Grids and notes

One regular pattern that I have noted about good designers is the way they use guides and notes. A well documented and guided composition will give that professional and organized look no matter, what you design. I would consider this as one important etiquette of a Photoshop rock star!

7. Workspace Management

Photoshop, as we all know is the tool of professionals across multiple domains. Web designers, print designers, post production, photography enthusiasts, 3D professionals and so on

With the armory of tools and techniques abound, Photoshop can be best leveraged, by organizing the palettes and tools that you frequently use. With the release of the latest versions of Photoshop, there are ready made preset workspaces, which the user can choose depending upon area of expertise. For e.g. a web designer would be working most frequently on layers, info, character, navigator, paths, brushes palettes and would need those palettes easily accessible, and hence a workspace where all these palettes are well placed would increase his/her productivity and workflow.

As a productive and multitasking professional, you can always create your own workspace by placing the palettes / tools in a position that well suits your ease of getting tasks done.

8. Shortcuts, shortcuts and shortcuts

Who doesnt know that, shortcuts are the shortcuts to stardom!
With the killer capabilities of Photoshop, I love to work seamlessly with the help of the shortcuts, with clients sitting in front of me gazing at my screen puzzled on, what actually is happening! As a Photoshop rock star, it is your duty to make them dumbstruck while you are working on the tool

Some shortcuts that bring the most out me are:

• New layer Ctrl+Shift+N
• Ctrl + Backspace, Alt + Backspace Foreground / Background Fill
• Duplicate layer Alt + L + D (to place layer in different file)
• TAB + F Fullscreen toggle
• Space For panning
• Ctrl + Shift + C Copy merged
• Ctrl + Alt + Merge Visible Create a duplicate layer of merged layers
• Shift + toolbar shortcuts – Toggling within toolsets
• Ctrl + R, Ctrl + ;, Ctrl + Guides, Rulers, Grids
• Numeric 0 to 9 Opacity controls
• F8 Info Palette
• I Eyedropper tool
• Ctrl+T – select layer for modifications

These are just a few of them which I find useful in my daily encounters with PS. I am sure you have lots to share!

For really detailed Photoshop shortcuts research please head to this article compiled some time ago – 48+ Greatest Adobe Photoshop Keyboard Shortcuts.

9. Last but not the least … respect and respond to your critiques!

For every designer, the best supporter is their critique. Being open to changes and ready to accept criticism is a trait that every successful designer should be having. Most often criticism can bring about the actual defects and stereotypes within you, and giving that extra effort to accept changes can mould you to a better designer, person and human being.

So folks, lets start absorbing strong critiques and lets fly high!

Cheers !