This is a large posts with lots of images. It may take some time to load. You can download the same ebook at the bottom of this post


Step 1:

Duplicate the original PSD file and keep it as a back up. You don’t want to mess up with the file original file right? Now open the file.

Step 2:

Merge all the layers by pressing Ctrl+Shift+E

Step 3:

Now we have a one single image, make selections and save them based on the layout. This is because in some layout we can get all the images in slices because the slices may overlap.

Step 4:

In this theme we are selecting out logo and saving it separately before we start up slicing the layout.

Using the Rectangular Marquee select the logo area. After the selection is loaded copy the merged area.

Step 5:

Create a new file by pressing Ctrl+N. The dimensions of this file are already entered as per our copied area.

Step 6:

Once the new file is created, in the new file go to Edit>Paste or press Ctrl+V

Step 7:

Press Ctrl+Shift+S to pop up Save As menu to save the logo. I saved it in a .jpg format.

Step 8:

In this step we need to slice the image as per our requirements, like I have done below. Slicing is done using the slice tool found on the left side tool bar. All we need to do is create boxes around the things that we need. Before slicing make sure you the all those text layers that we don’t need.

The above image represents the slices I have made on my layout. Let me explain you what I did here

In the above image only the parts which have a red border are needed. The rest are not required. Each box is marked with an alphabet.

a. The top rounded corners of the wrapper box. We need this for the rounded corners on top

b. This is the website header with the green background and the burger picture.

c. This would be the background image of each post title

d. It might be harder to see this one as this is not marked with red border. This is actually the white part which when repeated on y-axis will create the white box for us.

e. This is the background image for the sidebar header.

f. Background image for comments.

g. Background image for subscription/RSS.

h. The bottom rounded corners of the wrapper box.

i. And on the extreme left we will take a piece of image for our blue background.

Step 9:

Once we are done with the slicing, its time now to create a mockup HTML file with sliced images. To do this click on “Jump to Imageready” button on the toolbar.

You will see Adobe ImageReady application open up with our document.

Step 10:

Now we need to save the file in HTML format along with our images. Click on File > Save Optimized As

Choose the folder that you may want to save you files in. Then type the filename in the field.

Now this is what you get in the output folder where you have saved all your files in.

Step 9: (Alternative way)

Using the rectangular marquee tool, select each of the slice that we need (i.e. a, b, c, d, e, f, g, h and i) and copy it merged like we did for the logo and create a new file.

Then save the file using File>Save or Web or pressing Ctrl+Alt+Shift+S, one after another. Save each image as gif format as this is the most common image format for web layouts. Repeat it for all the images.

In this layout we required 9 images + 1 logo that we saved separately. This is just to give you a basic idea. Based on the complexity, the design may require any number of sliced images like 5 or 10 or 15, 20, 30 etc.

Don’t save the PSD as we don’t require it to be saved.

You can download the same tutorial in an ebook here

Here first have a look at the final preview..

Open up your document file..

Press “Q” to enter quick mask mode. Then Press “B” to select a round brush.

Now start coloring the skin like I did here.

After you are done press “Q” again to exit quick mask mode

Now hold “Ctrl” and press “I” to invert selection.

Newbie Hint : This is necessary because when you exit back from quick mask mode the part which is not in red color gets selected. Inverting the selection will select the red part

Now follow these menu Layer > New Adjustment Layer > and click “Color Balance”

Name the layer as “Complexion” or what ever you want

Now move the three Red Green Blue sliders to +25.

Follow the above step to shadows and highlights too and uncheck the “Preserve Luminosity” checkbox.

Now click OK

Adjust the layer opacity settings for the layer “Complexion” as per the image background to make it look natural.

Thats it you got your fair complexion.

How was the tutorial ? Newbies can ask you questions in the comments section. But please know that im not a pro in photoshop. Just sharing my tricks with my reads. Thanks for reading