Mark Scerri – Eye on the web

The Plastic Wrap filter provides you with a simple, easy-to-use way to add realistic gloss and moisture effects to photography and illustration. In this tutorial we will use the plastic wrap filter to render a realistic paint effect on a mug. Open up photoshop and load the following image.

No we need to draw the path that will represent the dripping paint. Use the pen tool (shortcut is P) to draw a paint drip shape. First connect a couple of vertical points, then drag out a semi-circle cap at the end and go straight back up. You can use an actual photo reference if you are finding it difficult. The drawing should yield something like this.

Then on a new layer fill the dripping paint with the colour of your choice using the brush. Now use the burn tool with 50% exposure and add shadows to the drip. Then enlarge the brush and add depth to the centre. The effect should be like this.

The last step is to apply the plastic wrap. Go to Filter -> Artistic -> and Plastic Wrap. You have to play a bit with the values to obtain the desired effect. Here is my finished product.

A couple of days ago I decided to put up a series of tutorials on a web site that I am building for my friend. I already created the logo and the colour palette (see here) now the next step is to create the web layout. So let’s not waste time and start straight away.

Like the logo tutorial I will start by showing the final result. This will help you understand things better. So here is the final result.

How do we achieve this? Open Photoshop and let’ start!! Create a new document with width of 768 pixels and height of 800 pixels and set the resolution to 300 pixels/inch (so that we can increase the image size without losing quality) as shown below.

The next thing is to set the foreground color to the dark gray colour with hex code of 1E2528. Then press Alt+Backspace to fill the background with the colour. The next thing is to insert the logo that we created in the previous post. To do this we go to File -> Open and open the logo (the image not the PSD file). When the logo opens press Ctrl+A and then copy (press Ctrl+C). The go in the web layout file and press Ctrl+V. Now press V so that we move the logo in the left upper corner like this.

The next step is to create the menu holder. This part is very important to the website because the user will navigate from this part. To create the menu holder we create a new layer and then choose the Rectangle Tool (press U). Name the new layer menuholder. Make sure that the colour is the dark gray as the background. Now draw a rectange under the logo that stretches from left to right of the page (keep some space from the edges) as shown below.

Of course like this nothing is showing because it is the same colour as the background. So we need to add some styling. To do this double click on the menuholder layer and a new window will pop up. Choose Gradient Overlay. In the Gradient Overlay options menu double click on the Gradient colour box which is this one:

A new window pops up. Click on the two gradient colour boxes as shown in the image below and change the colours to 1E2528 and 5E6A6E respectively to produce the following gradient. Then press the reverse option to reverse the gradient.

The result achieved should be similar to the following:

The next step is to actually create the menu. To do this we select the Horizontal Type Tool (or press T) then click anywhere and type in “Home”. The font colour that I used is white (FFFFFF), Arial, and size is 3.21pt. I repeat this process for the other menu items (“Shopping Cart”, “New Products”, and “Checkout”). Place the menu items under each other as shown here.

The  next step is to create separators between the menu items. Create a new layer and name it menuseparators. Then press u and choose the Line Tool. Make sure that the colour is white (FFFFFF), and that the size is 1px. Draw a line between the first menu item and the second. Then double click on the layer and choose Outer Glow as a style. The last thing is to change the opacity (from the Layer’s menu with the layer chosen) of the layer to around 33%.  Now duplicate this layer (Layer -> Duplicate Layer) two times and for each copy move the separator between menu items to produce the following result.

To have better division in the layout we will add 2 other separators between the logo and the menu holder and vertically near the menu items. Let’s start with the first one. Create a new layer and name it logoseparator. Then draw a line between the logo and the menu holder. Finally double click on the layer and choose Outer Glow effect then change the opacity to 33%. Repeat this process but this time draw a vertical line between the logo and the end of the menu holder near the menu items. The result should be as shown below.

For the next step we are going to need the following image.

Now insert this image and place it near the menu like in the image below. To resize it press Ctrl+T and to move it to the desired position press V. While resizing it press the Shift key so that the dimensions remain proportionate.

Now we insert a small description near the watch by using the Horizontal Type Tool (T). I used Arial for the font and I mixed the gold and white colour for the text. With some experimenting I achieved the following result.

The next step is to add a button so that users can see more details about this watch. To do this create a new layer and name it button. Then set the colour to 5A676C and draw a small rectangle under the price (press U for the rectangle tool). Then double click on the layer and choose Drop Shadow as an effect. Finally add “More Details” text on the button and you should have something like this. The font size is 3.4pt.

The final touch for the menu holder will be to add two lines at the bottom of the menu holder to a new layer that we will name headerlines. To add lines press U and select the line tool. The first line should be 1px and the second 2px. The colours should be 6a7378 and cfb52b respectively. The lines are shown below.

So the header is finished. No we need to focus on the main part of the website. To do this create a new layer and name it mainpart. Then draw a white rectangle in it and place it on the right hand side under the menu holder. Then create another layer and name it mainseparator. In it draw a vertical line with the 6a7378 colour. Repeat this last step 2 more times. Now we have three lines with which we are going to separate the main part in 3 parts to achieve this result.

The next thing is to add some products to the website. For this you need the following 3 pictures.

We are then going to put these 3 images, one in each column. To resize the images press Ctrl+T. Press Shift while resizing so that you keep the dimensions in proportion. Then under each watch add some text for the name, description, and price of the watches as shown in the image below. I used Arial as the font. The name and price of each watch is written in gold (cfb52b) and the description in gray(6a7378).

The next step is to include two buttons: Add to Cart and Details button. To do this we create a new layer and name it addtocart. Then make sure that the colour is 6a7378 and with the rectangle tool (U) draw a button under the price. Then double click on the layer and choose the Drop Shadow effect. The next thing is to write Add to Cart in white (ffffff) on the button. Now merge the last two layers (addtocart and the Add to Cart text layer). This is done by choosing the topmost layer (Add to Cart) and then going on Layer -> Merge Down (or Ctrl+E as a shortcut). Now move the button to the desired position. The last step is to duplicate the layer (Layer ->Duplicate Layer) twice so that we have a button for each watch. Move the buttons one under each watch.

Next repeat the above processes for the Details button. The only difference is that I did the Details button in gold (cfb52b). Here is the result.

Now we need to fill the left part under the menu. Here we are going to put a list of brands. So let’s start with the holder first. Create a new layer and name it brandholder. Set the colour to gray 6a7378 and with the Rectangle Tool (U) draw a rectangle as the holder. Then double click on the layer and click Gradient Overlay effect and apply the following options.

Then write Browse By Brand as a title at the top (do it bold and then write a number of brands as a list underneath as shown below. All text is in white (ffffff). You can also add a separator under the Browse By Brand title. All you need to do is duplicate (Layer -> Duplicate Layer) a menu separator and move it under the Browse By Brand.

The last thing is to create the footer. To do this create a new layer and name it footer. Set the colour to our gray 6a7378. Then draw a rectangle with the Rectangle Tool (U) underneath the main part to act as a footer. Now apply a Gradient Overlay effect by double clicking on the footer layer with the following options.

Now insert some logos and text in the footer as shown below. You can insert whatever you want in the footer. Try to experiment and be original. I came up with the following final result.

Well that’s all for today. The next step? Well the next step is converting this image to HTML, CSS, and JavaScript. Stay tuned things look very interesting. Until then here are a couple of books that will surely interest you:

• Photoshop CS4 Digital Classroom
• Adobe Photoshop CS4 Classroom in a Book
• The Principles of Beautiful Web Design

Enjoy!!

Hello hope you are OK!! So let’s get straight to work. In my previous post I said that we were going to create a web layout with Photoshop. However my client said that he also needed a new logo (first change in requirements: get used to it ). So in this post I will tell you how I am going to create a logo using Photoshop. I hope you have downloaded Photoshop and experimented a bit with it. If not download it from here (30 day trial version).

Now before we start the design of the logo we need to think of a colour scheme that we are going to apply to the website. Choosing a colour scheme is no easy task becuase it depends on the aim and scope of the website/logo. However in this case the client already has a colour scheme that he used in his old logo and that he wishes to retain. According to the client this is “black and gold”. Now he wants a new logo “something more modern”. Therefore I came up with the following colour scheme:

Color HEX: 1e2528

Color HEX: 6a7378

Color HEX: ffffff

Color HEX: cfb52b

So if you observed well our colour scheme (or palette) does not contain black but a dark colour very similar to black with a hex value of 1e2528 (we are using hex values because of photoshop). This gives a more modern look and feel. These will be the four colours that we will use in both the logo and the web layout. So let’s start straight away with the logo. Open up Adobe Photoshop CS4.

Now to help you with this tutorial the image below is the finished logo. The reason why I am going to show you the finished logo is because it will help you more understand what is going on in this tutorial. Here it is!

So let’s start step by step. Now that you have Photoshop open go to File menu and choose New (alternatively use the shortcut Ctrl+N). A window pops up. Name the project Logo and set the width to 250 pixels and the height to 120 pixels as shown below.

Now the first thing we are going to do is to fill the background for the logo. As the background I am going to use the darkest color (#1e2528). So first select this color. You do this by double clicking on the foreground color in the color section, which is this:

A new window will pop up. Set the hex value to 1e2528 as shown here:

Now to fill in the background all you need to do is press Alt+Backspace together. The following is the result:

The next thing is to create the diamond. First go to layer menu and choose New and then Layer. Name the layer diamond. Then press U and the tool to draw shapes is chosen. From the top choose the rectangle tool. Now change the foreground color to gold (#cfb52b). Always remember to save and till now save in PSD format. Now draw a rectangle in the upper left corner of the image. Do not draw it too big, something like this:

Now create another layer (Layer -> New -> Layer) and name it diamondfill. Then select the Eyedropper tool or press I as a shortcut and click on the dark colour. The foreground will automatically change to that colour. Then select the rectangle tool again or press U. We are going to draw a rectangle inside the gold rectangle like this one below. If you are not happy with the position choose the move tool (or press V) and move it until you are satisfied.

The next thing we need to do is to merge the diamond layer and the diamondfill layer into one layer. We do this by selecting the diamondfill layer (click on it in the layers view). Then go to Layer and choose Merge Down (or press Ctrl+E). You should now have two layers Background and diamond. Now we need to rotate the diamond to become like an actual diamond. To do this we choose the diamond layer and then press Ctrl+T. A number of small boxes have formed at the edges of our rectangle. Go on the one at the top right corner. The arrow will change and now you can rotate the rectangle to form a diamond like this one below. You can even resize it if you think it is big/small.

The next step is to write the name of the company. To do this we press the Horizontal Type Tool (or press T). Now choose Monotype Corsiva for the font family, 78pt for the size and make sure that the color is the gold color (#cfb52b). The Horizontal Type Tool toolbar should have the settings as this one.

We should now have the following in our Photoshop file.

Are you noticing something? Well the affect of the diamond is not the desired one. So what we are going to do is add some glow to the diamond. To do this select the diamond layer. Double click on the diamond layer and a window will pop up. Then choose Inner glow and outer glow options as shown here:

The effect produced is definitely better. However there is something else that we can do to make it even better. Select the text layer (Marfel). Double – click on it and another window will pop up as before. This time choose drop shadow and then press OK. You should now have something like this:

This is way much better. Now what’s next? Well we have the name of the company. However this does not say what it does exactly. So our next step is to show that on this website the company will sell watches. So select the Horizontal Type Tool (or press T). Click somewhere so that the cursor appears. Change the colour of the text to light gray (#6a7378). Change the font size to 21pt and the font to Neuva Std. Set the style to Bold Condensed. Write the word ‘watches’. Then select the Move Tool (V) and place the word watches under Marfel near the ‘f’ letter as shown below.

Mmm nice! However the word watches seems very dull. So let’s double click on the watches layer. Now we need to choose Inner Shadow. Now click on outer glow and change the opacity in the outer glow settings to 100% as shown below.

And you shall achieve the following result. Well the final product!!!

Now to save it as an image, save the PSD file. Then go to Layer and then choose Flatten Image. Then go to File, choose Save as and save it as a PNG. Voila you have an image.

So the logo is ready. What’s next? Keep tuned the web layout is coming next and believe that’s more challenging and interesting. CU soon!! One last thing! For those of you who are interested here are a couple of books that will surely interest you:

• Photoshop CS4 Digital Classroom
• Adobe Photoshop CS4 Classroom in a Book
• Logo Design Workbook: A Hands-On Guide to Creating Logos