Hello !

Learn how to create 3D Product Box in Photoshop :

 

In this tutorial, you will learn to create a simple website using Photoshop. Let’s name the site InfoAnimal.

I want to thank for the photos I used to : GusEliz, Lusi, Marcos_bh, Planetka, Zmaher , Pepoitana, Barky , Clix,  Bjearwicke.  

Step 1

Create a new document : 1000 pixels wide and 1100 pixels height.

First do the navigation menu. Select the Rectangular Marquee Tool, set it on Fixed size and place the selection at 93 pixels from the top of the page. You can measure the distance using Ruler Tool (don’t forget to press Shift key while you measure, it will help you draw a straight line).

Go to foreground color in your Tools Palette and set it to #0551ce. Then press Alt + Backspace to fill the selection.

Now let’s add some text. I used 4pt white Arial text, but you can use whatever font you like.

 

Step 2

In order to create the borders to the text, so it will look like buttons, press Ctrl + R to make the Rulers active. Now it will be easier to make the borders at equal distance from each other. Make the first vertical guide at 18pixels from the left side of the page, in order to have a nice padding in the page.

Create a new layer, grab the Pencil Tool and  add one-pixel border between text, where the guides are. Choose for the color one that is a little brighter than the one you used to fill the navigation menu (#055dee).

Again, press Shift to draw a straight line.

After you’ve done that press Ctrl + ; to hide the guides.

 

Step 3

Now select all layers with the borders (click on each of them holding down Ctrl ) and then press Ctrl + E to merge the layers into one. Then rename your layer with a suggestive name and after that double click on it to open the Layer Style Palette and make the next settings:

It looks pretty good, but you can make it better.

 

Step 4

Make a new layer, take the Pen Tool again and draw one-pixel #04388d border to the bottom of the menu. Crete a new layer, Ctrl + click the menu’s layer to select it’s shape, and use the linear Gradient Tool to make a nice gradient over the menu, from blue to white.

Create a new layer again, take the Rectangular Marquee Tool and select the “Home” box. Using radial Gradient tool this time, draw the gradient in the selected area, and then put this layer under the Home’s text layer. Then change the color of  “Home” text to black. Select all the layers of the menu and press Ctrl + G to group them. Rename the group “menu”.

And you are done with the menu.

 

Step 5

For this step you will create a simple photo galley with some pictures with animals.

Create a new layer, take the Rectangular Marquee Tool and make a 151px*1000px rectangle (you can use fixed size again). Fill it with #dfdedd.

Create a new layer again and with Pen Tool create an one-pixel  top and bottom border using this color : #ff9c00.

 

Step 6

Open the rest of the pictures in Photoshop, and then place them into your project ( Drag & Drop).

Ctrl + T in order to transform the photos and make them fit into your gallery.

Make the image form the middle a little bigger. Then apply to all this Layer Style settings :

To the image from the middle apply a stroke : #e8ba87, to make it stand up.

 

Group them and this step is over.

 

Step 6

Now it’s time to create the sidebar.

Take the Rectangular Marquee Tool and create a shape with 381 pixels height and 160 pixels width. Align it with the first border of the menu, witch means 18 pixels from the left side of the page, and then fill it with #f7b041.

Go to Edit > Stroke and apply an on-pixel border. Choose Color and set it to #ce7f03.

Split the shape in 9 parts, using horizontal guides. Create new layer and use Pen Tool again to create the borders between each link in the sidebar. Draw an one-pixel line with this color : #d89b3a and another line under the first line using white color.

 

Step 7

Now select each block between links and apply a linear gradient, using a new layer for every block. For the first and the last block inverse the gradient colors.

Then write some text for the links.

You can write each link to it’s separate layer or you can write them in one layer, one link under the other one, and then apply this setting from the Character Palette (Window > Character):

Step 8

Now you will do the Content of the web.

Make a rectangular shape with 852 pixels width and 682 pixels height. Fill it with #e9e7e3.

The padding between top of the page and the shape has 380 pixels. The padding between the sidebar and the shape has 18 pixels.

Then set the guides this way :

Now select the area between the guides using Rectangular Marquee Tool and press the Delete key.

 

Step 9

It’s time to add some Layer Style :

 

Step 10

Open the next pictures and place them like you see below:

Add some text over the pictures:

 

Step 11

Ok .. let’s make the footer now.

Take the Rectangular Marquee Tool (for the last time in this project J ) and make a rectangular with this dimensions : 65 pixels height and 1000 pixels width. Fill it with #0852cf and apply a gradient. Then, in a new layer, take the Pen Tool and draw a border to the top.

After that copy the links form the navigation bar and paste them here.

You can add some more little details to your page and that is all.

I hope you had fun doing it and you learned something new, too !

 

Final result : (click to enlarge)

Hello !

In order for you to learn to do stone portraits, go to my tutorial on CssCreme :

Hello!

Browsing the Net I found a more precise way to replace colors. And easier. At least from my point of view :)

Until now I was replacing colors using Image – Adjustments – Replace color. I took two photos from sxc.hu (thanks to Bina Sveda for the photo with the girl in blue shirt) and I started to match the red color from the first photo with the blue one from the second photo using the Match Color command.

 

First thing to do when you start working on a image in Photoshop is to duplicate the background layer, and so you don’t have to worry about damaging the original photo. So don’t forget to do that..(Ctrl + J)Choose a selection tool (Lasso tool or Pen tool, I used the second one) and start selecting the red shirt. Select the part above the hands, close the path and then select the other one.After you close that too, right-click on the image and choose Make selection.Now go to the other picture, the one with the girl in blue shirt and just make a random selection somewhere on the shirt. Return to the first photo and make sure you have the duplicated layer selected. Then go to Image – Adjustments – Match color :The Match Color dialog box appears: On top you have Destination image – which is the current image you are in (with the girl in red – in other words : the image containing the colors you want to change) and you have to select from the bottom – Image statistics, the source – from where the colors will be imported.The following options Luminance, Color Intensity, Fade, and Neutralize are the tricky part :)They are not used to adjust the original color of the destination image. From here you can adjust the output color. But that is not working so well in some cases. If the object is a flat one, it’s ok, but in my image I need more work because I need to have more contrast in the color of the shirt.

Using the options above I can only make the entire shirt brighter or darker. In order to darken the shadows and brighten the highlights of her shirt, I'm going to use the adjustment layer. (hold Alt key and click on the icon in the image ) And from there choose Levels. If you don’t like the changes made to the photo – a way to undo that is to simple use the Eraser tool. So here is the final image :