The first step of the physical creation of my website was creating the visual layout in photoshop. I lay down a few guidelines when undergoing this process, first of all I like to define the precise sizes of the different elements in whole tens; for instance the posts are 600 pixels wide – I find that this makes things a lot easier when coding it, and ultimately results in more consistency.

Secondly I set up guides in photoshop to ensure that things are perfectly aligned, this usually doesn’t mean a lot for the future processes but if needed, it’s far easier to have done these things precisely to start with.

As you can see in the above image, I like to keep things very sorted in photoshop – luckily this layout is rather simplistic, but when working on larger files you can easily end up with a ton of layers, and finding the right one can be very hard. So what I do is I keep them in folders pertaining to their general element, and then I keep everything on separate layers and (mostly) name them so I can easily go back and edit single parts of the file if wanted.