Being a More Efficient Web Designer

October 18th, 2009   Posted by steve in Code, Findings, Tutorials

1. Using Pre-made Form Elements
Often when designing a web comp we need to incorporate items that are part of the browser GUI. These elements, like it or not, are part of the overall design. So its often many designer’s habit to fire up their browser, find a checkbox, radio button, text input, etc. and grab a screen shot. However, there is a better way. The Designer’s Toolbox has done all this for us and organized every browser’s unique elements into an easy to use layered PSD file. Just keep them nearby and whenever you need a browser GUI element you can grab it and resize is however you want very quickly.

2. Using Vector Object’s Mattes to change colors.
fastercolorchanges Many designers are already hip to this trick, but I suspect there are far too many still in the dark about this one. If you use vector objects for your shapes and are either making a new vector object or using the color overlay effect to change its color you’re wasting time. Simply double click the color solid in the layer palette and you’ll be able to change its color.

3. Better Layer Selection
With the later releases of Photoshop its much easier and familiar to select the layers you want in the canvas. The old way of using right click to select a layer can slow you down. You simply need to check the box called “automatically select” and choose layer from the drop down menu and finally click “show transform controls” as well. This will allow you to click a layer with the arrow tool to select it. Shift click others to select multiple, or click and drag to select multiple just like on your desktop. One hint to help this technique is to start organizing your layers and locking them down if you’re not using them. This makes it incredibly easy to grab a huge block of layers and move them and resize them to fit an adjustment.

4. Using Color Palettes.
The Color Palettes window is often overlooked. The typical way of grabbing colors and applying them to new objects is to use the eye dropper tool, maybe copy and paste the hex code. However if you set up your color palettes window for your design you can constantly know exactly where to grab that color and always have the right one. Using sites like colourlovers.com and kuler.com are also great because you can make your palette, or find somebody else’s, and save it right to the window in photoshop or illustrator.

5. Cicero – Lorem Ipsum Widget
default Lorem Ipsum is important to almost every designer and for all the useless widgets out there in the world a lorem ipsum widget is not one of them. If you’re designing a page and need some dummy text its so fast to just use hot corners or a hotkey to pull up dashboard, click copy on the cicero widget, go back to photoshop, and paste in your text. You don’t need to go to lorem ipsum websites, or have a text file you need to open, just one click copy of lorem ipsum without really leaving photoshop.

Last 5 posts by steve

2 Responses to “Being a More Efficient Web Designer”

  1. Jamar  November 19th, 2009

    Nice post, but I think that if you are looking for quality results, you need experts who know the ins and outs of it all.

  2. Brad Cullen  January 31st, 2010

    I think that that was really interesting. Good post!

Leave a Reply