the end result is:

Background design

First of all, you need to create a new photoshop document. copy the values exactly like shown in the image below:

Next thing you should do is the background header design.

It will be quite easy. go into the color picker window for the foreground color and set the color code to #e6e0d5.

then, go again to the color picker but this time for the background color. set the color code to #cec5af.

Now, go to the filter menu from the top bar, render and then choose the clouds filter. the foreground color and the background color MUST be set as shown above so you’ll get the result like here (resized):

(note that this result can be achieved also by playing around with the burn tool and the dodge tool).

Pages bar and buttons design

Choose the rectangular marquee tool (M) and make a new selection of the pages bar.

make sure that the Feather value is 0px and the it’s a ‘new selection’ (see next image)

Open a new layer (Shift+Ctrl+N - photoshop cs3) and paint the selection in black (#000000) using the paint bucket tool (G).

Open again new layer (Shift+Ctrl+N - photoshop cs3), choose the rectangular marquee tool (M) and make a new selection but with a bit smaller height. paint this selection in red (#ac2a2a) using the paint bucket tool (G).

Choose the rectangular marquee tool (M), make a new selection that will be on hover state live on web.

now choose the gradient tool (G), copy the exact next values and pull the gradient line like the following image:

Open a new layer (Shift+Ctrl+N - photoshop cs3 version only!), choose the elliptical marquee tool (M), copy the values of the top bar from the image below (feather - 20px), make a selection like the next image and then paint it in the same red color you used for the pages bar layer.

change this layer mode to multiply.

Choose the rectangular marquee tool (M), set the feather value to 0px, then make a new selection and press DELETE.

create a clipping mask using the shortcuts ‘Ctrl+Alt+G’ (works only in Photoshop CS3).

one more possible way to create a clipping mask is to go to ‘layer > create clipping mask‘.

*make sure that the multiply layer is on the top and the red pages bar layer is one layer below it before making the clipping mask.

Now, duplicate this layer two more times (left click on the layer > duplicate layer).

The result till this step should be like the following image:

first off, open a new photoshop document sized 400×40 (px) and paint the background with white (#ffffff) using the paint bucket tool.

then, choose the gradient tool (G), make sure the basic parameters shown in the top bar are like below:

and then click on the gradient icon in the left side of the top bar. it will take you into the ‘Gradient Editor’.

there, you should create a gradient like shown in the following image

this will be done by adding color tags (click on the blue part of the image) and then double click on the color tagged you have just created.

then, when the gradient values are set, draw a straight line with the gradient tool like the following image

choose the pattern from the list of the black\white circle icon in the bottom of the layers window.

in this window, click on the arrow and choose from the list of your patterns a dotted pattern that will look about like the following pattern:

choose the patten layer if it’s not selected yet in the layers window and change the opacity value to 20% and the mode of this layer to ‘multiply’.

end result till this step should be around like the below image:

step two, making the buttons and touch ups

choose the ‘rectangle tool’, make sure it will be vector and editable by choosing the ’shape layers’ from the top bar of this tool.

create a rectangle sized like the following image and then warp it by going to ‘edit-transform path-warp’.

choose the ‘inflate’ option and change the bend present to 5.0

go and change the value of the fill filed in the layers window to 0%.

One common problem that photoshop users are facing is working with a gif file in photoshop after importing the image to the program.

you import a gif file into photoshop, and trying to edit it such as resize the image, you’ll see it won’t be smooth as a regular image editing.

for example, let’s take this tutorial’s icon.

here’s the original image:

and after resizing it to let’s say 40×40, here’s the bad quality result:

you can see clearly that the quality is really bad.

in addition, you can do any edditing action except really few.

What cause the problem?

the gif file is basicaly in indexed color mode. in this mode, you can’t really edit the content of the image in the original document of it as already mentioned in the last paragraph.

you can see it when you save something as a gif file:

What’s the solution for that problem

The solution for this problem is really simple. as I said earlier in this post, the imported gif file is in the ‘indexed color’ mode. what you’ll need to do is to turn this mode into the mode you’re regular to work with.

this mode called ‘rgb color’ mode. the actual simple action you need to do is the following:

go to image > mode and then choose from the list the ‘rgb color’ option.

that’s it! you can edit your gif image file as you want without having problems at all!

This Photoshop tutorial will teach you how to create a fresh and unique content box design for you website easily, step by step.

main idea of this tutorial is to teach you the techniques of creating neat web graphics that everyone will like.

The final result of this content box photoshop tutorial is:

The tutorial

open photoshop and create a new document sized 280×280 (px)

paint the background layer (named “Layer 1″ on default) in #eceeeb:

(1.)double click on the foreground color and then change the # value to #eceeeb in the color picker window.

(2.)choose the ‘Paint bucket tool’ (G) and one click on the workspace.

Choose the ’rounded rectangle tool’ and copy the following values to the top bar.

then, create a new rounded rectangle that will be the main box shape..

change this layer’s color to green (#7caa02).

changing the shape layer color is done by double click on the color icon besides the layer name.

Next thing is to add some effects to that flat shape.

I applied ‘gradient overlay’ and ’stroke’ effects. the following 2 images shows you the values you need to enter on each effect. you can change it a bit if you like to.. it’s up to you.

blending options is reachable by more than one way. here’re two:

(1.) click on ‘fx’ icon on the bottom of the layers box and then click on the ‘blending options’ option.

(2.) go to “layer - layer style - blending options’ from the top menu of Photoshop program.

gradient overlay values (from green #85A800 to black #000000):

stroke values (stroke color is #ECEDEA):

*please note the blend mode

result till this step should be like below:

This photoshop tutorial is divided into 2 main parts. first is the background design and second is the text and the “magic” effect on it.

First thing you should do before starting the main steps is to make a new document, sized 400×400 (px) with transparent background.

Step one, background design

Choose the ‘Gradient tool’ and click on the gradient icon on the top bar that will be shown when you choose the gradient tool. then, double click on the color tag and it will take you into the color picker window.

enter the values shown in the image below.

click and drag the mouth all long through diagonal.

Next, make a new pattern layer and choose a black\transparent horizontal lines pattern from your patterns.

if you don’t have one- make ones or just google it and I’m sure you’ll find tons of photoshop patterns.

Next thing you should do it adding a layer mask to the pattern layer (make sure the pattern layer is selected in the layers window).

For making it a bit more interesting, choose the ‘Eraser Tool’, set the foreground color to white (#ffffff) and choose from the top bar the brush mode from the mode list.

choose from the brush list the ‘airbrush soft round’ (65px) and don’t change the default values.

if you want it to be softer, so play around with the opacity of the erase brush.

Now, just start erase some random parts from the pattern and you’re done with this part of the tutorial. the result should be like below:

before starting the background design, you should open a new document first. so here’re the values you should enter for this tutorial:

you will get one transparent layer in the layers box. select this layer by clicking on its title.

then, choose the ‘gradient tool’. a new top bar will be shown.

In the red part, you should choose the way you want the gradient to be. in this case I chose the linear gradient

copy the exact values from the non highlighted parts above. those values should be the default.

then, you should click on the gradient on the blue part of the image above.

it will take to into the gradient editor. there, you should fill in the values that in the next image

*changing the color code- double click on the bottom color tag and then in the ‘#’ filed- enter the desired color code

after its done, pull a line of the gradient tool like below:

Next thing you should add to the background is a pattern so it will look more special and unique.

I chose a mesh pattern that can be found in various versions on the net.

after you choose your own pattern or use the one I used, change the mode of this layer to ‘overlay’.

then, choose the gradient tool again, click on the arrow in the blue part and choose a simple white to black gradient.

after you make it, pull a line like the image below:

Step two, pages menu bar design

First, create a new layer,choose the ‘rectangular marquee tool’ (M), make a new selection like image below and paint it in blue (#245daf) with the ‘paint bucket tool’

Open a new layer and choose the rounded rectangle tool. change the radius from the top bar to 10px and make sure it’s on ’shape layers’ option so you’ll be able to edit it later.

make the shape and paint it in white (#ffffff).

choose the ‘convert point tool’ and click on the frame of the rounded rectangle you have just created now.

This action will show you 8 points of the shape that can be edited and will be edited very soon in here.

(1.) select the 2 left-handed bottom points with the ‘convert point tool’ (2.) right click on the mouth and then choose from the list the ‘free transform points’ option. (3.) a new top bar will be shown and on the left of this bar, there will be the anchor point controller. click on the left-bottom point

(4.) go to ‘edit > transform points > flip horizontal’. (5.) click on ENTER.

do the same 5 above steps to the right side. Here’s the result you should get till now:

Now, open a new layer, choose the rectangular marquee tool, make a new selection from the bottom line of the above shape to the bottom document

paint this selection in white (#ffffff) with the paint bucket tool.

Next step is making the buttons. I made 2 kinds of buttons. one for hover status and one for regular status.

lets start with the hover status: (1.) choose the rounded rectangle tool and change the radius to 3px on the top bar. once again, don’t forget to choose the shape layers option.

go to ‘fx’ icon on the bottom of the layers box and then choose ‘gradient overlay’ option from the list.

Here’re the values you should enter in the gradient overlay option:

save this style by clicking on “new style”. we’ll use this style in other buttons with few minor changes.

end result after doing all steps above till now should be like this:

For making this button a bit more special and unique, choose the convert points tool, click on the shape frame of the button layer and then choose the ‘pen tool’. draw a simple triangle but before, make sure you have the same parameters as below image:

duplicate the button shape layer, select the path selection tool and select the triangle path. one click on the triangle frame will select the whole triangle shape. then, just delete this path.

enter to the fx effects options into the gradient overlay option. then, just V the reserve option.

change the opacity value of this layer from 100% to 50% and you’re done with this.

all you need to do now is to duplicate this regular button 2 more times (right click on layer - duplicate layer) and place them like the image below:

next thing in the header design is the search filed and the search button. for this header, I think simple fields will be great for this design.

(1.) open a new layer (2.) choose the rectangular marquee tool and make the selection for the search filed. (3.) paint this selection in white (#ffffff).

(4.) duplicate this layer (right click on layer - duplicate layer) and then choose the ‘move tool’ and make sure that you have a ‘V’ in the top bar option of the ’show transform controls’. you’ll see transform controls all around the duplicated layer.

then, just make it narrow so it will fit to a ‘go!’ button. then just move it to the right.

Step three, adding texts

in fact, you’re almost done with the header design but if you. only thing you should add is the texts.

The menu’s texts are very simple and flat. I just made the text in the hover status button in blue color- #245daf and the regular button status in gray- #bab3b3.

and now to the logo texts:

Make a new text with the ‘horizontal type tool’ (T) and type your website’s title.

Here are the fx effects of the title:

Inner shadow values:

gradient overlay values:

Then, make a new text again with the horizontal type tool and write down your website’s slogan.

ofcource make it smaller that the title size.

please note that for the above 2 texts (the website’s title and slogan, you should choose from the ‘aa’ icon list the ’sharp’ option)

Now, after we’re almost done, all you need to do is to make again a new text but with the following settings:

(text color code of the above image is: #9e9e9e)

Here’s my final result from this tutorial:

first step is to make a new document sized 280px on 230px.

then, paint it in gray: #888888 by using the ‘Paint Bucket Tool’.

Step two, making the cartoon head of the character

*important note: whenever you make a new object in photoshop- choose the ‘Shape layers’ option so it will be vector and you’ll be able to edit it later.

First thing you need to do is to choose the ‘Ellipse Tool’ (U) and make an ellipse in the general shape of the head.

*please note that you need to change the Foreground color to #FAD1BB before making the ellipse(one click on the currect foreground color, and then paste the desired color in the ‘#’ filed)

Here’s the result you need to get at this moment:

For making it a bit more human but still cartoonish, go to ‘Edit-Transform Path-Warp’ and choose the ‘fisheye’ option from the list

.

don’t change anything in the parameters in the top bar- 50% in the Bend and 0 in the rest.

Currect result in this step should be like this:

Now, go to the ‘blending options’ of this layer and add stroke effect of 3px in black (#000000) color.

click on the ‘new style’ button in there because we’ll use this style again.

Choose the ‘ellipse tool’ again and draw a new ellipse, paint it in the same color like before, change the mode to Multiply and make it 50% opacity.

next, choose the ‘Path Selection Tool’ and select the new ellipse path.

a new top bar will be shown in front of you. choose the ’subtract from shape area’option:

One click on the layer and then click ‘ctrl+alt+g’ for making the clipping mask.

Choose the ‘Pen Tool’ (P) and start drawing the hair. after finishing- click ‘ctrl+alt+g’ and add this shape to the clipping mask. Paint the hair shape in black (#000000)

Next thing you should do is making the eyes shapes. this will be done with the next method:

(1.) choose the ’rounded rectangle tool’ and change the ‘radius’ to 10px (2.) change the shape color to #B91919 (3.) go to ‘edit-transform path-skew’ and change it so it will look like below image (4.) choose the ellipse tool and make a perfect circle by holding on shift and dragging the mouth. do it 3 times in different sizes and paint those circles in white (#ffffff)

(5.) select the red eye layer, duplicate it and then make it smaller but still in the same ratio as the right one. then go to ‘edit-transform-flip horizontal’ and move this layer to the left area of the face

(6.) select again from the layers group the 3 white circle layers (hold ctrl and click on each layer), duplicate them and transform them a bit so they will fit into the left smaller eye.

and you’re done with the eyes part. here’s the desired result you should get after doing the above steps:

last part of the face you need to do is making the mouth. This will be done very easily..

all you need to do is to choose the ‘Line Tool’ (U) and draw a simple 10px horizontal line. then, go to ‘edit-transform-warp’ and then choose the ‘Arc’ option from the list.

change the values to the ones in the next image:

then rotate it a bit: go to ‘edit-transform path-rotate’ and change the values like below:

congrats! you’re done with the whole face part. the result till now should be like here:

Part three, hands part with the message

First thing you should do in this step is to make a bourdeaux rectangle (#7b0d0d).

duplicate this layer, paint it in a bit lighter color (#b91919) and transform this layer to 60% height.

Now, you need to make your message. I chose ‘futura’ font colored #fdffce and wrote ‘TUTORIALSHOT”.

and now to the hands making part- (1.) choose the ’rounded rectangle tool’ (U) and leave the values at the top bar like before (10px radius). (2.) when the path of this rounded rectangle is selected, choose the ‘rectangle tool’, choose the ’subtract from shape area’ in the top bar

and “remove” the right rounded side of the rounded rectangle.

Paint this layer in #f7bea2.

apply the style we have done in step two with the stroke.

Next, duplicate this layer (right click on the layer > duplicate layer), go to ‘edit-transform-flip horizontal’ and move it to the left size of the message.

Select the whole message layers (I count 5) and rotate all of them (edit-transform-rotate) with the next values:

last nice effect is the message drop shadow on the character face. this will be done by the next steps:

(1.) duplicate the bourdeaux colored layer (2.) move the duplicated layer to the clipping mask you made before (3.) paint in #fad1bb (4.) change the mode to Multiply.

Here’s my final result:

Yesterday when I was surfing on the net, I found some great-looking websites using torn paper effect in their web design and I decided to go into Photoshop tools and find the ones that can do this effect easily.

After few experiments, I found the easiest way to make this great effect that will be shown on here.

Step one, general selection of the part you want to be tear

Before you start step one, lets set the document. I chose 350px on 350px but you can choose any other size or apply this effect on images \ web graphics.

Open a new layer (Layer>new>layer), select the Lasso Tool (L) and start make a selection (not straight) through an imagined diagonal.

Next, you need to pick the color, I picked #525252 (double click on the correct foreground color and then enter this value where the ‘#’)

Paint the selection you made with the Paint Bucket Tool (G).

Open a new layer under the top one so the order will be like below:

Now, you should repeat the first steps and make a new selection

Paint it in #999999 (also explained in the above steps)

Step two, blur the pixels

The result till now should be like this:

You probably can see the pixels.. your goal is to make the pixels a bit blurred and it will look better.

This will be done with the blur tool

After picking this tool, a top bar of this tool will be shown. enter the below values to it so it will be easier for you to blur it.

When you’re done with the values entry, pass on all the pixel parts in both layers. don’t do it too slow but also not too fast.

If this is too blurry, you can also go back in history or choose the ’sharpen tool’ and pass it on once again till it’s perfect!

The result should be about like this:

Step three, lighting effects

The torn paper effect is ready but for making it a neat effect, lighting effects are required.

I used two tools for making the lighting effects, ‘Burn tool’ and ‘Dodge tool’

Start use them at the ‘paper edge’. one more tip is to change the brush tool.

Here’s my final result:

As mentioned in the tutorial description, this tutorial will show you how to make a nice-looking price tag but more important is that you’ll learn new techniques which will help you in the future.

Here’s the end-result of the price tag icon:

Step one, general idea of the icon

First thing you should do is to make an image in your imagination of price tag. if nothing is coming to your mind when you see those words- just google ‘price tag’, go to images and you’ll get a general idea of how should it looks like. ofcource, you can’t copy the exact shape.

Like I said before, in “(Making of TutorialsHot - First part) Logo making“, I recommend you to have a sketch on a peace of sheet. this will help you a lot… at least, it did help for me.

Step two, making the base shapes of the icon

First, open a new photoshop document, white background, sized 200\200px or any size you want to icon to be.

Now, choose the rounded rectangle tool showed below:

Choose the ’shape layers’ option from the top bar.

Next thing you should do is to change the radios from the top bar to about 10px. it’s up to you how rounded you want the shape to be. then, make the rounded rectangle in the size you want it to be (look at your sketch) and paint it in the color you want.

Next step is choosing the ‘convert point tool’ and click on the shape frame, then you’ll see the 8 points. what you need to do next, is to click once on each of the 4 left points. select the 2 most left-handed point , go to ‘edit-transform points-scale’ and change the height (H) to 80% (located on the top bar). play around with the location of those 2 points until it’ll look perfect for you.

Next thing you should do is to create a perfect circle hole in the shape you have just created. you’ll do it by picking the ‘ellipse tool’, hold the ’shift’ button (will keep the ratio 1:1) and make the circle in the size you want.

Next, you need to apply an arc effect on the shape. this is done by the following steps:

1. Go to: edit-transform-warp
2. Choose the arc effect
3. Change the bend value to 5

Last thing you should do it to make a new layer so the order will be like this: background > new layer > base shape layer.

In this layer, create a perfect circle (already explained in this tutorial) a little bigger from the hole. select the path of this, copy&paste it, go to ‘edit-transform path-scale’ click on the lock symbol on the top bar, and change the height (H) value to 70%. then change the status of this path to ’subtract from shape area’ on the top bar. this should give this object a shape like a ring.

The result at this step should look around this:

Step three, styling the 2 shapes and making the tag wire

Let’s start with the ring effect. I used only one effect for creating the 3D effect to this ring and the effect is ‘bevel and emboss’.

one more important thing you should do- paint it in #E0E0E0.

And now the base shape, I used 2 effects. first is the ‘gradient’.

second is ’stroke’

Second step in step 2 is to create the wire, the part I like the most.

First, you need to choose the pen tool and then choose ‘paths’ option from the top bar.

Then, open a new layer, start making the path you draw in the sketch or just improvise , choose the brush tool and choose hard round 2-3px (your choice), choose the pen tool once again, right click on the path and then choose the stroke path.

*Note that the ‘foreground color’ should be in black #000000 before click on ’stroke path’.

To make the wire a bit more interesting, I recommend to do the next steps (optional):

1. Open a new layer
2. Choose the pentool
3. Right click on path > stroke path
4. Set the foreground to dark gray #535353.
5. Mark ‘V’ on ’simulate pressure’

Here’re 2 images that will help you understand we did I mean in above steps (steps 3,4,5):

Step four, final touch up

Last step in this tutorial is pretty short compared to the others..

All you need to do it to select all layers, right click on them and make all of them, one smart layer.

Then you’ll be able to rotate it without changing the gradient angle and other effects.

The rotation is done by going to ‘edit-transform-rotate’ and then you can rotate it as much as you want.

Here’s my final result after changing some color parameters:

1. Basic use of the photoshop tool- brush tool
2. Creating your own brushes
3. Import photoshop brushes into photoshop

Basic use of the photoshop tool- brush tool

First, let me present in front of you the brush tool in photoshop:

When clicking on the brush sign shoed above, a top bar will be shown. the top bar we be like the next image:

* I marked the main parts that you need to know about. the others are not that important at this moment.

Purple part- shows the brush used at the moment.

Green part- shows the size (in pixels) of the brush used at the moment.

Red part- one click on this arrow will show you the brushes available to use. you can just choose from them the one you want to use.

Blue part- the mode of the brush. and yes, it’s the same like mode option in the layers box.

First action you should do (if you don’t want to use the default brush) is to click on the arrow - red part. then the next widow will be shown to you:

The ‘Master Diameter’ part is for changing the brush size

The ‘Hardness’ part is not really useful in my opinion so I won’t delay on this.

Now, to the right list that will show after you click on the right-top arrow.

From ‘text only’ to ’stroke thumbnail’ is the part that will affect the way you see the brushes on the menu.

From ‘assorted brushes’ to ‘wet media brushes’ is the part that include sets for brushed that are not showing in the list. by clicking on the name you can add the set and use them.

*One more part will be discussed later on this tutorial on the ‘import brushes’ part.

After you chose the desired brush, its size and hardness, then all you should do is to open a new layer, pick the color you want the brush will be and start clicking on the workspace.

Creating your own brushes

After we know basically how to use brushes, next step is to create ones.

Let’s start with picking the shape you want the brush to include. I chose the website’s logo, made it a flat color by removing all styles from the layers, then I painted it in white (above actions were done in new transparent document).

Go to ‘edit-define brush preset’. and congrats! you have a new custom brush.

Now all you need to do is go back to the using part, go the to bottom of the brushes list and you’ll see your brush showing there.

Import photoshop brushes into photoshop

Last part of this tutorial is about importing photoshop brushes into photoshop. I’ll start this part with a list of recommended brushes websites.

deviantart.com

psbrushes.net

brusheezy.com

You can find a lot more by just google this keywords “photoshop brushes”

Now, after you have brushes in your computer, all you need to do is to click ‘Load Brushes…’ option showed on step 2.