Tag Archives: photoshop

The Power of Photoshop (Or Why I’m not a Graphic Designer)

Many of the positions locally for Web Designer – or as the various titles I’ve seen used Web Developer, HTML Programmer, UI Developer, etc – call for some experience in Photoshop.  Most of the descriptions seem like they want a graphic designer almost – someone to whom Photoshop is a second home – rather that a web designer who has a basic understanding of the software.  Being rather rusty with the program, I decided now would be a good time – especially with using my site as a template site and my templates being rather bland – to port in my text (and sole graphic) and create a basic Photoshop template in which to muck around in the future.  The hope being of course that I will design something brilliant that will be recognized by all and the offers for various lucrative front end positions will come flooding in.

Early experience leads me to believe that unless I find a magic button in Photoshop that does that then I potentially have a better shot of winning the lottery.

Regardless, both in my “mucking around” and experience in working with an actual graphic designer in my last position I managed to find a few neat tools / uses that I found interested and useful – especially with a mindset of a front end designer.  Warning: if you have more then a basic knowledge of Photoshop these are probably old hat to you – these are geared more towards people that are just starting to play with the program.

Of course one of the most powerful features of the product is the ability to create layers.  These function basically as their name would lead you to believe – they create a layer with some graphic and/or text on it and you are able to manipulate the layers in your template much like they were in 3-dimensional space – bringing levels to the front, back, etc.  Even more powerful is the ability to create layer sets – grouping multiple layers together.

Basically, using my site as an example, I created a layer set called bwd (BogeyWebDesign) for the whole site.  Then inside that set I created other sets logically and simply – links 1 (containing link title 1 and links 1), paragraph 1 (containing paragraph title 1 and paragraph 1), etc.  Not only does this organize the site much as you would in a style sheet – allowing someone like me to visualize, move and manipulate the template logically – but you can even hide sets / layers, move them as a group etc.

One useful trick with this?  You could add two different buttons for the links, make them on a layer in your link set, then switch off hiding one or the other – allowing you to see how each fits in with the rest of the design.  You could continue to do this with different banners, graphics, backgrounds, etc.  Then once all the options you like are “on” you have a finished mock and can proceed.  You can even save those hidden layers for future projects, updates, etc.

Simple, intuitive and something you probably already knew – but maybe you didn’t.  I don’t envy the graphic designers – which is why I’m staying with the front end – but definitely appreciate their skills.  And if anyone knows where that magic button is, please feel free to let me know.

Random Tidbit: I’ve mentioned my recent job searching and found an interesting article about how online personas can come back and haunt people doing the same thing.  Basically things like MySpace and Facebook profiles or even college essays that you’ve put out on the web can hurt you in the eyes of recruiters.  But you can also turn this online marketing to your advantage.  I direct recruiters to my site – containing links to templates, sites, blogs and other examples of my work – so that they can see an extended form of my resume.  Others are even more adept at this sort of thing.