Advice and tutorials on utilizing Photoshop to do design mock-ups and graphic design and the like depends on which angle you are coming in from.
Are you the ‘do the Photoshop first and code later’ person or are you a ‘code first, prettify later’ person?
I came into WP as a front-end web developer (who didn’t do much php… yet) and so for myself, I’ve always started at the foundation level of X/HTML and then built up. Code came first and then the skin came last.
I see structure first before I see the ‘prettiness’ and so if I am inspired to try my hand at a particular theme idea, I put together a wireframe idea of what I want to do and then from there, work out the actual design and do the graphic stuff according to how I want things to look like within the foundations of what I’ve built.
My method works for me but I know that a lot of people do just the opposite of what I do.
Instead of framing first, they mock out an entire layout (looks like a screenshot, pretty much) in Photoshop or otherwise and then from there, try and and match it all to code, which I personally find a pain to deal with, especially since I work with table-less designs.
For myself, it is easier to see the code first, understand the code and what it can accommodate and what it cannot and from THERE, break my graphic designing into parts. Backgrounds, icons, buttons, banners, etc.
For example, on my current pet project which I am still working on: https://www.emotiomentalgraffiti.com
I started out with a mishmash of ideas for a theme – post-apocalyptic alleyway grunge meeting high contrast high tech with a dash of rock ‘n’ roll and punk – and built the basic code framework for my layout, first.
After the basic code was implemented, I went to work on a background image and after the background image was finished, I worked on the rest of the major graphical components.
Once the major graphics were in place, I went back and started tweaking and ironing out the details of the coding.
In the case of my theme, doing a full mock up in Photoshop and then converting it all into html and php would have been an idea gone wrong and a big time waster due to the nature of the coding. Doing the design in pieces and parts AFTER the major code framework was in place was, I feel, the smartest thing to do and the biggest time saver.
If you’re fastest and best at doing mockups directly in HTML like I do (setting out the basic framework and the like), I would actually suggest keeping that method and do the Photoshopping later as there are many many designers who aren’t coders who design first and code later and then run into code problems because what they designed is not something easily translated into good code.
Designers aren’t always coders and coders aren’t always designers. I am a bit of both, but like you, I started in the front-end code department first.
As for actual tutorials themselves:
Try googling ‘Making web design mockups in Photoshop’ or something similar.
For myself, if I do actually make a mockup in a graphics editor (I actually don’t use Photoshop), I start by drawing out literal blocks using the shapes tool to set out the basic framework and then add the more complicated stuff in layers.
