Turn any photo into a dot grid artwork with these Photoshop actions. You'll get great results with dots that change size. They get larger in brighter areas and smaller in darker areas. Free download available.
Add some additional navigation:
Next we will add some other elements that should be aligned with this one, but anyway we will recreate it in html/css. If you really want to, use a guide or move tool aligning options. Alright then, add a title for the partnership form and help info. Then add a simple form and the button we created previously for the slider.
Finish the footer with fast contact elements and we're done with main page.
The whole layout looks like this:
Save the document as index.psd or main_page.psd. Doesn't really matter, it's just for you to know what is what. Notice the content part that is outlined with red color. Delete all the layers that are inside (or eventually hide if you don't mind megabytes of RAM taken by mostly unneeded layers; in fact we could make use of some but it's better to just leave those we will need) and save document once again using SAVE AS option. Save it as blank.psd.
Step 12 - Single product's page
Okay, so for now we have something like this. It's our blank document- it's opened. Save it right away as single.psd so we will, after 'saving as', work on single.psd document and blank.psd will stay untouched.
We want to have here an image, description, some unordered lists of functions and a small gallery. I always try to make a draft, even with mouse and brush tool. It's essential to distribute everything so you will have a space for every element. You know- it should be simple but informative. Informative for you.
Here's a tip: If you are wondering how did I created so straight lines with brush tool, get this tool into your 'hands', click anywhere on the document, hold down SHIFT key and then click anywhere else. You see? The line was just created from first click to the second. This feature is very useful for me in planning part. Okay, as we planned, or actually- I planned- place a sample name for the product, create a line (or duplicate it from newsletter set) and use a button to make a hyperlink to the catalog. All the elements here were made previously.
Add a sample image and description. Remember, guides won't tell you how big elements should be. You will tell guides where they has to be. That's wy grid systems are... bad. I didn't wanted to use that word but can't name it other way. Anyhow- they tells you in some way how big your elements should be and where they must be placed. You can't create anything that is unique. Thankfully we are not using any grid system. If you are, unfortunately, using it... Well, maybe try to do something without them and inherit grid system to your projects when you will be ready for it That's mean- when you will know how to design for grid systems without strict grid system. Let's back to the topic: Add your content (that includes all text elements like description, titles and lists) but leave some space for the gallery.