Step 1

Create new document 1280px x 1000px 72dpi. Background Color #fff(white)

Step 2

Now select the type tool color:#a90000, and write out any word you would like. Text size dosen’t matter but make it big as possible for this tutorial.

Step 3

Create a new layer then select the rounded brush tool color:#a90000. The brush size varies according to your text size so choose the approiate size. Now create a circle by the end of one of your letters. I’m going to start with the W.

Step 4

This is the part where we will create the drip. Make the brush tool slightly smaller and draw out a drip.

Step 5

Now create 3 circle. Make all circles different sizes and put them around the main circle and drip so that they look like paint splatter.

Step 6

Repeat the steps above for every other word or so then you should have a completed paint splatter. I’ve decided to add a black background to my text. HEHE! You are all done.

Things you need

• sansserifexbflfcond Font

Step 1

Create a new document width:1000px x height:631px background #000000

Step 2

Select the type tool font:sansserifexbflfcond(medium), size:200px, color:#ff9700, smooth. Now select the Character Panel or go to Window>>Character and change the text Tracking to -60(Text tracking goes from left to right). Then write a word that you would like to use. I’ve chosen Webdevtuts.

Double click on the text layer or right click>>blending options. Select color overlay and change the color to #1b1b1b. Then select stroke, size: 1, position: outside, blend mode:normal, opacity:100, fill type:color, color; #b4b4b4

Step 3

Duplicate the text layer then right click>>blending options. Now click on gradient options. blendmodenormal, opacity:100, Gradient(Double click on the gradient bar, left color:#adadad, right color:#ffffff), style:linear, angle:90, scale:100

Step 4

Select the rounded rectangle tool color:#5f5f5f then draw a circle under your typography.

Then go to Filter>>blur>>Guassian blur 90px.

Step 5

Select the rounded rectangle tool color:#151515 and draw a rectangle under your text(Make sure it goes into the black on both sides). Then go to Filter>>blur>>Guassian blur 5px.

Step 6

Duplicate the text layer then create a new group then add the text layer to the group. Right click on the group>>merge group. Go to Edit>>transform>>Flip Vertical. Then drag the vertical text downward until its under the original text.

Now select the rounded blur eraser tool and erase the bottom text until you have that reflection look. Might take of couple of tries but you’ll get it.

Step 7

Select the rounded rectangle tool color: #ffffff, and create a circle on top of your text leaving some of the bottom area untouched.

Now change the layer opacity to 10%.

Step 8

Select the custom shape tool>>Triangle and create a triangle over the text. Try to have it so the triangle is within the glow with just did in the previous step.

Now go to filter>>blur>>Guassian blur. Set the blur to 80. Then change the layer opacity to 80. You’re now done and should have a nice elegant glass looking text typography.

Note: Special thanks to Mixtape Wall for the inspirations!

Things you will need for this tutorial! Click below to get resources.

• Image of Person

Step 1

Create new document 1000px x 1000px 72dpi.

Step 2

Now insert the image of the character into photoshop. The image may be small but if you press CTRL+T(Windows) or CMD+T(Mac) the transform tool should appear, then hold SHIFT+CLICK and drag to canvas size.

Step 3

Select the paint bucket tool and make the canvas background black(#000000). Now duplicate the image layer 3 times.

Step 4

Turn off the background layer and the wayne_2 and wayne_3 layer. Then select the first image layer(wayne_1). Change the layer from normal to multiply. Now press CTRL+SHIFT+U(Windows), CMD+SHIFT+U(Mac) to desaturate layer(Should be black and white).

Step 5

Go to Filter>>Other>>High Pass and change to 25px;

Step 6

Turn on the background layer and select wayne_2 layer. Change the layer from normal to difference.

Now go to Filter>>Artistic>>Plastic Wrap. Highlight Strength: 6, Detail: 1, Smoothness:15 then press ok.

Then go to Filter>>Artistic>>Poster Edges. Edge Thickness: 10, Edge Intensity:0, Posterization:6 then press ok.

Step 7

Now go to Filter>>Blur>>Gaussian blur and change to 10px.

Select the blur brush tool then select the burn tool and go over the entire blurred image. Should give the image some color.

Step 8

Now turn on the wayne_3 layer. Change layer from normal to overlay. Select the erase tool with the blur edges and start to erase. Do not erase over details such as eyes, lips, tattoos and etc.

Step 9

Select the burn tool once again with the blur edge brush and begin to go over the image. You should now see the effect.Click to enlarge

There you go. You have created your very own airbrush/cartoon image. If you would to create a more detail image then I would recommend spending more time on the image to get better results. Thanks for following this tutorial webdevtutsians.

Materials you need!

• Image of yourself
• Photoshop/Illustrator
• Patients

Step 1

Open illustrator and Create new document 1000px x 1000px.

Then grab a image of YOURSELF and place it on the canvas.

Step 2

Ok so if you have seen others tutorials they have probably stated at this step that you should use the pen tool. Since the pen tool takes time to use and get used to we will use the brush tool with a stroke and no color throughout the entire tutorial. Select the brush tool(or press B). Then change the stroke to 0.75. Now trace your face. take your time also.

As you can see I have trace my face with the image turned on.

One you turn the image off you should have a trace like the one below.

Step 3

Now we’re going to trace the hair. I have a buzz hair cut so it might be easy for me to trace but if you have long hair or curly or Afro just trace the outline and we will add details later.

Step 4

Next we will draw the lips. I started with the bottom lip then added the top lip. Zoom in if you need to also. If it takes you multiple tries do not worry the face is one of the hardest things to do.

Note: I am tracing with the image on but looks as if I’m not from the images.

Step 5

I know the nose should be next but we’re going to do the eyes now. Trace your eyes now. When tracing the eyes if you have to change the stroke or the brush depending on what looks good. We will add details later.

Step 6

Next we’re going to draw the nose. Do not draw the entire nose.Draw it piece by piece. Your nose will be different from mines but just look at how I have outlined
it.

Now draw your nostrils. Try not to connect it to your nose. But do not leave to much space in between the nose and nostrils.

Step 7

Next we’re going to get back to the eyes section. Create a line above your eye. That will indicate the outer edge of your eyes. Hope that made sense

Step 8

Now lets create our eye brows. Trace your eye brows.

Now click on the eye brows and change the fill color to black(#000) or whatever color your eyebrows are.

Step 9

Now create two lines for your facial structure. It might make you look like you have wrinkle skins but that will change later. You might have to change the stroke to a thinner stroke. Depends on the person.

Step 10

Now just you should only have to trace your body and add details your ear. I decided to skip some parts to get to the painting. If you’re having trouble just look at how have traced my image.

Step 11

Now we’re going to bring it over into photoshop and start painting it. I guess this is the fun part, well aleast for me it is haha. Go to File>>Export and give your trace a name and save it as a Photoshop Document(PSD).

Step 12

Open photoshop and drag your vector trace into photoshop. The vector will be bigger in photoshop(Just a heads up).

Note: Painting takes a while. Select the Paint brush tool and paint slowly. I painted the inside first then zoomed in and painted the edges.

Step 13

Select the paint brush tool and go around and paint the shirt and hair of your vector. If you have long hair Just create a custom brush pattern with a bunch of lines or
just select the paint brush tool 1px and draw string by string. Yes it takes a while.

Step 14

Now select the best skin tone color for your skin. Since I am a dark brown I will use a dark brown color. If you have light tones and your face we’ll worry about that later. For now just create the basic tone.

Step 15

Now lets work on our eyes. With the brush tool slowly and carefully fill the background of the eye. I did not choose white as the color. Instead I used something a bit darker(#e8e8e8<--Light Grey/white).

Step 16

Select the color of your eyes. In my case my eyes are dark brown so I choose a dark brown color for my eyes. Then added two pupils.

Step 17

Depending on the lighting select the basic color of your lips. I choose a darker color for my bottom lip and lighter color for my top lip. We will add details later.

Now if you look at my original image you will see my lips you see i have lighter spots on some parts of them. So what you want to do to accomplish a great look is select the paint brush tool and whatever color your lips are lighter then select that color. In my case they were a pinkish color so I selected a pink type of color then added 4 dots. After you have the dots go to Filter>>Blur>>Gaussian blur then blur it til it looks good on you. Do that for the top and bottom lip then erase the extra blur around the lips.

Step 18

Ok so remember how we applied a basic tone to our skin. Well this is the part where you add the lighter or dark spots on your skin. I have darker spots on my skin so I selected a dark brown color with the paint brush tool and marked my dark spots(I didn’t really get too detail). Then I added a Gaussian blur to it.

Step 19

Next we’re going to do the exact same thing as step 18 but for our eye shadows. Select the paint brush tool and use the same color that you used for your dark/light spots then add two circles right under your eyebrows then apply a Gaussian blur.

Step 20

Finally add a background image then you’re done! Your vector should be completed. I know I did not use a image that we could of all use because that would make this
tutorial worthless. If you followed my steps then you should be good to go.

I know this tutorial was not very detailed but it should of helped you create a vector image of yourself using simple techniques. I hope you guys enjoyed this tutorial.

Create a new a document Width:960px x Height: 1200px, color:#313131

Step 2

Now were going to give our website a little space. First things first, make sure you have your ruler turned on then add a guide line to 0px and 960px.
Note: To insert a guide line just select the move tool and click on the grid and drag it.

Now press CTRL+ALT+C for windows or CMD+ALT+C for Mac. Now you should see a Canvas size box. This is how we’re going to give our document more room for our website. Select the left arrow and change the width from 960px to 1160px then press ok.

Now repeat the last step but select the right arrow and change the width from 1160px to 1360px then press ok. Now you should have 960px in the middle
of your document.

Note: If your document is white or any other color on either side just select the paint bucket tool and change it to the background color

Step 3

Now were going to create a navigation menu. Select the rounded rectangle tool, 5px radius, color:#1c1b1b and draw a rounded rectangle from 0px to 960px. If you’re
lost just just draw the rectangle from guide line to guide line.

Step 4

Keep the rounded rectangle tool selected just change the color:#515151, and draw another rounded rectangle slightly over the menu background

Step 5

Now create a rounded rectangle box color:#fff. Make sure you leave 15px on both sides of the rectangle.

Step 6

Now create another rounded rectangle for our sidebar. Leave a little space at tht top for out logo. There is 15px space in between elements.

Step 7

Ok so now that the layout is basically there we will start with adding out menu nav links. Select the type tool, Arial, Bold, 14px, sharp, color:#686868. Then
type out the correct menu links. To get the single line text just double click when you have the type tool selected. Then after you have the text entered
create another rounded rectangle color #000 for our rollover.

Step 8

Now were going to make our logo. Select the type tool color:#fff, Arial, Bold, 36px, sharp. Now write out a custom name for your blog.

Now right click on the text layer>>Blending options>>Inner shadow Blendmode:multiply, Opacity:75, Angle:120, Distance0, Choke:0, Size:5.

Then select the color overlay check box and change the color to #3f3f3f. You should now have a letterpress logo effect.

Select the type tool color:#fff, Arial, regular, 10px, sharp. Then write out a sub heading. For the letterpress symbol all that is needed is to duplicate the letterpress text layer and select any symbol from the custom symbol panel. Photoshop will ask you if you would like to rasterize layer and simply click yes then insert your symbol. Your final logo should look exactly like this or similar to the one below

Step 9

Select the rectangle tool color:#313131, then create a rectangle box for our featured slider. Leave 15px on each side and the top.

Now find any image you would like and lets insert it over our slider background leaving 5px around the entire image.

Select the rectangle tool color:#313131, and create a rectangle just a bit above our image then change the opacity to 50%.

Now select the type tool color:#ffffff, Arial, Bold, 18px, Sharp then create a generic post heading.

Step 10

Now we’re going to create our blog post. I will only demonstrate 1 blog post because after you have one completed you can duplicate the rest. Select the rectangle tool color:#313131, then create a rectangle box.

Right click on the box layer>>blending options>>gradient overlay. Blendmode:Normal, Opacity:100, Style:Linear, Angel:90, Scale:100.

Now double click on the gradient bar>> Left Color:#e9e9e9, Right Color:#ffffff.

You should have something like the image below.

Now we will add a thumbnail image to our design. You can use any image just make sure you leave 5px around the entire image. Try to make height similar to mine.

Select the type tool color:#313131, Arial, Bold, 14px, Sharp then create a generic post title.

Select the type tool color:#515151, Arial, Regular, 12px, Sharp then create a generic post information heading. Link color:#cc4343.

Select the type tool color:#515151, Arial, Regular, 12px, Sharp then create a generic excerpt(Little information about the post). Link color:#313131(–>Read More<--).

For our final step select the type tool color:#515151, Arial, Regular, 12px, Sharp then create some post tags. Link color:#cc4343.

Step 11

Now that we have our 1 of the posts completed we can now duplicate the other 4. Group all the layers for the post into one folder then right click on the folder and duplicate group. You can then change titles and thumbnails images if you would like. It makes it seem more like a live website preview.

Step 12

Now we will work on the sidebar. Before we begin working on the sidebar make sure you leave 15px on the sides and top of the sidebar. Google search or create 4 images 125px x 125px for our ad spots. Then place the ads into the sidebar.

Step 13

Select the rectangle tool color:#ededed then create a rectangle box for our popular post widget.

Select the type tool color:#515151, Arial, Regular, 20px, Sharp then create a POPULAR POST heading.

Select the type tool color:#606060, Arial, Regular, 20px, Sharp then create some generic post title headings. Make sure they are all cap so that
they look the same as the images below. The highlighted color:#2c2c2c.

Step 14

For our final step we we now create the footer text. Select the type tool color:#515151, Arial, Regular, 12px, Sharp then create your footer text. All
text below in image below was used on one line.

You’re now done! Your final layout should look like the image below(Click to enlarge)

Step 1

Select the rounded rectangle tool, radius: 5px, color:#1f1f1f and draw a rectangle in the middle of your canavas.

Right click on button layer>>blending options>>gradient overlay. Blend mode:normal, Opacity:100%, Style:linear, Angle90, Scale:54%.

Now double click on the gradient bar. Left Color:#1f1f1f, Right Color:#343434.

Step 2

Now were going to give our button a little of pop out technique. Ok so you know the first rectangle layer we’ve created, we are going to take that layer and duplicate it 2 times. After you have duplicated it 2 times you should now have 3 buttons in total. First Rectangle will be the gradient we’ve created in the beginning of this tutorial and the second 2 buttons will be changed from gradients to a 1 solid color.

Note: To change a layer from a gradient to 1 solid color all you would have to do is right click on the layer>>blending options>>and unselect the gradient overlay box. Then select the
color check box and change the color without making a new button over again.

First rectangle: Gradient
Middle Rectangle: #3D3D3D
Last Rectangle: #343434

Now that you have all 3 buttons made with the proper colors we will now make them them close to one another. Zoom in and select the move tool. Now drag the two layers close to the gradient layer. You should now see a little pop out. If you can not then it might be because of the white canvas.

Step 3

Now we will add our little gloss inside of the button. Select the rounded rectangle tool, color:#ffffff. Now draw a rectangle at the top of the button and change the opacity to 1%, and fill to 10%.

Step 4

Select the type tool color: #4b4b4b, font size:30px arial. Right click on the text layer>>blending options>>Inner shadow. blend mode: multiply, distance 0, choke: 0 , size: 5

Now select the color overlay check box and change the color to #333333.

Step 5

Select the type tool color: #4b4b4b, font size:12px arial. Right click on the text layer>>blending options>>Inner shadow. blend mode: mutiply, opacity: 75%, angle: 120, distance 5, choke: 0 , size: 5

Now select the color overlay check box and change the color to #ffffff. And you should now have a nice looking button.

Note: Click to Enlarge!

You can change the colors of these buttons very easy without creating new buttons. Just change the gradients and background colors and you will be good to go.

Note: Click to Enlarge!

Use Guides

Whenever You start a new website design and Photoshop I recommend that you Always you Photoshop guide lines. Guide lines help you keep your website centered and all of the elements inside of it align. I know there are newbies out there who just open up Photoshop and design and never turn on their guide lines.

To see your guide lines go to press ctrl+; and for mac I believe it is cmd+;

Use real font for Text

This is for all the beginners! I know when most people first start designing websites in Photoshop they often try to use fonts that are not supported on other browsers. It’s ok to use other fonts for logo’s and heading but for real text it is good to use some of the supported well known fonts. You’re probably thinking how do I know which font works for all computers. Well the answer to that is a font list from Ampsoft and they give a pretty well explain explanation on which fonts you should choose, so make sure you check out their article.

Use ruler

Photoshop rulers are a must! Whenever you start a design you should always have your ruler grid turned on. Ruler grid comes in handy for aligning your website, text, images, logo’s and other web elements. Without your ruler your design would be uneven and margins and padding would not equal each other.

Canvas Size

Starting a new design can be very frustrating for some designers. The reason it can be very frustrating sometimes is because you do not know what size canvas you should start with or create. I normally start my design using 960px width. I think 960 works the best considering it can fit all website screens. The graph below shows what screen size most people use as of August 29 2009.

All of the tips listed above all go hand and hand. Each tip should be took in consideration before or during every design process. I know this article was very short but I hoped you have learned something from it. I will try to make longer post in the future that are more valuable.

FINAL RESULTS

Step 1

Create new document 1280px x 1000px 72dpi. Background Color #000(Black)

Step 2

Go to Filter>>Noise>>Add Noise. Amount:7.16% Distribution:Gaussian

Step 3

Select the rectangle tool color:#3f3f72. Create a rectangle size dose not matter.

Step 4

Now we will duplicate the layer and change the color 3 times. 2nd Color:#5a1e7d , 3rd Color:#aa0f80 , 4th Color:#fe34a6.

Step 5

After you have duplicated the layers in step 4 you will now merge the layers together. Unselect the background layer and right click on a layer and select Merge Visible.

Step 6

Ok Now lets select our merge layer now and change the layer opacity to 40%.

Note: We will duplicate our retro lines quite often so be prepared!

Step 7

Duplicate the retro lines layer and make the first retro lines layer invisible. Now lets start making our lines. Press CTRL + T, or go to Edit>>Free Transform and stretch retro lines across screen diagonal.

Step 8

Now lets make our invisible retro lines layer visible and duplicate the layer so you will have another copy of it.

Step 9

Now this is the fun and maybe confusing part but I will try my best to explain everything. Drag your copied retro line layer aside of the first layer

Then go to Edit>>Transform>>Warp

Now you should see a menu in the top left corner of photoshop. Select the drop down menu and choose Fish

Step 10

Repeat the last step and select the one that suits you best. I used fish for my last one.

Note: For the next step I used special space brushes. You can download them here!(Look at the top left for a download link)

Step 11

Now Lets add a little bit of space dust to our image. Select the brush tool Color:#661542, then select the nebula 6 brush.

Now make two splats going diagonal or shall I say space dust.

Step 12

Now Lets add some cool retro text to our wallpaper. Select the text tool Color:#fff, Size:150px, font:AvantGarde-Demi, if you do not have that font Arial works fine. Now type whatever you would like.

Step 13

After you have successfully entered your desired text right click on the text layer>>Blend options>>Drop Shadow. Copy Drop shadow settings.

Now select Outer glow. Copy Outer Glow Settings

Now selectGradient Overlay. Copy Gradient Overlay settings

Double click on the gradient bar. Left Color:#661542 , Right Color:#291832

Now selectStroke. Copy Stroke settings

Step 14

You should now have something like this.

Step 15

Now to add the 3D Effect to our text. Duplicate the text layer in move it to the right a bit and you should have a 3d effect.

From here you could add more splats and space effects but I will stop here. I hope this tutorial was useful. Please link your final result. It will be quite exciting to see what you have come up with.

It’s very detailed tutorial, so prepare yourself for a long run. Make nice warm nescaffe and we’re ready to start.

Promotional iPhone App Site

In this tutorial, we’ll be continuing this series on creating an iPhone app promotional site by taking our previous Fireworks constructed wireframe and adding color, texture, images,….

Water colored Design Studio Blog Layout

In this tutorial you will learn how to make a clean and simple watercolor design studio layout for a blog

Design a Unique Grungy Website Layout

This tutorial will teach you how to design a cool grungy website layout. As well as walking you through the various Photoshop techniques

Design a Beautiful Website From Scratch

Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished
I had the skills to create such designs…..

Create a elegant wordpress theme design using photoshop

Create a clean elegant wordpress theme design using adobe photoshop.

Create a clean modern website design

Build a complete website design mockup for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements

Create A Stylish Portfolio Layout

A portfolio should be clean and easy on the eyes while still displaying the designer’s work prominently. We’ve created another portfolio layout that is stylish and functional

Awesome Tutorial Portfolio Design

think this is most detailed and long web design tutorial on the web with 175 screenshots!!! This tutorial include lots of trendy photoshop effects like:….

View Tutorial

Video sharing layout

In this tutorial il show you how to create a video sharing layout, an ideal layout for you video bloggers……

Create a Grunge Web Design

Photoshop is often the right tool for web design, especially if you’re creating a design using numerous images and brush effects. ….

Create a Clean and Colorful Web Layout

In this tutorial I am going to show you how to create a clean corporate layout in Photoshop…..

Make a Green & Sleek Web Layout

In this web design tutorial, you’ll learn how to create a beautiful, green, and sleek layout in Photoshop….

Layout for a Non-Profit Organization in Photoshop

n this tutorial we will be creating a homepage layout for a fictional non-profit organization….

Create a dark portfolio pixel layout

In this tutorial I will show you the power of patterns applied in web layouts. Photoshop patterns are very important……

Create new document 1280px x 700px 72dpi. Background color:#000

Step 2

Now we will add a brick wall to our image. Google search for a brick wall images, there are many to choose from. Once you have brick wall image go to Image>>Adjustment>>Brightness/Contrast and adjust
image color until it is kinda dark.

Step 3

Select the brush tool then select the blur edge paint brush and create a circle leaving the inside empty.

You should now have a black hole with a small blur around the hole like in the example below.

Step 4

Now We will add a silhouette to our background. Google search silhouette and choose any silhouette. When you have the right silhouette drag image into photoshop.

Note: If image has white background select the Magic Eraser Tool(Press B to select Magic Eraser Tool ).

Step 5

Next we will create our elegant text effect. Select the type tool Font Type: Amienne, size:225px, Color:#ff2fcc( Font can be downloaded from here).

Type any word you desire. I will use Webdevtuts.

Step 6

Now we will make our text glossy and worth looking at. Right click on text layer>>Blending options>>Drop Shadow. Copy settings below

Copy Outter Glow Settings. Color:#ff029e

Copy Bevel and Emboss Settings

Copy Gradient overlay settings Glow Settings

Double click on the gradient color bar, Left Color: #ff2fcc, Right Color: #ff74dd,

Copy stroke Settings

You should now have a glossy text effect. To give it that feel I’ve added the word now open. You can accomplish that by duplicating
the first test layer and changing the font color and size. Well that’s about it I hope you all succeeded with this tutorial.