Everything you want to know about Photoshop

Design a Warm Nature Website Layout: a Photoshop Tutorial

2009-12-16T03:35:00.000-08:00

In this Photoshop Tutorial, we’re going to be creating a Photoshop web layout that looks like this:

Let’s start the tutorial. Firstly, create a new document sized 1400×1500.

Create two new guides – one at 900px (vertical) and another at 125px (horizontal). Next, insert this image from SXC.hu, and try to align the tree in the image with the guides.

Then select the image layer, and rename it to ‘Background Image’, and adjust the Brightness and Contrast to the following:

After this, change the background to #040c07 (use the paint bucket tool and fill the background layer).

Then, with the selection tool, select the 200px from the bottom of the ‘Background Image’ layer, and fill it with a transparent to #040c07 gradient.

Drag two more vertical guides out, at 300px and 1100px. This marks the edge of our content box.

Then, put your logo above the 125px horizontal guide, and your motto below.

(my motto font is ‘Avant Guard’ size 36px)

Select the rounded rectangle tool, with an edge radius of 10px, and a fill colour of #1d0505. Then, between the vertical guides, draw a rectangle from just below the horizon (in the background image) to just below the bottom of the page.

Then open the rectangle Blending Options. Check the ‘Stroke’ setting, and set a 10px stroke with a colour of #e3ffca and a transparency of 30%.

Next, create a rectangle shape with the colour #5b1a1a between the 900px and the 1100px guides, from the top of the content box to the bottom. Right click the layer, and select ‘Create Clipping Mask’.

Then, with the Dark brown content box layer selected, choose the Rectangle Tool, and select 75px from the top of the box, between the brown sidebar and the main section. Make sure that the fill colour is the same as the content box (#1d0505)

Then open up the blending options, and ensure that there is a Gradient overlay (black to white) with 15% opacity.

Then in the space there, add in your menu items. I’m using the colour #afa688 and font size 24px. The font that I’ve used is Ornitons-Medium, but I reckon something like Myriad could work well.

Then, select the same font, and in size 60px (or less, depending on text), and a colour of #65481e write your heading (I’m writing ‘Grassroots Heritage’). Then open up the blending options, and add the ‘stroke’ effect with width 2px and colour # afa688.

After this, put in a paragraph of dummy text in # afa688 and size 18px Verdana.

Now select the rounded rectangle tool, and draw a rectangle between the ‘350px’ and ‘900px’ guides. The height of your box should be no less than 330px.

Then, get this image from sxc.hu, resize it to be slightly larger than your box, and then ensure that it is above the rectangle layer, then right click on the inserted image, and select ‘Create Clipping Mask’

Then, select the rounded rectangle and apply an inner glow with the following settings:

Then, just input some text for a company advert (I’ve used the font ‘Woodcut’ and written ‘Download the Summer Brochure’), and warped the text layer slightly)

After that’s done, get this image from SXC.hu, and rotate it to fit at the bottom of the content box. Then, select the magic wand tool with a tolerance of ‘60’ and delete the white space.

Place it above the content box layer, and above the sidebar layer, and create a clipping mask (see image below for how your layers should look).

The layer named ‘Shape 1′ is the content box layer (I forgot to rename it!)

Now this shoud be what it looks like

Then, to do the Sidebar ‘From the Blog’ section, we need to recreate the same style as our heading: Choose your font with size 24px and colour #65481e, then, in the blending options, apply a stroke of 2px afa688 and type ‘From the Blog’ and place it at the top of your sidebar. Then select the rounded rectangle tool and draw four 150px x 150px boxes. To each of these, apply the stroke with the following settings: Size: 6px, Opacity: 40%, and Colour: #a19c74.

Then, get four separate images of SXC.hu (I just took four random images from a search for ‘Farm’)

Then, place each image above a separate box, (both in position, and layer) and select ‘Create Clipping Mask’ (just right click the layer in the ‘Layers’ panel).

And that should be something near done!

There are, of course, plenty of other things to change – e.g. the Random coffee beans, etc – but this tutorial is designed to be a starting point, and for you to adjust to your preferences!

Create a Sleek Web 2.0 Style Website Layout: a Photoshop Tutorial (Part 2)

2009-12-16T03:31:00.000-08:00

This is the second of a two part tutorial on Designing and Coding a Sleek Web 2.0 Style Website Layout. (Part one can be viewed here).

For this version, you will need your .PSD file from the original tutorial. If you want to start with what I got, please download the PSD file here. Note: There is one important change in this PSD file than the end result of the first part of this tutorial (the alignment of the ‘content-background’ layer). So if you want a better result, please download the PSD file.

First off, open up the PSD layout in Photoshop, and select the Slice tool (this is found behind the crop tool in the toolbar, default key ‘c’)

Now, make a vertical slice along the header background, right down to the zigzagged lines, and make sure that your slice will allow the image to be repeatable (this is really important for the CSS later on).

Then, make a slice around the logo (you can resize the edges of your slice by clicking and dragging them).

After this, slice around the top of the zigzagged lines which are below the ‘Call-to-action’ image. Make sure again that the image will be able to loop seamlessly horizontally. (Again, This is really important for later)

Then, slice around the 3 icon images (the globe, the clock and the twitter icon).

Then slice the Headings, A suitable part of the zigzagged grey footer, and the footer logo.

Now, there’s a really useful part of the ‘Slice Select’ tool (Different to the normal ‘Slice’ tool). This means that you can rename the sliced areas to a chosen name.

Just double click on the slice, and rename the parts to your choosing.

Here’s a list of what I’m renaming slices to:

Header zigzagged Background: ‘header-bg’

Header Logo: ‘header-logo’

Content zigzagged background: ‘content-bg’

Globe Icon, Clock Icon & Twitter: ‘icon-globe’, ‘icon-clock’ & ‘icon-twitter’

Headings: ‘we-are-global’, ‘we-are-fast’ & ‘twitter’

Footer Background: ‘footer-bg’

Footer Logo: ‘footer-logo’

Then click File>Save for Web & Devices (shortcut Alt+Control+Shift+S). Select PNG-8 as your image format, then click save. In the browse view, create a new folder on your Hard Drive named ‘site’. Then choose the following settings (ensure to check the ‘interlaced’ box, and click ‘Save’. Make sure that only ‘User Slices’ are exported.

Note: Photoshop should have automatically put the images into a folder named ‘images’ inside your ‘site’ folder, and if not, manually do this.

Now we have to manually delete some parts in the ‘header-bg.png’ and ‘content-bg.png’ files. Open them both up into Photoshop, and do the following (this is really important): Duplicate the background layer, and delete the original background layer. Don’t create a layer from background, or this won’t work. Now, select the magic want tool, and a tolerance of around 10, and delete the light blue colour right in the middle of the zigzag.

Now for the hardest part of this tutorial: open the info panel (default key f8), and draw a rectangular selection all the way around the ‘Call to action’ bit (the stuff with the blue gradient background), and make sure to include the zigzags within your selection. Now, in the info palette, have a look at the object size bit, and look at the height value (it has an H: 000 value, where 000 is your selection height – min is 360px) and remember the height for the next part:

Deselect that now (Ctrl+D / Mac Cmd+D), and move the entire ‘Call-to-action’ group into a new canvas. Make the canvas height the same height as your height value from the info palette earlier. Make the width 1300px, so that the background image will fit nicely inside.

Next, select the ‘Call-to-action background’ layer, and select the gradient tool with a linear gradient like so:

(a white to white gradient, with one side 0% opacity and the other side 100% opacity).

Then, draw white gradients from the outside in:

Then, try to centralise the content, but keeping the background in the same place.

Then, save the image as a jpg file in the ‘images’ folder that you have used earlier, and make sure that the quality is relatively high, so as to look sleeker in the final website.

That’s all we need to do in Photoshop! Now onto the coding! Arguably, we can say that the navigation hasn’t been exported yet, but I think we should leave that to CSS, but you can do an image sprite if you want to.

In the ‘site’ folder, create a new html file and call it index.html – then insert the standard tags and whatnot (i.e. doctype, head, html & body).

Then, create a new CSS stylesheet (call it styles.css) and link to it from the index.html file.

1.<link rel="stylesheet" href="styles.css" />

In the styles.css file, make sure that the body margin and padding are 0.
Header Styles
Create a #header div and apply the following:

#header {
width: 100%;
height: 201px;
background: url(images/header-bg.png) repeat-x;
position: relative;
z-index: 1;
}
#header img {
margin: 63px 0px 0px -470px;
border: none;
}

Here’s the HTML for the header:

<div id="header">
<a href="index.html">
<img src="images/header-logo.png" alt="Web 2.0 Business layout from Gungurru" />
a>
div>

And so far it should look like this:

Now for the Call-to-action image. I’m going to call it #callto in the CSS, because it saves so much time to write it out!

#callto {
width: 100%;
height: 360px;
margin-top: -10px;
background: url(images/call-to-action.jpg) center no-repeat #fff;
position: relative;
z-index: 0;
}

The HTML is the following:

1.<div id="callto">div>

And now it should look like this:

Next part is the main content section. In the CSS, we’ll create two divs: #top and #content (why two separate ones? The #top div is for the zigzagged lines at the top, and the #content is for the blue box underneath. The reason that the zigzagged lines cannot be a part of the #content div is because the background colour is set as #2142 and would ruin the effect)

#top {
width: 100%;
height: 28px;
margin-top: -15px;
background: url(images/content-bg.png) top left repeat-x;
position: relative;
z-index: 1;
}
#content {
width: 100%;
min-height: 500px; /* This means that the box will look a nice size even with nothing in it */
background: #002142;
padding: 10px 0px 40px 0px;
}

The HTML for the content box is the following:

<div id="top">
div>
<div align="center">
<div id="content">
div>


And this is what it should look like:

Now onto the navigation – with thanks to desizntech for this (this is using a mod of their code)

#nav {
background: #002142;
padding: 0px 0px 0px 20px;
height: 40px;
list-style: none;
font-family: "arial rounded mt bold", arial, "lucida console", sans-serif;
width: 876px;
}
#nav ul {
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
margin: 0;
padding:0px 30px 0px 0px;
}
#nav a {
display: block;
line-height: 30px;
margin: 0;
padding: 10px 20px;
font-size: 30px;
color: #fff;
text-decoration: none;
background: #none;
}
#nav a:hover {
text-decoration: none;
background: #66789c;
}
.current {
background: #66789c;
}

What you may need to modify is the #nav width. This is what it is so that the Menu can be centred.
And here’s the html for it:

<ul id="nav">
<li>
<a class="current" href="#">Homea>
li>
<li>
<a href="#">Portfolioa>
li>
<li>
<a href="#">Services & Pricinga>
li>
<li>
<a href="#"> Contact a>
li>
ul>

And that should be the navigation styling!
This is what the site should look like now:

Next, we need to style the three columns. I’m just going to go right ahead and style it as an unordered list…

#columns {
list-style: none;
width: 890px;
padding-top: 30px;
}
#columns ul {
margin: 0 auto;
padding: 0;
}
#columns li {
display: inline-block;
text-align: center;
width: 280px;
vertical-align: top;
}
#columns p {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFF;
text-align: left;
padding: 0px 10px;
}
#columns img {
border: none;
}
.global {
padding: 0px 10px;
}
.fast {
padding: 0px 10px;
}
.twitter {
width: 290px;
}

And here’s the html to go with it:

<ul id="columns">
<li class="global">
<img src="images/icon-globe.png" alt="Globe Icon" />
<br />
<img src="images/we-are-global.png" alt="We Are Global" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
p>
li>
<li class="fast">
<img src="images/icon-clock.png" alt="Clock Icon" />
<br />
<img src="images/we-are-fast.png" alt="We Are Fast" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.
p>
li>
<li class="twitter">
<img src="images/icon-twitter.png" alt="Twitter Icon" />
<br />
<img src="images/twitter.png" alt="We Are On Twitter" />

li>
ul>

Now it should look like this:

Finally, onto the footer styles:

#footer {
background: url(images/footer-bg.png) repeat-x left top #ccc;
width: 100%;
min-height: 100px;
margin-top: -16px;
}
#footer p {
width: 890px;
background: url(images/footer-logo.png) no-repeat bottom right;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666;
padding-top: 50px;
}

And here’s the html to go with it:

<div id="footer">
<p>
Copyright Gungurru Web Design 2009
p>
div>

Note: that last div closes the div align center from earlier…

And, if I’ve managed to give correct instruction, the site should look something like this:

Create a Sleek Web 2.0 Style Website Layout: a Photoshop Tutorial (Part 1)

2009-12-16T03:28:00.000-08:00

Create a new Photoshop Document with a size of 1000px by 1200px

Drag out two vertical guides at 100px and 900px, so that we can have a neat border to work with.

Now drag two horizontal guides at 190px and 200px. If you have trouble getting these to be accurate, just zoom in, or use the Info Palette (default key F8)

Next, to create a zigzagged header background, create a new layer named Header and select the pen tool, with a fill colour of ‘#003366’ (Dark Blue) and, while holding down shift, create a zigzagged line all the way along the page (the shift key ensures that the angles are at 45 degrees), using the vertical guides as ‘aiming points’. If you’re having difficulty, just ensure that ‘Snap to Guides’ is on (View>Snap To>Guides).

Note: The points won’t exactly fit on the page, so just go over the edge of the page a little to keep the effect going.

Now, create the rest of the header by clicking in the top two corners while holding shift (to keep the pen path straight), and finish the path by clicking back on the first point. Now you should have the following shape:

When that’s done, open the Blending Options, and apply a Gradient Overlay with the following settings: Blend Mode: Multiply, Opacity: 35%, Style: Linear, and a Black to White Gradient. That’s the header shape now done!

For the Web 2.0 Logo, select the Text tool, and choose a suitable font – Dzine Blog have a great round-up of free Web 2.0 fonts. I’m going to use Arial Rounded MT Bold (most computers should have this) and choose a font size of 60px and a colour of ‘#76a6a6’ (Light Blue). Then write your logo text, and align it about half way up the header, with the left margin to its left.

Open up the text blending options: add a gradient overlay with a gradient which is black to white and drop the opacity to 30%. Then add a Stroke, with the following settings: Size: 8px. Fill Type ‘gradient’ and the gradient should be #FFFFFF to #C2C2FF. Then hit OK. Then, in 18/24px white, write your slogan underneath the logo.

If you love to keep your layers neatly organised, create a new group called ‘Header’ and put all the layers except the background layer inside it.

Now, we want to create the bottom of the page, and leave space for a ‘Call-to-action’ image. Select the Header layer, and duplicate it (Right Click, Duplicate layer). And take it out of the ‘Header’ Group. (Drag it above the ‘Header’ group in the layer box) Now rotate the shape 180 degrees, and apply the transformation.

Now, move the shape so that there is plenty of space between it and the header, and remove the Gradient Overlay (open blending options, and then uncheck the ‘Gradient Overlay box). Next, change the colour of the shape to #002142 (If you don’t know how to change the shape colour, just double click the thumbnail colour in the ‘Layers’ Box, and change the colour.

Then, with the ‘Header Copy’ Layer selected, choose the Rectangular Marquee tool, and drag a rectangle from the bottom of the shape to the bottom of the canvas.

Select the paint bucket tool, and fill the selection with the same Colour (#002142). If Photoshop asks if you want to Rasterise the shape, click Okay, and then you will be able to fill the selection with the colour.

Next, we’re going to insert our ‘Call-to-action’ Image and text. Get a large sized image which is suitable, and insert it into your composition. I’m using ‘Light Effects’ from SXC Images (http://www.sxc.hu/photo/454273) which is great as it has loads of interesting shapes with the light.

Now, move the layer right to the back of your composition, just in front of the background layer, so the image will now appear to be in between the zigzagged lines, and move the image so that you get an interesting part in the gap. If you need to, adjust the colours or lightness – I’ve changed the opacity of the image layer to 40%.

Create a new group called ‘Call-to-action’ and place the image inside that layer. Also, make sure that it is below the other layers, so the rest of the image does not show.

Then, create your call to action text – I’m using Arial Rounded MT Bold with a size of 60px and a colour of #002142. For the highlighted text that you can see, I’m just using a purple colour randomly chosen (#791887). My text is ‘We Promote. We Inspire. You Enjoy. Simple.’ And I’ll admit – it’s not that fun… but it’ll do. It’s important to have highlighted text on your website, because it really makes the good bits stand out (just have a look at http://www.gungurru.com and see what colours stand out…

The next step in this tutorial is to get your image. I suggest that it should be an image of your work, a pretty icon, or important image. I used some screenshots of some of my work from Safari (because it is great eye-candy), and rotated them slightly. The rotation is great as visual impact. Just make sure that they are in the ‘Call-to-action’ layer, and behind the text.

Create a new group called navigation. Inside this, select your font tool, and in your favourite web 2.0 font, (I’m using Arial Rounded MT Bold again) with size 30px and colour #FFFFFF. Then, write out your menu bits (I’m writing ‘Home’ ‘Portfolio’ ‘Services & Pricing’ and ‘Contact’) and align them evenly between your two side margins.

After this, select the rectangle tool, with the colour #FFFFFF, and draw a rectangle shape around the ‘Home’ Text. Give plenty of room at the side, and space at the top and bottom. Then Drop the Opacity to 40%, and place the layer behind the ‘Home’ Layer.

Create a new group called ‘Content’, and stick the ‘Header-Copy’ Layer into it. For the next section, you’re going to need to get the free Function Icon Set. Use it – it’s an invaluable tool for your designs. For the purpose of this tutorial, we’re going to use the following icons: clock_48.png, globe_48.png & twitter_48.png – open them with Photoshop and stick them on your composition, in the ‘Content’ group, in front of the ‘Header-copy’ Layer. Then rename them so you can remember which one’s which, and rename the ‘Header-Copy’ layer to ‘Content Background’.

Now, align the 3 icons so that they get a third of the canvas each. Put the Globe on the left, the Clock in the centre and the Twitter icon on the right.

Now, under each icon, style your text (I’m using dummy text from http://www.lipsum.com , which can generate dummy text for you). For the headings (for me, “We’re Global”), I’m just using Arial MT Rounded, with the colour #C0C0FF, font size 36px, and for the rest I’m using the font Arial With the colour #CCCCCC, and font-size 18px. If you want to highlight certain bits, just use the purple colour from earlier (#791887).

After this, duplicate the ‘Content-Background’ Layer, and move it right to the bottom of the canvas, and place it in a new group called ‘Footer’. Then select the paint bucket tool, and fill the shape with the colour #CCCCCC.

Then, using the text tool, and with Arial, #791887 and a font size of 14px, write your footer copyright text. You can also put a small version of your logo there too.

And who would risk making a Web 2.0 theme without a glossy Web 2.0 badge! (I forgot this in up until now, so I’d better add it in)…

Select the Polygon tool, and make sure that it has ‘20’ sides, and under Geometry options (the little arrow next to the custom shape icon), tick the ‘Star’ Box and the sides are indented by 10%. Ensure that the colour is #791887, to keep with the style of the layout.

In the ‘Call-to-action’ Group, draw out the shape in front of the image that you had selected (for me, it was the rotated screenshots).

Now open up the blending options, and apply the following settings:

(The Purple colour in the ‘Stroke’ Settings is #791887)

Then just add your text – I’m using the Web 2.0 Font again, with size 40px and Colour #CCCCCC. Then select both layers, and rotate them to a stylish angle.

And there we have it – a Sleek(ish) web 2.0 themed website.

Part 2 of this tutorial is available here, and please do subscribe, so that you can be updated with the latest posts. Do comment to tell me how you got on with the tutorial – if there are any problems, just ask…

Design a Vintage WWII Poster

2009-12-16T03:19:00.000-08:00

Ok. As a nice easy start to my tutorials, we’re going to create a World War II themed poster. Here’s a look at what we’ll be creating:

Now we’ve all seen these kinds of things in museums, history books, etc. It’s actually dead-simple, and gives a great end result, too.

Create a new photoshop file – make the canvas size 1500 x 1000

Get a large sized worn paper texture – I’m using http://www.sxc.hu/photo/319356 from SXC because it’s just right for the job.

Place the image on your canvas, and do some adjustments to make sure that it fits nicely. Note: If you can’t see the transform controls, just check the ‘show transform controls’ box at the top. When it is suitably adjusted, apply the transformation by selecting any tool from the panel, and then clicking ‘Apply’ in the dialogue box.

Get a normal picture of any flag of choice. I’m just using a large sized image of the Union Jack (the UK flag) from Google – try to get one of the flags which is a direct-on image of the flag.

Insert the flag image into your canvas, and make sure that it takes up the whole size of the canvas. Then select the flag layer, and apply the wave filter (filter>distort>wave) with the following settings: Now your flag should look like this. If it doesn’t, just play around with the settings until it looks similar.

Now drop the Opacity of the flag layer to ‘5%’

If necessary, delete any bits of white space around the old paper, to make the next step look more authentic. Do this using the magic wand tool, with a tolerance of around ‘10’. Just select the white space and delete.

If you look closely at the edges, the flag seems to go over the edges of the paper. To make the flag keep to the same size as the paper, ensure that the flag layer is above the worn paper layer, and then right click on the flag layer, and select ‘Create Clipping Mask’. This ensures that the union jack does not go over the edges of the worn paper.

Next get a good image of a plane. I got a great image of a spitfire off SXC: http://www.sxc.hu/photo/520632 now insert this into your Photoshop document.

Resize the image, so that it fits nicely inside the paper, with plenty of space around. Then use the magic wand tool to delete all of the white space around the plane. If you notice, the plane has also joined the clipping layer. It’s not really important, but if you want to remove this, just right click on the layer and select ‘Release Clipping Mask’. Then place the plane inside the top half of the canvas.

Now select the plane layer, and apply the ‘Dry Brush’ filter. Do this by selecting Filter>Artistic>Dry Brush. Now apply the following settings: Brush Size: 10 Brush Detail: 0 Texture: 1. Hit ‘Okay’ to apply the filter. Feel free to play around with the settings if you want to tweak the effect.

As you can see, the image of the spitfire is now less Photo-realistic, and now more artistic. This is just the effect that we want for our poster. To really make the effect complete, and to make the image blend into the paper, change the blending mode to ‘Linear Burn’. This darkens the image, and also lets the creases of the paper show through, to give a worn look.

Now select the ‘Pen Tool’ and make the Fill Colour #3a3a0c. This is a dark green colour. With that, draw a slanted bar across the canvas. Do this by just clicking where you want the four corners.

Next, drag the ‘Bar’ layer to just above the flag layer, and then right clicking, and selecting ‘Create Clipping Mask’. Now the bar will not cross beyond the (uneven) edges of the paper. Now change the blending mode of the layer to ‘Overlay’.

If it is necessary, try to align the rotation of some of the plane with the angle of your bar. This is just for layout purposes.

or the next step, you will need two good WWII style poster Fonts. I am using these two free fonts: Komika Axis (http://www.urbanfonts.com/fonts/Komika_Axis.htm) and DayPosterBlack (http://www.fontstock.net/2216/dayposterblack.html). Install the two fonts, and restart Photoshop.

Pick the font Komika Axis, and choose the Colour #999999 with a font size of ’60px’ and write your small text (for me, it is: ‘We’ll soon be back in’) then hit enter, and on the new line, change the font size to ‘120px’ and the font colour to ‘#333333’ and write your second lot of text (for me, it’s ‘Good Old Blighty’ – there’s nothing like a bit of old-fashioned slang!) Then select the blending mode, and change it to ‘Multiply’ and rotate the text to fit inside the bar.

Then select the font tool again, and change the font to ‘DayPosterBlack’ and the colour to ‘#3e3e00’ with a font size of 70px. Then, in the Top-Right corner of the canvas, write your text (I’m writing ‘Not Long, Chaps’). If any other bits of the composition need moving, so that your text can fit in, just shift it or resize it to fit.

Next, find an image of a WWII soldier. I found this one (http://www.sxc.hu/photo/306300) from SXC. Bring it into your composition, and erase everything but the soldier. The easiest way to do this (for a beginner) is to use the rubber tool to go around the edges. I just used a soft-edged 21px rubber-brush-tip. You don’t need to be too accurate – just go around the edges roughly because we’ll soon be using a filter on the image.

Resize the soldier a little, and put him in the bottom-left corner, and add the ‘Dry Brush’ filter once more: Filter>Artistic>Dry Brush with a Brush Size: ‘0’ Brush Detail: ‘10’ Texture: ‘1’. Hit ‘Okay’ to apply the filter. Now change the blending mode for the soldier to ‘Multiply’.

And that’s it! More tutorials and posts will be on the way.

Fashion women photo effects

2009-12-16T03:15:00.000-08:00

In this Photoshop tutorial we will use some photo manipulation techniques to create beautiful women wallpaper. We will use some filters, blending modes and textures.

Start working by creating a new file (File>New) of 1920×1200px/72 dpi. Next we’ll apply the Paint Bucket Tool (G) to give the new background layer color #470000.

Download the texture of wood planks from CGtextures.

Add the downloaded texture to the new layer. Using Free Transform option, put it the way it is shown on the picture:

Make a copy of the texture’s layer and move the copy to the left side (using Free Transform option)

Put together both layers of the texture (holding on CTRL button, mark out the layers and then press CTRL+E). Using Free Transform option, try to represent the effect of the perspective.

Set the next styles by making a mouse click on this layer on the layers’ panel.
Blending Options>Inner Shadow

Blending Options>Gradient Overlay

Gradient’s parameters:

Click on the bottom part of the layers’ panel on Create new fill or adjustment layer>Curves

Press Alt button and click between the Curves layer and the layer with the planks’ texture.

Click once again on the bottom part of the layers’ panel on Create new fill or adjustment layer>Hue/Saturation

Press Alt button and click between the layers (on the layers’ panel)

Create a new layer and choose the Gradient Tool (G) to apply it here with the color #F50300

Select for the layer with the red gradient the next option: Filter>Distort>Wave

Fashion women photo effects

August 12th, 2009 by ART-D Posted in Adobe Photoshop, Photo Editing

Using the Free Transform option, try to stretch out a little the layer with the red rays until the lowest edge.

Select the next styles for the layer: Blending Options>Inner Shadow

Blending Options>Outer Glow

Make a mouse click on the same layer on the bottom part of the layers’ panel on Add a Mask selection and choose a standard brush of black color (Opacity 15%) to clean out the rays on the top part and along the edge of the planks’ texture, getting the effect of the reflection.

Make a copy of the layer containing the red rays and choose Free Transform option to turn over the copy, placing it the same way as below:

The layer’s styles: Blending Options>Drop Shadow

Click on the same layer on the bottom part of the layers’ panel on Add a Mask selection and choose a standard brush of black color to clean out the middle part of the picture (Opacity 100%) and a little on the top part (Opacity 10%).

Create a new layer and choose again the standard brush of black color (Opacity 20%) to dark out the top part of the picture.

On the next new layer we’ll apply the standard brush of black color (Opacity 10%) to dark out the left and right sides.

Using the Custom Shape Tool (U), try to represent several rays of the color #620001. Mark out the inside tops with the Convert Point Tool (holding on the SHIFT button), press CTRL+T and press Maintain aspect ratio to compress uniformly the rays in a single point on their central part.

The layer’s parameters: Fill 76%, Blending mode-Soft Light

Click on the same layer on the bottom part of the layers’ panel on Add a Mask selection and choose the Rectangular Marquee Tool (M) to mark out a zone on the planks’ texture. Using a standard brush of black color, clean out that marked zone.

Create a new layer and apply again a standard brush of black color (Opacity 10%) to represent a kind of darkening along the edge of the planks’ texture.

Fashion women photo effects

August 12th, 2009 by ART-D Posted in Adobe Photoshop, Photo Editing

Find a stock photo with a model represented on it, I used this photo from deviantart. I would like to thank the author of this photo:

Cut it out and insert it on the new layer:

Select the next demonstrated styles for the layer with the girl on it: Blending Options>Outer Glow

Blending Options>Inner Glow

Make a copy of the layer containing the girl and choose the Free Transform option to turn over the copy and place it the same way from below. The copy’s layer will be placed lower than the very first girl’s layer (on the layers’ panel).

Click on the bottom part of the layers’ panel on Add a Mask option and select a standard brush of black color (Opacity 30%) to represent a semitransparent reflection.

Create a new layer again and represent the shadow of the girl we have on the picture. In this case we need a standard brush of black color (Opacity 20%).

Click on the layers’ panel on Create new fill or adjustment layer>Curves

Press Alt button and make a click between the Curves layer and the previous layer with the girl (on the layers’ panel).

Download a Free Vector graphics set 15 that contains the vector of a flower for Adobe Illustrator.

Open the vector in the Adobe Illustrator program. Using the Direct Selection Tool (A), click on the grey texture’s background.

Press DELETE

Mark out the flower and press CTRL+C.

Back to Adobe Photoshop, press CTRL+V and select Paste as: Smart Object. Insert the result on our picture (using Free Transform option).

Using the Eraser Tool (E), try to erase the unnecessary element of the ornament we’ve got.

The layer’s parameters: Blending mode-Soft Light

Make a copy of the flower ornament and select the Free Transform option to turn over the copy, placing it on the right top corner of the picture.

The final result!

Fashion Wallpaper Photoshop

2009-12-16T03:08:00.000-08:00

This tutorial will help you create a fashion wallpaper with several techniques. It also shows you the effectiveness of default Photoshop brushes & blend modes, and how you can use them to greatly improve artworks.

Preview of Final Results

OK. Now before you guys think this is a really easy artwork with some cheap filters , let me tell you that it isn't so. In fact it's quiet long and detailed so if you get stuck while skipping steps then i guess you're on your own. Also I'm taking a different approach to this tutorial. While most tutorials go by the order of steps, I'm dividing the tutorial into 7 Groups so as to make things easier. Here is the arrangement of Groups. You can set these up before we start.

Group 1 - Background(BG)

Lets start off with a new blank canvas with white (#ffffff) as the background. Make a new layer (Ctrl + Shift + N) and fill it with a gradient going from the top left to bottom right corner of the canvas.

I used these to as the colors for the gradient.

Orange : #ffb33a
Pink : #fd0083

Next we add the patterned background over it.

Blend Mode : Luminosity
Opacity : 55%

Make sure to group these layer into Group BG. Now we need to add the main element for this artwork - the girl. So let's save this for now and open up the image of the girl in Photoshop.

Extraction Of Girl

As you can see, this image is totally messed up. Nothing matches with the artwork we've made so far; lighting , color , mood. And this is where Photoshop comes in.

Using the Pen Tool(P) or Polygonal Lasso Tool(L) extract the girl from the image. I personally prefer the Pen Tool in such images since there's mostly straight lines and you get greater smoothness while cutting along the turns.

Don't worry about the jagged edges of the cutting around the hair since that can be dealt with once we put the picture in our canvas. If you've done it with the pen tool, after making the path, right-click on it and select make selection.

Feathered Radius : 2px
Check anti-aliased.

Now select the Move Tool(V) and transfer the girl to our canvas. Re size appropriately and move her to the left side of the canvas since this is the side that we first see in any image. Name this layer "girl" It goes in the group 'Girl'.

Group – Girl

Using a soft round brush on the layer mask of the girl, remove the part of the hair where the background is showing. Also move it at places where the edge is too rough. Now we have one complete image. Good.

Now here's the tricky part. Duplicate this and hide the duplicated. Select the original "girl" layer for applying the displacement map. Go to Filter > Distort > Displace.

There apply the following settings.

Horizontal Scale 40
Vertical Scale 40
Stretch To Fit
Repeat Around Edges

Click ok and select the displacement file. Name this layer "displaced" then change the blend mode to Lighten.

Choose Layer > Layer Style > Drop Shadow. In the layer style select Drop Shadow with the following settings.

Group - Girl - Continues

In the Girl Group , we have 2 layers 1. "displaced" girl 2. hidden copy of the original girl. If you don't have this then go back and recheck. No point going further and later cribbing that you couldn't get the output. Unhide this copied layer,name it 'overlay' and make another copy. Hide this 'another copy' for now. So far so good? Select 'overlay'. Ctrl+Click on thumbnail of 'displaced' girl then click on the button at the bottom saying 'add vector mask'. Now with the splatter brush remove some of the hair and with a soft brush, some of the arms. Change the blending mode to Overlay and set opacity to 50%.

Now in the Girl Group we have 3 layers 1.'displaced' girl. 2.'overlay' girl 3.hidden copy of original girl. Unhide this hidden copy name it 'smoothing' and make another copy. Hide the 'another copy' for now. This 3rd girl layer is just to smooth things up. Change the opacity to 50%, add a vector mask and paint it black so everything's hidden. Now with a soft white brush paint over the layer mask to reveal certain parts as shown below.

Now in the Girl Group we have 4 layers 1.'displaced' girl. 2.'overlay' girl 3.'smoothing' girl 4.hidden copy of original girl. Unhide this hidden copy, name it 'cutout' and do not make any more copies :D ( Yeah, i know, thank god) Move it to the right side of the canvas and enlarge it such that the head occupies a significant position .

Make Blend Mode : Multiply Opacity : 55% Go to Filter > Artistic > Cutout. Use these settings:

Levels: 3
Simplicity: 4
Fidelity: 3

Make a layer mask and with the 'splat of paint' brush remove most of the girl leaving the head.

Now make a new layer on top with opacity set to 15%. Paint the part over the girls legs pink. This is just to blend it with our background pink.

Here's the image you should have so far. Move all the 4 "girl layers" + this pink layer into a group "Girl". Ignore this point if you setup the empty groups in the beginning. This brings us to the end of the Girl element (Pheww~!)

Group - Sparkle

This group will be below Girl group and will have two layers. Sparkle & small Sparkle We could download tons of sparkle brushes from the internet but i thought of making my own. Here’s how. Take a soft round brush of approx. 35-40 px size. Go to Window > Brushes or F5. Apply the settings as given below.

Now for the large sparkles, use it either free hand around the girl or make a path with the Pen tool and creating a stroke. To create a stroke, Right click on the path in the Paths palette (Window > Paths) then choose Stroke Path. In the Stroke Path window, choose Brush. For the smaller sparkles. Just reduce the size and apply it .

Group - Butterfly

This group is the simplest. Just get some butterfly brushes from the net. The reason it has 3 layers is that i have made just one butterfly per layer so that i can adjust size and placement without affecting the others.

Sometimes the butterfly produced with a single click is very faint in some brushes - there I'd advice to click several times to make it prominent. Additionally you could create fine 'trails'(technique explained in next group) behind the butterflies as detailing , though I haven't. Group the three layers and place it above the Girl Group.

Group - City Skyline

This group is above Butterfly and contains basically 2 layers. The upper Skyline & below it Skyline Glow. Just extract the skyline from the image onto the canvas and place it in that group. Make Create a new layer above it. Ctrl+Click on thumbnail of skyline to get its shape. Now with the Rectangular Marquee Tool (M) set to "Intersect with selection" select about 3/4 of the skyline from the right and paint it black. Apply the following settings

Blend Mode: Soft Light
Opacity: 70%

Select the skyline layer with the current layer then merge by pressing Ctrl+E.

Now change the Blend Mode of this merged skyline to Soft Light. Now make a layer BELOW skyline and name it skyline glow. If you notice the glow is very uneven. More in some places and very less in others. Before we start with the glow we need to make the brush. Again like the with the Sparkle brush, select a soft 3px brush. Go to Windows > Brushes (F5) then apply the properties shown below.

The brush is now ready. Select the glow layer. Next Ctrl+Click on thumbnail of skyline layer. You've now got marching ants (yeah! that's what it's called) in the shape of the skyline. Select the Polygonal Lasso Tool (L) or any other selection tool and right click near the marching ants. Select > Make work Path > Tolerance : 2px.

This makes the selection into a path. Select the Pen Tool(P) and right click near the created path and select Stroke Path --> Brush Do Not select Stimulate pressure. Click ok. Right click over the path and select Delete Path.

Now we have a dotted line over the skyline. Right click on the layer and select Blending Options. Select Outer Glow and apply the options as given in the picture.

There you go - the glowing skyline.

The trick here is that parts where the dots are packed together (around changing of buildings) will produce a comparatively greater glow.

Check all the layers.

Group - TAG

This group stays below Sparkle and contains 2 layers ; one copy of the other. This is probably the oldest (and my favorite) trick in the book. Using the Rectangular Marquee Tool(M) make a selection above the belly of the girl. Fill it with Purple : #a52d5c I've added another color within it (#831734) but you can stick to one for simplicity.

Ctrl+Click on thumbnail to select the rectangle the then press (Q) for Quick Selection Mode. Go to Filter --> Pixelate --> Color Halftone Fill the options as given in the picture and select OK.

Now press Q again to exit the Quick Selection Mode. Press Ctrl+Shift+I to invert the selection and press delete.

You'll see a pattern at the edge. Now to bend it on both side, and push inside the middle portion using Warp. Goto Edit --> Transform --> Warp Selecting the ends of the rectangle gently pull down the sides and push in the middle, also raise the top a bit to give it a proper bend look.

After you are satisfied, hit enter to complete the transformation. Now we have to fade the sides. For doing this add a layer mask. Take the Gradient Tool(G) with Black and White as colors. Give a tilted gradient on both sides as shown. Reduce the Opacity to 35% and duplicate the layer to make the colour deeper.

Check your layers.

Done with this group~!

Group - TXT

Again this text employs the same method used in the Skyline Glow case with a different approach. Select a nice font(Angelina) and write out whatever text you want. Keep it over the TAG part of the image so as to bring out contrast. Hide the layer. Ctrl+Click on thumbnail . Select the Lasso Tool(L). Right click near the marching ants and select Make Work Path --> Tolerance 2px.

Now that its a path make a new layer. Make the dotted brush as in Skyline Brush. Select the pen tool and apply brush stroke . Delete path. Simple.

Group - Background(BG) - Final Touches

Still find something missing? That's right. Only one layer, but which changes the artwork completely. Go to the Background(BG) Group Above the Pattern layer, make a new layer and name it "lens flare' Paint it black completely. Go to Filter > Render > Lens Flare Select the 105mm Prime with 150% Brightness. Angle the flare such that the main part falls on the body and the tail on the 'cutout' girl (face) This might take a few attempts to get right. Set the layer blend mode to Hard Light and opacity to 90%. Presto~! Notice the difference. The artwork looks much more attractive now. If you feel the brightness is still less then you can add an additional layer above the flare with 25% opacity and paint some splashes white.

Final Setup Of Layers

Have a look at the final Set up of layers. It should help you eliminate any doubts.

Hope you enjoyed this tutorial as much as you found it helpful. If you have any doubts,get stuck at any point, or just need some info, you can leave a comment or just contact me at my email address - digitalcompositions@gmail.com

Final Results

Fashion Shot Photoshop

2009-12-16T03:02:00.000-08:00

Find out how this amazing image was created with Photoshop. This Photoshop tutorial will teach you many techniques that you can use to enhance your photos.

Preview of Final Results

This tutorial will be slightly different from the majority of the tutorials on the web, firstly because it is not aimed at beginners and secondly it will be giving the techniques and why I used them rather than telling you exactly what buttons to press. However I think I've explained most things to a high enough degree to be understood by people with quite a low knowledge of Photoshop but I haven't gone in to details such as how to create a layer etc.

As with most of my tutorials I try to show as many useful techniques in one tutorial as I can fit in even if the final image isn't something you've been dying to learn how to make. I also try and explain my regular workflow as its probably more useful to know why I want to add something to the picture rather than just telling you to do it, for this reason the tutorial may not be in the most sensible order for example I go foreground, background, foreground, background but I assure you this seemed this most sensible way to tackle this image at the time. Lastly I want to say that I got a lot of my inspiration here from Nik Ainley, a very talented digital artist.

Step 1

Start by creating a new document in Photoshop, I used a size of 2554x1559px, I can't remember now why I used that size so feel free to use a different ratio if you are creating a wallpaper although try and keep the dimensions similar to what I have. Next select the paint bucket tool and using a foreground color of black, fill the background layer. Next you will need to get a photo of a person, subjects which will work best are one wearing dark clothes as we are going to fade the person into a black background. The techniques shown is this tutorial can always be adapted, for example if your subject is wearing red you could fade them into a red background. The image I used can be found here and probably worth using if you are new to this kind of editing. Okay either drag the image into your document or just copy and paste it then place it similarly to the image shown below.

Step 2

Now for the most tedious part in any photo manipulation, also one of the most important parts; the extraction of our subject. This one isn't all that hard to extract because the outline of the man is quite simple. Sometimes when we are given a photo with a white background we can use the magic wand tool or the color range selection. However you can only really get away with this when the background you are putting it on is also a light color because here if we were to use the magic wand we would be left with a narrow gray outline that will stand out against the black background. What we will do is to create a layer mask on this layer, so select the layer with the person in it then click the layer mask button at the bottom of the layers panel. For those that have not yet encountered layer masks then basically what they do is to hide the parts of the layer where the layer mask is dark and let through the parts where the layer mask is light, for example if the layer mask was filled black then none of this layer would be visible but if it is white like ours is at the moment then everything will be visible. Click on the layer mask then select a brush of about 20px and 80% hardness with the foreground color still at black. Now draw round the outline of his clothes, you won't need to be too accurate as the color of his suit and the background are about the same anyway. You may need to use a smaller brush for some parts so just change the size or hit the '[' button to make it smaller and the ']' button to enlarge it. The hair is a bit trickier and will require you to change the opacity of the brush but only go round the basic shape of the hair and don't worry about the strands that stick out as they won't be seen anyway on the black background after going round the person just fill any parts out with this black. The first image shows what it should look like after masking and the second, what my layer mask looked like. Okay since this isn't a masking tutorial I've decided to be nice and post my layer mask so you don't need to extract anything. If you're reading this and you have just extracted the image then think of it as good practice but if you skipped ahead and don't want to spend too much time on the extraction then you can download the layer mask which I've put on my site here. To use this, copy it into your document then go select>color range and set fuzziness to 200 then click on the white part now go to the layer with the man on it and if you have already put a layer mask on this image then delete it and just click on the layer mask button in the layers panel.

Step 3

Next I duplicated this layer then moved it behind the original layer and scaled and moved it to the left slightly. I then grabbed a large soft brush with an opacity of about 30% and brushed over his face in the layer mask. I then duplicated the original layer again and moved it behind also then went edit>transform>flip horizontal and scaled and moved it slightly. On this layer brushed over his trousers and the bottom of his shirt in the layer mask. Usually when I'm working in Photoshop I add a layer mask to every layer I create just out of habit as it allows for a lot of subtle changes which can be changed throughout the process unlike using the eraser tool. Okay your image should look like the one below, now just change the opacity to both of these new layers to about 10%.

Step 4

Create a new layer group then select the three layers with the people in then drag them into this layer group. It is a good idea to name this group sensibly as we will have a few groups after we have finished. Now click on the group and add a layer mask, the reason I added a layer mask to the group was that if I wanted to hide parts of all three of these layers then I could do so with this mask. Grab a large soft brush with an opacity of about 30% then brush over the left side (his right) of his body and also his trousers and some of his hair in order to blend him into the background. Try and get him looking like the image below.

Step 5

Create a new layer group above this called 'adjustments'. This is where we will add adjustment layers to make the image look better. The advantages of using adjustment layers over layer adjustments are that an adjustment layer comes with a layer mask so your adjustment can be applied to selected parts of your image also a lot can be changed later on in the design like the settings or the opacity. You'll probably agree with me when I say that that this man's fashion sense isn't all that great. But with some easy Photoshopping we can change this very quickly. Firstly the navy blue suit would look a lot better black in order to match his hair and our background. The brown belt doesn't match so we will also change that to black and the blue shirt would look better light gray. This all makes for an easy adjustment because all we need is to desaturate all hiss clothes then change the brightness and contrast of the some of the parts. Start by creating a hue/saturation adjustment layer (next to the layer mask button) and change the saturation to -100, in other words grayscale. Now select the layer mask and using a soft black brush with about 30% opacity, paint onto his face. We still want his face to be of a low saturation as shown in the image below so don't brush too much. If you're really into your small details like me then do the same with the small part of his hand that you can see.

Step 6

Next I added a brightness/contrast adjustment layer this was to make the shirt lighter, increase the contrast on the face and neutralise the tone on the suit. So add a brightness/contrast adjustment layer and use about +67 for the brightness and about +42 for the contrast. Now you will notice that his left sleeve is now a bit too bright so click on the layer mask and use a soft brush with about 90% opacity, black and brush over this sleeve. I also brushed over the other side of the suit and the trousers this was just in case I added anything else to this part of the image. Keep working at it until you are happy, here is what mine looked like after applying this adjustment.

Step 7

I next added another brightness/contrast this time with settings at -62 for brightness and +53 for contrast. This was to make the whole image darker while still retaining the contrast so no layer mask on this one. Then another brightness/contrast layer, this one was to darken the hair slightly. I used a brightness of -83 and a contrast of 0. Next click on the layer mask for this adjustment then go image>adjustments>invert, this will turn the layer mask black. Grab a soft brush with an opacity of about 80% and brush over some of the hair using white in the layer mask, and this actually darkens the hair.

Step 8

Now I wanted to add some lighting to the background and also bring out the middle reflection of our man. So create a new layer directly above the background layer then select the brush tool and use a size of 300px and a hardness of 0% and an opacity of 100%. With white as the foreground color, brush from around the man's left shoulder, in a kind of, I used boomerang shape. Then go filter>blur guassian blur with 100px. Lastly change the opacity of this layer to 50%.

Step 9

Now create a new layer group directly above the background layer and name it 'background', this will contain some detail to the background rather than just having it plain black. The first thing we will add to this layer group is some elliptical shapes which will be hardly visible. First select the gradient tool and in the main toolbar open up the gradient editor and make a gradient going from a very dark color; almost black to pure black. Now create a new layer and select the elliptical marquee tool and draw an ellipse select the gradient tool again and drag from one side of the ellipse to the other then deselect by going select>deselect. Do this four times with different ellipses, each time in a new layer. Below I have shown where I made the ellipses, I added a stroke to these just so you could see them in this tutorial but don't add a stroke to yours. Feel free to add a layer mask to any of these if you want to blend them more, I did it for one of my ellipses.

Step 10

Next I created two more layers and used white splatter brushes, a lot of these can be found here but you can also get away with using some of the ones Photoshop has built in. Lower the opacity of these layers a lot and add a layer mask for any blending. Below you can see roughly where I put the splatters. All these details should be very faint but will build up gradually.

Step 11

To brighten some of the splatters I added a brightness/contrast adjustment layer and used +150 for the brightness and 0 for the contrast. Select the mask and invert it as we did in step 8. Now with a soft white brush of about 125px and 100% opacity add some dots to this layer mask by just pressing in the same place about three times. You should now have something that looks like the image below.

Step 12

Okay, now we will create the lines that you see. For this you need Adobe Illustrator, if you don't have Illustrator you can get a similar effect by using brushes like these although you will get a better result with Illustrator. First save your image as a Jpeg but keep it open then open up Illustrator and open the Jpeg image. Now select the pen tool and set it to no fill and 1px white stroke in the main toolbar.

Step 13

With the pen tool draw a path like so, this is same as how you would do it in Photoshop; holding and dragging at each point to smooth the curve. Note that I have tried to follow the edge of the jacket and this is why I pasted the image into Illustrator.

Step 14

After ending the last path, create a new path following his shoulder roughly.

Step 15

Next select the blend tool (W) and click on the first path then the second, you will now see that a new line has been added between these two but we want more lines. Hit return then use the settings shown below.

Step 16

with this done, select the whole shape then copy it, now go back to Photoshop and make a new layer group at the top of the layer stack then paste this shape inside that group. A dialog box should pop up, if it gives an option to paste it as a smart object then do this, if not paste it as pixels. The smart object will keep it as a vector so we would be able to scale it up without losing quality if we wanted.

Step 17

Now do the usual; add a layer mask then using a large, soft, low opacity, black brush blend it into the background and also remove the hard ends on all the lines. Lastly lower the opacity slightly; I used 75% for mine.

Step 18

I did this a few more times to other parts of the image where I thought this would look good. Below are images giving you ideas of where you could use these lines.

In this one I made the lines start at the collar and expand outwards, I used a 2px stroke for in Illustrator on these lines. Once in Photoshop I had mask out the part that covered the chin to make it look like it went behind the chin then added the usual blending.

I made these ones with a very thin stroke and tried to make them follow the hair.

These ones I made look like they were coming out of his jacket cuff by starting at about his elbow but then in Photoshop using a mask to hide the parts that went over the sleeve.

This last one was a bit different as I made it black, I had to make this go over the light parts of the image in order for it to be visible and also used a mask in Photoshop to give the appearance that it came from under the jacket.

Step 19

Select the brush tool and choose a 2px hard white brush. This last line I made in Photoshop by creating a simple path; shown below, with the pen tool. I made it so it looked like it was following the jacket.

Step 20

Right click on this path then select stroke path and make sure simulate pressure is checked, then hit OK.

Step 21

The image now looks quite nice but here I'll show you how I added some more details to bridge the gap between the foreground and the background. First create a new layer group above the background group then select the pen tool and in the main toolbar choose shape layers. I had my foreground color set at black here but it doesn't matter because we will be hiding it anyway. So draw a path the same as the one below then make sure this layer is within our new group. Everything else from now on should be created within this group.

Step 22

Now right click on this layer and select blending options. This technique I am showing you now is trying to recreate a technique that I learned from Nik Ainley and gives the effect of part of the image being punched out the rest and gives a bit of depth. So use the settings I have shown below. You will notice I've lowered the fill opacity to 0%; this will make only the layer styles show up and not the actual fill of the shape we created. I also checked 'layer mask hides effects', this just means that the styles will only follow the shape and not the mask and so will be hidden if we brush over it with black in the mask. I tend to almost always have this ticked as it is annoying when you add a style and it follows the mask.

Step 23

Here I've added more lines, still below the man, using exactly the same technique as we did before. Here are the ones I added:

Conclusion

I've kept this tutorial reasonably flexible so you should be able to adapt it to fit any subject or color scheme by just changing small parts. I hope here you have learned how to use layer masks effectively as I think they were used in almost every step. So just have fun with techniques I have shown you here and I hope you find something useful to do with them.

Change hair color

2009-12-16T03:00:00.000-08:00

n this tutorial you will learn how to change hair color in a few, simply steps:

It is recommended to beginners because it is a step by step tutorial.

We will use this photo :

First of all we must make the selection of the hair,to do that we will click on the Edit in quick mask mode:

Now select the brush tool:

Paint all the hair with the brush tool

Now click on the Edit in Standard mode to have our selection:

Right click on the mouse and choose Select inverse to have the selection of the hair:

Will need a copy of the layer so..right click on the mouse and choose Layer via Copy:

Will have 2 layers : the background layer and the hair layer.

Now make a new blue layer:

Press Ctrl and click on the image of the hair layer and you will have the hair selection:

Press right click on the mouse and choose Select Inverse:

Now click on the blue layer and press Delete

You will have this:

Change the mode of the layer into Hue:

We have some imperfections and will try to fix them:

Use Smudge Tool to repair the imperfections

This is the result..

Unusual Christmas Card

2009-12-16T02:55:00.000-08:00

Used images:
http://www.cgtextures.com/texview.php?id=24321&PHPSESSID=95e8e8290894cc5194898e16d1dddb4c http://www.cgtextures.com/texview.php?id=14285&PHPSESSID=95e8e8290894cc5194898e16d1dddb4c http://www.cgtextures.com/texview.php?id=23033&PHPSESSID=95e8e8290894cc5194898e16d1dddb4c http://www.sxc.hu/photo/1195369 http://www.sxc.hu/browse.phtml?f=view&id=1101045

Create Photoshop document 900*675 px.
Fill background layer with dark grey/light grey gradient.

Create top and bottom edges using Pen Tool and Convert Point tool. You may use this photo to make the same card silhouette.

Correct edges shape using Warp Transformation, draw attention to curves lines.
Create shade under bottom layer using the same way, but move left and right corners little bit down.
Apply Gaussian Blur Filter to the shade layer.

Apply Radial gradient for the top edge and Linear light grey/white gradient to the bottom edge.

Duplicate bottom edge, fill it with darker Linear Gradient. Cut out left and right corners, apply Gaussian Blur Filter.

Repeat the previous actions, but leave just selected area, it should be darker than previous layer.

In result, you should get something like this.

Load selection for the top edge.
Create a new layer.
Go to Edit > Stroke > Inside(1 px).
Play with layer Opacity.

Create a new layer,load selection for the both edges.
Fill selection with dark blue/ light grey gradient.
Apply Multiply Blending mode for this layer, Opacity about 60%.

Place ice surface image. Load selection for it.
Edit > Copy.
Create a new empty layer.

Go to Vanishing Point Filter.
Take Create Plane Tool and make the grid just like on the screen shot below.
Click Ctrl + V (paste copied image).

Grug image on a grid.
Click "Ok".

Apply Overlay Blending Mode to this layer.
Add Layer mask, fill it wit linear black and white gradient.

Place wood image into a new layer below card and shade.

Apply Vanishing Filter for wood just like in example with ice surface.

Add Layer mask to Wood layer. Fill it wit black and white gradient just like in the screen shot.

Merge background and Wood layers.
Apply Radial dark/transparent Gradient Overlay layer style effect to create layer.

Draw light soft spot between background and card layers.
Apply Soft Light Blending mode to it to create smooth lightning effect.

You should get something like on the screen shot below.

Create selected shape above background layer using Pan Tool.
Fill it wit black/transparent gradient, play with Opacity, apply Gaussian Blur Filter (around 3%)

Insert cloud image.
Separate it from background. You may found detailed tutorial, how to remove background here: http://alfoart.com/green_planet_3.html

Erase superfluous areas using soft Eraser Tool.

Now, Insert winter landscape image.
Apply Auto Levels and Auto Contrast.

Apply Distort transformation to image just like example below.
Select sky and erase selected area.
Process distant view using translucent Eraser Tool (Opacity about 20%) and Blur Tool, Strength around 15%.

Load selection for top and bottom edges, Invert selection and remove selected area.

Erase Right part of Landscape just like on the image below:

Add shades for snow using soft round brush.

Select center area of the landscape, Feather=40%. Copy selected area.
Paste it into a new layer.
Go to Image > Levels.

Apply Screen Blending Mode for this layer.

Duplicate landscape layer.
Go to Filter > Blur > Motion Blur (250, 90)

Erase whole blurred image except reflection.

Create a new layer, fill it wit black/transparent radial gradient. Apply Multiply Blending Mode, Opacity 20%.
Erase front area using soft brush.

Create new layer once again.
Load selection for whole card.
Fill selected area with any color, Fill 0% and apply gradient just like on the example below.

Insert Moon Image.
Cut out round area.
Apply Screen blending Mode to it and layer style effects.

Insert pencil image.
Cut out shade area, paste it into a new layer below and apply Multiply Blanding Mode.

Load selection for the pencil and process it top part wit white translucent soft brush in a new layer.

Duplicate white spot on the Pencil and apply Dissolve Blending Mode with Opacity 50% to duplicated layer.

Draw some glitters using brush from Assorted Brushes Set.

Create big white spot in a new layer, apply Dissolve Blending Mode, Opacity 6%.
Merge it with a new empty layer.

Apply Gaussian Blur Filter(1).

Create big white spot again.
Apply Dissolve Blending Mode, Opacity 6%.
Add layer Mask, fill it with Radial black and white gradient just like on the screen shot.

In final, merge all layers.
Click on Quick Mask Mode icon
Choose Gradient Tool. Fill work with Reflected black and white gradient.

Click on quick mask again, keep selection.
Go to Filter > Blur > Lens Blur.

And here is result. Click for larger view!

Draw a funny snowman in Illustrator

2009-12-16T02:52:00.000-08:00

Final Image Preview

Step 1

Create a new document, take the Ellipse Tool (L) and draw an ellipse, make it a little oblate.

Apply a three color gradient to it. (#5EBFD3 # B9E1EB #F7FCFD)

Select the pen tool (P) and draw a path as you see below, fill it with #F2F9FA

Select both paths and press Ctrl+G to group them.

Step 2

Select this group and by Alt-dragging make a copy of it, scale it down.

Now make another copy of this group and make it even smaller.

Step 3

Since we have the basic body shape we’ll be working on details now. Draw an ellipse again, this time a vertical one and fill it with linear gradient from #86C9D3 to #AADEE4 .

Now draw another, smaller ellipse, fill it with white, rotate it ccw and place it on the ellipse we’ve just drawn.

Use pen tool to draw the second highlight and also fill with white.

Select them main ellipse, press Ctrl+C and Ctrl+B to make a copy of it behind the original. Make it slightly bigger and fill with #23B5C5 .

Select all these paths, press Ctrl+G to group them together. Place this group on the middle part of our body, then make a copy of it, scale it down and also place on the middle part.

Step 4

Now we’ll draw a scarf for our snowman. For this, move the “head” or the top shape of snowman body up a little.

Draw an ellipse and place this sublayer between the middle body path and top body part sublayers.

Fill this path with a radial gradient from a darker red to red. Adjust then it’s position.

Use the pen tool to draw a path as you see here. Fill it with a bright red.

Make a copy of the ellipse by pressing Ctrl+C and Ctrl+F. Then draw a path as you see below that will intersect the first one.

With you scarf path copy and the intersecting path both selected press the Intersect button in the pathfinder panel. Give the resulting path a slightly darker shade of the red color, that’s the shadow on our scarf.

Take the pen tool and draw this path under the scarf.

Fill it with a linear gradient from #EEBA32 to #EED64E .

Make a copy of the penult scarf path and place it behind the snowman’s body. Fill it with a darker red color.

Draw another scarf end like you did before or edit the first one.

Step 5

Use pen tool to draw a hand, place it behind the middle body path and a reflected, bigger copy of it on that path.

Give them a 4pt 30% gray, rounded stroke.

Draw some other small lines and give them a 2pt stroke with the same settings.

Step 6

For the eye, draw an ellipse and fill it with a 90% gray to 70% gray gradient.

Draw two highlights on it.

Select the main shape and make a copy of it by pressing Ctrl+C and Ctrl+B. Make the copy a little bigger and fill it with #23B5C5 .

Group all these paths, place the eye on the head and make a slightly smaller copy of it.

Draw two light blue circles under the eyes.

Step 7

Use pen tool to draw a carrot and fill it with #CE4327 .

Make a copy of this shape, make it thinner and fill it with a white to transparent gradient.

Draw some small lines on the carrot to add detail to it.

Step 8

Use pen tool to draw a smile on snowman’s face. Give this line a 2pt 70% gray stroke.

Press Ctrl+C and Ctrl+B to make a copy of the smile and place it under the original one. Give this copy a white stroke instead, rotate it ccw a little.

Step 9

Last thing we need is a hat for our snowman. Draw an ellipse and fill it with a three color linear gradient (60% gray 9% gray and 60% gray ).

Make a copy of it by pressing Ctrl+C and Ctrl+B, make the copy a little bigger and fill it with 50% gray.

Draw a path as you see below a fill it with 90% gray to 70% gray gradient.

Place this path under the previous two hat paths we’ve made and make a copy of it.

Draw an ellipse that is intersecting the last path.

Select this path and the copy that you’ve made and press Intersect button in the pathfinder panel.

Draw an intersecting path with no fill that we’ll use to create highlights.

Make sure that you’ve made a copy of this path, because we need to make two highlights. Now use this path to create highlights on hat.

Group together all hat paths and place the hat on snowman’s head.

Draw a white to transparent highlight under the hat.

Give a background to your illustration and you’re done!

Final Result

Design an awesome Christmas tree in Photoshop

2009-12-16T02:51:00.000-08:00

This is my final result with a different background color

I will create a new document with the following size: 1000 x 1000 pixels
I will duplicate the background layer. To duplicate the layer you need to select the background layer, and then press on CTRL+J. On this new layer I will add a gradient. You can find over 27.000 Photoshop gradients in the following pack: Download Photoshop Gradients.

I will create a new layer above all layers ( press CTRL+SHIFT+ALT+N ) and with Brush Tool I will draw a dark area at the bottom of the image. I will use a smooth round brush.

I will change the opacity value for this layer to 50 %

I will use a set of custom star brushes. The set of brushes is included in the .zip file (you will be able to download it only if you are a VIP member )
Load the set of start brushes.

First you need to click on the small arrow, and then you need to choose Load brushes. Browse your computer until you find a .abr file ( with the start brushes ).
After you have the brushes in place you need to create a new layer ( press CTRL+SHIFT+ALT+N ) and with the second brush from this set draw some stars over the document

On top of your layer palette you can change the blending mode for this layer to Overlay, and in the same time it is very good if you reduce the opacity to 50 %

I will select Pen Tool and I will create a strange path. Try to make this path like a Christmas tree. It doesn’t have to be perfect.

Now comes the funny part. Create a new layer on top of all layers ( press on CTRL+SHIFT+ALT+N ). Select Brush Tool, and use the following settings.

Be sure you have the right layer selected, and this path, and after that press on the ” Stroke path with brush ” button from the bottom of the Paths panel.

From the previous image I am sure you will like the result even if you see only a small corner from our Christmas tree.. Here is a bigger version.

Select another brush from this set, and change the size of the brush between 100 and 200 pixels. Be sure you uncheck the Shape dynamics, and scattering check boxes. . On a new layer draw another stars with different sizes

On top of the Christmas tree add another star. This time use a bigger one.

I will select Pen Tool one more time and I will create another path

I will select Brush Tool, and I will choose another brush.( the name of the brush is Fuzzball ) You should have this brush already inside Adobe Photoshop.
I will use the following settings for the star brush.

One more time I will make sure I have the Path selected in my paths panel, and I will create a new layer. I will press on “Stroke path with brush ” button from the bottom of the paths panel.
This is my result

I will duplicate this layer several times and I will place it towards the top of the Christmas tree. In the same time I will modify the size of the layer ( press on CTRL + T ) and I will rotate the layer to the left.

If you want to enhance this Christmas background I recommend you to download the following sets of vector snowflakes
Download 42 vector snowflakes

This is my final result. I will show you different versions with different backgrounds.

Click on the following image to see the full size Christmas tree

Design a Clean Portfolio Website Layout in Photoshop

2009-12-16T02:48:00.000-08:00

First thing you should do is to set up the workspace.This is available for all your next layout designs.Open Photoshop and create a new file of 1300×1400px.

After,drag some guides at 150px and at 1100px,to have a centered layout.The layout will have 960 main pixels where we`ll be creating it.

Creating the Header

Now let`s design something here.Grab the rectangle tool and draw a rectangle with the height of 150px,with the #EDEDED color.Here will be the header.

After,using the same Rectangle Tool,draw another rectangle over the gray one,but give it a height of 80px and leave above it 70px.Colorize it in a dark color.I used #303030.

Now draw a rectangle of 960×90px and align it so that you`ll have 50px between it and the top.Give it the same black color used above.

I`m gonna show you now how to create for this button toolbar a nice and beautiful shadow.Duplicate this last layer and change its height from 90px to 70px then align it top with the original layer.In the image I changed the colors of the layers,to show you what you should obtain.

Ok!Now put the red layer under the white layer,change the white layer`s color to #303030 and for the red layer,give it the black color.

Now select the red layer,then go to Filter->Blur->Gaussian Blur , set a Radius of 6px and hit Ok.We`ve just obtained a nice shadow for our header.

For the layer named “white layer”,apply a smooth black gradient from top to bottom,like in the image.

Add some text in the top-left area of the project(Some buttons like Home,About or anything else).I gave them a white shadow of 90 degrees.

The logo I created myself using the Calibri font(font-size : 60px) and adding some blending options.

I added my tag near the logo:“Just enjoy it!” , using the same Calibri Font,but written Italic and with the size of 18px.

Now let`s create the buttons.Select the Rounded Rectangle Tool and draw a rectangle of 76×28px.

Now add some blending options:

Choosing Lucida Sans font and with a 16px font size and a white color type in the word “Home”.

Now create more buttons to finish the buttons toolbar.You may add a Contact button,or a Portfolio button or whatever you want.

Let`s add a little detail but with a strong effect:Let`s illuminate a little bit the logo.For this,choose the “White layer”,as we named it above and hit Ctrl+Click or Command+Click for Mac,to have the selection of the layer.Create another layer above it and with a big Soft Round Brush paint inside the selection with white just over the logo.You`ll obtain a beautiful light effect for the logo.

We`ve just finished the header.Now we`re gonna create the main content of the layout.

Designing the Main Content of the Layout

For the main content,we`re gonna design an area presenting your latest designs,or some features of your possible products.So,grab the Rectangle Tool and draw a big rectangle with the height of 400px,then add a sleek gray to white gradient overlay from top to bottom.

To make a better integration between the header and the main content,draw two lines,a black and a white one and put them one after another.This way,you`ll obtain a nice depth effect between those areas.

Download this Computer Icon and add it to our project.Put it in the right side of the project.Here will be your work`s images or product`s images.Resize the monitor a little bit to fits and integrates into the project.I made it smaller until reached 400×335px and then I had placed my own image inside.

Select the Type Tool(T) and write some content in the left side of the notebook.I used only Lucida Sans font,changing the font size depending on content.Also i used this Small Ok Icon for the “Features” list.

Now let`s create two buttons.Those buttons will be the main buttons of the layout.Grab the Rounded Rectangle Tool(U) ,set a Radius of 7px and draw a rectangle of 160×35px.

Then add the next blending options:

The button looks like this one:

Choose the button layer and hit Ctrl+Click (or Command+Click) for Mac on it to have the button selected in the canvas.(to reveal its selection).Now grab the Rectangular Marquee Tool(M),choose from the options “Intersect with selection” and select only the top-half of the button.You should have one half of the button selected now.

Grab the Paint Bucket Tool(G) and fill the selected area with white.Be sure to have another layer created above the button to paint in.Low the opacity to 8%.Write inside the button “Download” or any word you want.

Select again the button,by hitting Ctrl+Click on the layer.Create a new layer above the button,choose the Soft Round 200px Brush and paint inside the button`s selection with white.We do this to create a middle light effect inside the button.Is the same process used at the logo.

Duplicate the button and place the new button on the right side.

Now we want to create a small area under,for “more informations”.Grab the Rectangle tool and draw a gray rectangle(#EFEDEE) of 40 px.After,give it a stroke of 1px of #BBBBBB color.

Under the top stroke,draw a white line to create a beautiful effect.

Let`s add now under the PC monitor five small buttons for every slide of the slider,because this area is a big slider which rotates your products.So,grab the Elipse Tool(U) and drag 5 circles under computer.Hold Shift Key while you drag to make them perfectly round.

For the first one,set the next blending options:Inner Shadow and Color Overlay:

…and for the next four buttons,add those blending options:

Add some content in the left side of this rectangle,maybe some tags or more details about the product.

We want to design now another area for some general content,like “Who we are” or testimonials.For this,grab the rectangle tool and draw a rectangle of 1300×340px and give it a sleek gray to white gradient from top to bottom.Above the shape,add a 1px white line to integrate better with the entire design.

Now divide the shape in 3 pieces and inside the first two pieces add some text about you or what you do,and inside the last piece add a testimonials area.

That was all for the middle area.What have we done till now:

Designing the Footer:

Ok,we`re almost done here.We have to design the footer and the layout is finished.We`re gonna add some colored areas here,a portfolio area with your latest works and a social networks area displaying your latest tweet and more other buttons to your social networks.

What we want to create now is a small strip at the top of the footer,just to integrate a little bit more the footer with the rest of the layout.So,draw some stripes like in the image.

Now draw a big rectangle of 1300×420px under this stripe and add a gradient from black to dark gray,applying the settings from the next image:

If you followed the instructions correctly,you should obtained a footer like this one:

Now,choose a picture related to your work or product and add it to the layout but resize it until reaches 260×150px,then add it a 3px white inside stroke.

Now,duplicate the photo layer and make it black by adding Color Overlay Blending option.Then go to Edit->Transform->Warp and warp it until looks like this picture.

Now go to Filter-Blur->Gaussian Blur and give it a blur with a radius of 3px.Then reduce the layer`s opacity to 60px and put the layer under the original image layer.

We`ve just obtained a beautiful shadow effect for the image.I want to add another detail for this thumbnail.I want to add a frame.For this,make a selection around the thumbnail using the Rectangular Marquee Tool.Then grab the Gradient Tool(G),set a gray to white Foreground to transparent Gradient and paint with the gradient from top to bottom inside the selection.

This is what you should obtain:

Reduce a little bit the opacity of the layer and put it under the image layer.

We`ve just obtained a beautiful stylized thumbnail.

Add two more thumbnails to the layer and apply the same steps for them.

Under the thumbnails,create a shape with rounded corners of 520×75px using the Rounded Rectangle Tool(U) with a Radius of 20px.

Then add those blending options:

We`ve just obtained a depth effect for this shape.

Download this Twitter Icon from ProductiveDreams.com and add it next to the rounded shape.

Now add some text,imitating the tweets from Twitter.

Now,download those Social Icons from WebToolKit4.me and put them in the right side of the footer.

To finish the layout,add some copyright details regarding the layout,because a website is not a website if it hasn`t copyright details.

You can view the final image preview below.Click on it for a larger preview.

We have just finished our Portfolio Layout.I hope you learn something from this Photoshop Tutorial,and if you like it,don`t hesitate to spread the word!See you next time for another photoshop tutorial.

You may follow me on twitter or subscribe to my RSS Feed,or if you wanna receive more Freebies and news from OurTuts,just become a part of our community by just entering your name and E-mail in the for below.I promise that you won`t regret!

Create your own vintage photoshop brushes

2009-12-16T02:44:00.000-08:00

If you have ever worked with Photoshop, you’ve probably used Photoshop brushes. But do you want to learn to make some great brushes by yourself? In this tutorial I’ll teach you how to create your own brushes from photographs or pictures, how to create brush sets and share them with others.

For example, let’s make an ornamental brush from a decoration in a book.

1. First, I took a picture of the page with an ornament. Here is how it looks, resized and cropped:

2. Now we’re gonna edit the image so that it can be a brush. We need black ornament on white background.
Create a new Curves adjustment layer and change the curve into an S-shape to add contrast to the image:

3. However, there are some extra shadows on the image that need to be removed. I selected Dodge Tool and set its parameters to: Size: 300 (this depends on the size of your image), Range: Midtones, Opacity: 50%. Then I painted on the areas that needed to be lightened. This adjustment won’t affect the ornament, but will lighten the background so it becomes almost white:

Here is the result after some experiments with Dodge Tool.

4. Now desaturate the image, because we won’t need the colors anyway. And we can see the image that will become the final result. Select a new adjustment layer with Hue and Saturation, and set the Saturation to its minimal point. I got this:

5. As the brush should not have artifacts from the photo, we will add more contrast to it and check the picture once again. Select a new adjustment layer with Selective Color, choose Blacks in the drop menu and drag the slider of Blacks to increase the value until we’re satisfied with the result:

Make last corrections with Eraser, paint with small black brush if there are unnecessary white spots on the image, or add some sharpness with Unsharp Mask filter if necessary.

6. Let’s create a brush preset. Select the image with Select -> All, then click Edit-> Define Brush Preset and input the name of your preset, for example, “Ornament 1″:

7. The brush is ready. Let’s create an ABR file that you can use later and share with others. Select Brush Tool, open the brush presets window and in the menu on the right (that can be seen by clicking the small arrow) choose Preset Manager. In Preset Manager window, choose the thumbnail of your new brush (hold Ctrl to select multiple brush presets) and click Save set. Choose the destination folder for your brushes and… you’re ready! Congrats!

How to Create a Colorful Photo Manipulation in Photoshop

2009-12-16T02:43:00.000-08:00

Final Image Preview

Create a new document (Ctrl+N) in Adobe Photoshop with the size 1920px by 1200px (RGB color mode) at a resolution of 72 pixels/inch. Select then the Paint Bucket Tool (G) to fill the new background layer with #EBF4F3 color.

Then choose the Rectangle Tool (U) to draw a rectangle, like the next one:

Set Fill to 0% for this layer in Layers panel:

Select Add a layer style from bottom part of the Layers panel and click to Gradient Overlay:

Click in the color bar to open the Gradient Editor and set the color stops as shown. Click OK to close the Gradient Editor dialog box.

We’ve got the next floor:

Find a stock photo with a model represented on it, I used this photo from deviantart. I would like to thank the author of this photo:

Remove the background using your favorite tools like Pen Tool (P), Magic Wand Tool (W), Magnetic Lasso (L) or even a simple Filter>Extract. Make a copy of this layer (Ctrl+J), click the visibility button on this copy, we’ll need this layer later:

Click on the bottom part of the Layers’ panel on the next icon Create new fill or adjustment layer and select Levels to make some color corrections

Raise the contrast of the picture:

Put the mouse cursor between the layers and hold on the Alt button while clicking on the left button. The top layer will be transformed into a mask:

Next we’ll add another adjustment layer. Click on the bottom part of the Layers’ panel on the Create new fill or adjustment layer and select Hue/Saturation:

Reduce the color saturation:

Transform it into a mask too. Click on this layer on the Layers’ panel, select the mask and using a brush from the Brush Tool (B) of black color paint the opened zones (skin) on the girl’s body:

Add another adjustment layer. Click on the bottom part of the Layers’ panel on the Create new fill or adjustment layer and select Curves:

Set the options for raising the contrast. Paint the body’s zones in the mask too and a little on the girl’s clothes, only on those places with a high contrast.

This is the result we should get:

Make the girl’s reflection on the floor. Let’s activate the copy of the girl’s layer and turn it around, applying Free Transform (Ctrl+T). Choose the Eraser Tool (E) to erase the same places demonstrated below:

Then select a Soft Round brush of black color with the Opacity of 20% and represent a shadow on a new layer:

The brush’s settings:

Create a new layer, representing here the shadow around the girl. Choose the same options applied before for the Soft Round brush, but enlarge the brush’s size, using the button ].

Create a new layer select a Soft Round brush and insert here a spot of the color #6DCFF6. Opacity - 20%.

Create a new file with the size 500px by 500px (RGB color mode) at a resolution of 72 pixels/inch. Select the Soft Round brush of black color and set the next shown options for it:

Let’s put a brushstroke, like the next one:

Then choose Filter>Pixelate>Color halftone and set the next demonstrated settings:

It’s the result we’ll get on this stage:

Select this layer and place it on a new layer on our basic document, changing the Blending Mode to Darker Color and set Fill to 40%.

Learn How to Draw Hand-crafted Pixel Art in Photoshop

2009-12-16T02:42:00.000-08:00

Okay, Let's Set Up a Page

First open the preferences in Photoshop and set the Image interpolation to "Nearest Neighbor."
Create a new Page 300 px by 300 px at 72 dpi.
Select the Pencil tool at 1 pixel. The Pencil and Eraser tools are the only tools you will really need.
Occasionally you might use the magic wand to select an area to fill, just make sure Anti Alias is off.

If you did use the brush tool at a whopping 9 pixels instead of 1, you'll get anti-aliasing occurring and that will spoil the hard-edge pixel effect. So stick to 1 pixel. "Keep it lean keep it mean," as my Mother used to say.

When your pixel drawing is viewed at 100% (actual size) the pencil tool at 1 pixel wide is very small, so you might find it hard to see and manipulate. An idea is to enlarge the view to 800% so you can see what you are doing. I often have a 2nd window open in Photoshop with the same screen view at 200% so I can quickly see how my drawing looks up close and also from a little further away at the same time.

We can save our working doc as a PSD file and export for web use later as a GIF file. We can also enlarge the file afterwards and turn into a TIF for CMYK printing.

Lean & Mean

Let's Start Drawing

OK let's have a go at drawing something like this open book. With the Pen tool draw around the edge to create your black outline. Then fill in the flat colors of the page and book mark.

Create the idea of text on the page with some single pixel lines. See how we put a slight kink in the line to give the impression of a slight curve on the page.

Lastly add some highlights down the middle of the pages and side of the bookmark. A nice little touch is a single pixel highlight at the bottom outside corner of each page, it just gives a hint of a page edge instead of being a solid block.

Once you've got the basics of outlines, colors, highlights and shading, you can try your hand at building other simple shapes.

Angled Pixel Lines

Pixel icons like the ones above can be designed as a series of lines that are just 90º to each other and are very much squares and rectangles. Occasionally though, you might need a line at an angle.

Something to bear in mind is angled lines look best when they are a regular pattern. If they are irregular (like those shown below), they can appear lumpy and crude when viewed small. The second example below is much smoother Isometric angles, which look great with pixel drawings, but it's not the 30º "iso" angle you used in Technical drawing class — it's actually something closer to 26.5º. 30º unfortunately gives a lumpy line at 100%. If you make a line that regularly runs 2 points over and 1 point up, you'll get 26.5º. Shall we try drawing something else that's a little more Geometric and uses more of those line patterns?

The irregular line will look lumpy at 100%.

Smooth line patterns at different angles.

Let's Draw a Pixel Log

The lines down the length are easy we know how to do those now, but how about those round ends?

These two are regular patterns but are changing from wide horizontal lines down to squares and then to vertical lines. It does look a little jagged but if you blur your eyes it does look correct!

The curve on the top-right of the log end is also the reverse pattern of the bottom-left section. I often count the pixels or remember certain combinations. The pixel combo on the circle is...

3 squares (across)
2
111
222(down)
6
2
1

A little tricky to get the hang of at first like using bezier curves in Illustrator but you soon get a "feel" for it. The length of the log is easy: we just use the 2 along 1 up system and make the log as long or short as we want.

Smaller concentric circles on the end give a nice ring pattern and some areas of darker shading at the bottom of the log give it some depth. We'll give the log a flat fir color to start, then to create depth, we can create dithering by placing pixels of contrasting color either side of our high light/low light lines.

You can build up the patterns and make them more complex. Careful though — the more realistic and tricky you try and get the fuzzier the image may appear if it's destined to reproduce at small size.

I did throw in a few more random pixels on log #3 as I wanted it to have a rough look and contrast a little with the squirrel.

For the final log I worked in an area of stripped bark and a small branch. I found it best to complete one area or style first and then work more detail into it. I don't think I could have drawn the stripped bark log with dithering pattern from scratch — instead, I just kept adding layers over top of layers. Simple stages work best!

Irregular Pixel Drawing

Let's move onto something a little more irregular, like a Squirrel to sit on our log. For something complicated like this, it's best to start out with pencil and paper.

First I drew an isometric square on my page to get the right dimensions. Since we're using this particular example for editorial purposes, I used a photograph for reference. Remember that if you're planning to upload anything to iStockphoto, you need to include any reference material that you used. Then I start to sketch. I pay particular attention to the angle on both ears and feet as I want them to follow the isometric lines.

As you can see the detail is very minimal — I just want to get the basic shape and correct angles worked out first. We'll do the rest of the work in Photoshop.

Bring in the sketch, put on a new layer and ghost the opacity so you can see the pixels you are about to create clearly. It's not a hard and fast rule but I find pixel drawings look best when they have black outlines.

Here I am going around my Squirrel with the pencil tool creating the black outline. One thing to be avoided is clumping up where outline pixels touch each other on more than one side. If you draw an extra square just delete it with your eraser tool (also kept at 1 pixel width, see the red circle ) it will look neater and your audience will thank you for it.

It still looks a little messy but it will shape up! Keylines inside the illustration also help to give it a bold look, just make sure they are a darkish color that isn't black to make some contrast. Call me a radical but I went with brown on this one.

When the shape is complete fill the inner area with a nice mid tone color (soft brown) and maybe use a light color to bring out some highlights.

The black outline rule is not a hard and fast one, I did leave some black keylines below the front jaw and paw as it was getting hard to see what was going on.

Conclusion

The hand placing, removing, changing of pixels is where the skill comes in. Sometimes. But once you start to get the hang of it, you'll be able to draw just about anything — all you need is some patience. Hope this helps, and inspires you to create great work of your own!

Create a Bloody Swordfight to the Death

2009-12-16T02:40:00.000-08:00

In this Photoshop exercise we’re going to channel Ninja Assassin and Kill Bill to create this dramatic swordfight to the death.

Here is a great image of a Japanese shoji door that we can manipulate to use for our fight scene.

I went though some stock photos and one of the best images I found were of these two women that obviously mean business. Use your favorite method to cut them out. I used the Polygonal Lasso Tool as I often do.

Once they’re cut out, double click their layer to open up the Layer Style window. Choose Color Overlay and pick black to make them a solid silhouette.

Place the shoji doors in front of the figures and set the Blending Mode to Multiply in the Layers panel. This will reveal the figures behind it.

On a new layer above the doors fill the canvas with a solid orange. I used the hex color #FF9118. Set this layer’s blend mode to Color Burn and set the Opacity to 75%. This should give the scene a nice fiery hue.

Now we’re going to fuzz the edges of the figures to emulate the look of a silhouette through a partly opaque screen door. Go to the figures and navigate to the top menu and choose Filter>Blur>Gaussian Blur with the following settings.

I used the the brush set from my other tutorial to create some dramatic blood spatters across the doors.

Activate the doors layer by clicking it and Press Ctrl+L to bring up the Levels editor. I pulled the center level marker to the left to the following settings to have the figures and splatters punch up a bit more.

Dirty Design: Create a Grungy Thriller Book Cover

2009-12-16T02:37:00.001-08:00

Step 1 - Setting Up Your .PSD file

A book cover, in most cases (unless it's an eBook) is going to go to press, which means we have to set it up correctly. There are hundreds of different book sizes, but a few that are commonly used for fiction books. One of them is 108x177mm (front cover only). Spines change width obviously depending on the length of the book, but in this case we're going to use 26mm, giving us a total dimension of 243x180mm including a 3mm bleed.

If you're setting up your document for a real book cover, whatever you do, do not guess the width of the spine! There's a simple formula which can determine that width for you: you have to take the number of pages and divide that number by your text papers PPI (Pages Per Inch), which all depends on the weight (GSM) of your paper. You should be able to get that from your quote sheet, or ask your printers for it! You can use this awesome spine width calculator if you can't be bothered to work it out yourself!

Head over to Photoshop and set up a new document; make sure your width is set to 243mm and your height is set to 180mm. Make the resolution 300 pixels/inch and set the color mode to CMYK. Hit OK!

Make sure your rulers are showing by going to View > Rulers, or press Command + R. A lot of people don't use rulers very much, but they can come in very handy for dragging out guides later on in the project. Go to View > New Guide... and with Horizontal selected insert 3mm into the Position box. Do the same again, this time inserting 177mm into the position box. Repeat the process using measurements 3mm and 240mm, this time with the Vertical checkbox ticked. That's our 3mm bleed added to the document - our design will go right up to the edge of the document, but for those that don't know, when the document goes to print, 3mm from each side of the document will be chopped off.

This means the printers can assure you that there will be no white gaps on any of your documents so long as you set up the file correctly. Also, with any print project, not just this one, always keep your text at least a few millimeters away from the bleed guide, this is just to be on the safe side incase a few of your prints aren't aligned correctly when being cut down to size. You might find it easier to create another set of guides for this, or you can do what I do and use your eyes as a guide.

It's time to add some guides for our spine. Go to View > New Guide... and with the Vertical checkbox ticked, insert 108mm and hit OK. Repeat the last step using the measurement 134mm. Remember we're working in millimeters, not centimeters or pixels. You should now have a nicely aligned .PSD document. Always remember to save your documents regularly!

Step 2 - Choosing a Color Scheme and Adding Some Initial Background Texture

Crime, Horror and Thriller books are often associated with grungy covers, which means this tutorial is going to use a huge handful of textures, blending modes and brushes.

I'm going to go with a blood red color scheme mixed with some warm browns, dark oranges and a pure white which will be used for the majority of the typography in our design - what color scheme you choose is entirely up to you, I suggest you play around with your design for as long as you have and see what you can come up with; after all that is the best way to learn and pick up new techniques.

Select a warm blood red/orange (#db2900) and using the Paint Bucket Tool fill your background layer. We're going to add some texture to our design straight away. Make a new layer and fill it with white. Go to Filter > Noise > Add Noise... In the new window, insert 100% into the Amount field, and make sure Gaussian and Monochromatic are both selected. Hit OK.

With the new layer still selected, drag it down to the New Layer symbol at the bottom of the palette - this will duplicate the layer. Repeat the step again. Set all three layers to Overlay and using a large, soft Eraser, get rid of some of the areas on each layer. Name each layer sensibly so you can find them later; I named mine "Noise 1", "Noise 2" and "Noise 3."

Already our cover is looking quite grungy, and so far we've only used one built in Photoshop Filter! Head over to Textur.es and download this lovely grunge texture. Insert the texture into your document by going to File > Place. Rotate it so the grungier side of the texture is on your front cover, and upscale it to the same size as your document. The easiest way to do this is by going to Edit > Free Transform or by pressing Command + T and then dragging the corners of the texture out whilst holding the Shift Key to keep everything in proportion.

Change the textures layer to Overlay, and change the layer name to "Texture 1." Drag the layer down to the New Layer icon at the bottom of the palette to duplicate the layer. Rotate it by 90 degrees, and align it next to the spine (this should be easy if you have Snap to Guides selected - if not, go to View > Snap To > Guides). Grab the same soft Eraser we had a minute ago and erase a few areas of our duplicated layer. Rename the layer to "Texture 2."

The joy of using textures in your work is that you can create a stunning piece of work with a very minimal amount of time, effort and resources. One texture can go a long, long way.

I've just realized our whole design is turning a little bit orange - not so much that blood red I was hoping for! The overlays on the Noise layers seem to have lightened our red up so much that it's turned to orange. To fix this, make a new layer above our original background and fill it with a dark red/brown (#5c0000). Rename the layer to Background 2 and drop the Opacity to 60%.

Step 3 - Making Different Areas Look Different

When it comes to books, there are three different areas. The front covers main purpose is to advertise the book - it needs to stand out. The spine is to make the book easy to find on a shelf full of others. The back cover is to present a blurb - meaning it should be easy to read. So far, our front, spine and back look virtually the same. We need to fix that!

Duplicate your layer "Texture 2" and select the Paint Bucket Tool. With the same dark red/brown we selected earlier, click somewhere on your duplicated layer to fill some areas. Rename the layer to "Texture Blobs" or something of your own choice. Your image should currently look like something below.

Select a large, soft Eraser, and erase out some of the inner areas of your "Texture Blobs" layer. Change the Blending Mode to Multiply, and lower the opacity to something you think is suitable for your piece; I used 20%. This should give us a dark, grungy front cover that fades into the background as it reaches the center of the page, which is where we will be featuring an object.

Make a New Layer and name it "Front Border." We'll be making some more darker areas where, later on, we will be presenting some text with a Spot UV overlay. Select the Rectangular Marquee Tool and select the front of your cover up to the spine.

Select a large, soft brush and change your color to a dark grey or black. In your marquee selection, paint a dark area at the top and bottom of your front cover - you could even paint a very small streak of black up the sides of your cover. Use the Eraser with a soft brush to thin out any areas you felt you applied too thick.

Change the Opacity of the layer to about 25%. Repeat the last two instructions again, this time making the border even thinner - remember to make a new layer! Name it "Front Border 2." I also used a different color - a dark red/brown (#6f2009).

You should have more subtle grunge area at the top and bottom of your front cover now, which is suitable to present some nice typography later on in the tutorial.

Now we're going to work on the spine of our book cover. The spine should be very subtle and easy to read, especially as we don't have too much space to work with. Make a New Layer and name it "Spine Background." Select the Rectangular Marquee Tool and select the spine - this should be relatively easy because, with Snap to Guides selected, it should automatically connect with our spine guides. Grab a soft brush and using the same color we used in the last instruction, paint the bottom and top of your spine, leaving a small area in the middle. Lower the Opacity to 70% just so a little grunge shows through!

With the front cover and spine virtually complete (we will probably add a little more background texture later on!), it's time to move on to the back cover. The back cover will have a lot of text and important information on it, so it's important we don't show too much texture and keep it pretty plain. We will need to display: a blurb, a couple of one-line reviews, a price, a barcode, an ISBN number and maybe an authors web address and a designers web address.

This step is pretty much the same as the last few: make a new layer and name it "Back Cover Background." With the Rectangular Marquee Tool, select the back cover. Select the Brush Tool and choose a large, soft brush - again using the same color we used in the previous step. Brush over the back cover, leaving a small, low opacity area in the middle.

Lower the opacity of the layer to 85% and then make another New Layer called "Back Cover Background 2." Lower the size of your brush a little (I lowered mine to 1000px) and choose pure black as your color. Repeat the same step as before, this time not going as far into the center of the back cover as we did previously. Change the layers Blending Mode to Overlay and drop the Opacity to 50%.

With your marquee selection still active, fill it with pure black on a new layer named "Back Cover Black Overlay." Lower the opacity to 15%. This just takes a little color out of our back cover which will make it easier to present readable text.

Our back cover, compared to our spine, seems a little dark. To fix this we're going to make our spine a little darker. Reselect the spine with the Rectangular Marquee Tool. Make a New Layer and name it "Spine Dark Background." With the same brush as we used in the previous instruction, brush over the left half of the spine using a color from the back cover (use the Eyedropper Tool to select a color). You should have something look similar to the screenshot below:

Lower the Opacity of the new layer to 70% - you're spine should now merge in a little more between the back and front covers.

Step 4 - Organizing Our Document!

I often take a few minutes throughout a project to tidy up my mess - it doesn't take long when we've been renaming our layers throughout the length of the tutorial, but now we have a total of 16 layers it's time to put them into some folders.

Make a total of four new folders by clicking on the New Group icon at the bottom of the layers palette. Rename them to: "Main Background," "Front Cover Background," "Spine Background" and "Back Cover Background." Move all the related layers into the appropriate groups.

This was a bit of a short step, but plays a vital part in keep our document organized. If you're not to sure what you're doing when it comes to pre-press and you send in a Photoshop document, having a well-named layered and grouped document really helps out and ultimately means the turnaround time for your print job will probably be quicker - we all win!

Step 5 - The Typography

It's time to add some typography! As this project isn't actually for a real book cover, I'm going to make some names up. I'm going to use my name, "Callum Chapman" as the author, "BOOK COVER TUTS+" as the book title, "A Tuts+ Print Tutorial" as a mini description of the book, and a section of text from Tuts+ about page as the blurb. On top of all this, I'll be making up some mini one-line reviews by several made up magazines/newspapers.

Select the Type Tool and drag a text box over your front cover. Type in your authors name, in my case I used "CALLUM CHAPMAN." I used two separate lines for "CALLUM" and "CHAPMAN." Select your text and change to a suitable font - I'm going to use Myriad Pro for the majority of text on my cover as it has a lot of styles such as condensed, semibold, oblique, bold, and a combination of them all together. When designing for print, try to stay clear from Faux Bold and Italic as in the end they don't always come out as great as they could.

Change the size of the authors first name to 45pt and the size of the authors surname to 60pt - this is the time to make sure your text box is lined up with the bleed on the right-hand side of the document and the right side of your spine. Open up the Character Palette by going to Window > Character. From here we can change the leading and tracking, which is always important when it comes to typography - never bypass it! Change the Leading to 55pt - this will bring your authors surname closer to the bottom of your authors first name, but not too close! If you've used a different typeface or size to me, you might need to play round with these settings as they differ depending on the font and size used.

With your text layer still selected, open up the Blending Options by going to Layer > Layer Style > Blending Options. Alternatively you could Alt-Click on the Text Layer and select Blending Options from the menu.

We want to add various styles to make our text really pop out from the cover. We'll be using the following styles: Drop Shadow, Inner Shadow, Bevel and Emboss and Stroke. The screenshots below show the different settings I used for each individual style:

Create a new layer beneath our authors name and call it "Author Shadow." Grab the Brush Tool, and with a medium-sized soft brush, paint a black shadowed beneath the authors name.

Change the layers Blending Mode to Saturation, this will turn everything below it to greyscale. Lower the layers Opacity to 40%. The point of this step is to just make it that little bit easier to read, and makes the text pop out even more!

Repeat the previous steps to add a book title. I'm using the following text in the same text area on separate lines: "A Tuts+ Print Tutorial" and "BOOK COVER TUTS+."

With your mini description selected, change the size of the font to 15pt. Select your mini description and book title together and change the Leading in the Character Palette to 30pt. Select your mini description and change the color to an off-white/red - I used #ffdada.

Make a new layer beneath your book title layer, and using the same technique we used earlier, brush in a black shadowed area with a small, soft brush. Remember to rename your layer - I called mine "Title Shadow."

Go to Filter > Blur > Motion Blur. Change the Angle to 90 and the distance to 250. To preview the different Distances before applying the blur, make sure the preview box is checked. Hit OK to apply the blur to our shadow.

Go to Filter > Noise > Add Noise. Change the Amount to 25, the Distribution to Gaussian and make sure Monochromatic is unchecked. Hit OK.

Change the layers Blending Mode to Overlay and its Opacity to 60%.

Using similar styles and fonts, add a few short reviews beneath the book title. I'm going to use "'A top-notch book!' - PSD Times" and "'Fantastically gripping!' - Vector Mag." I'm going to use Bold Condensed Myriad Pro for the review, and Condensed Myriad Pro for the reviewers name.

Step 6: The Back Cover

It's time for the Blurb on the back page. Head over to the Envato homepage and copy the brief introduction to the Tuts+ Network. Select the Text Tool in your Book Cover document and make a new text box on the back cover; make sure it's center! Paste the introduction in to the text box. Back over at Envato, copy and paste the information under the 'About Envato' heading, head back to your document and paste this in, too. At the top of your text box, insert a line that will be used as an opening sentence. I'm going to use: 'You’re about to learn how to make your very own book cover!'

It's time to style up our back page! We want our opening line to stand out from the rest of the blurb. To do this, I'm going to use the same color we used for the mini description above the book title we used on the front cover (#ffdada). Make the selection bold and change the font size to 15pt.

I'm pretty happy with how the blurb is looking already! Change your main two paragraphs font size to 12pt. The only problem we now have is some words are being separated and split in to two using a '-' symbol. To fix this, hit enter to send the word to the next line - repeat this step until there are no more unwanted hyphens.

Make sure the top of your blurb is lined up with the top of the authors name on the front page. To do this, drag a new guide down from the ruler and line it up with the top of the authors name. If they aren't lined up, use the cursor keys on your keyboard to nudge your blurb up or down until they are aligned correctly.

Add a couple more reviews on our back cover. The easiest and quickest way to do this is to duplicate the two reviews from earlier and rearrange the new layers on the back cover beneath our blurb. With the Text Tool selected, click on the text and change the words to something different. To make sure the two reviews are centered your can drag the text box out to the very edge of our guidelines, like I have done below:

Our book cover is starting to look like a real book cover! It's time to add some information the shops are going to require, such as a barcode, a ISBN number, a price and some other information. Unfortunately, barcodes can't be read by scanners on busy backgrounds, so we're going to have to use a white block. Select the Rectangular Marquee Tool and make a selection beneath our two reviews. With the Paint Bucket Tool, fill the selection with white on a new layer called "ISBN Background."

Reselect the Rectangular Marquee Tool and highlight a area at the bottom of our white ISBN background. Fill the selection with the off-white color we have been using throughout the tutorial.

Grab the Text Tool and rough out some text. I'm going to use: "USD 9.99," "GBP 5.99" and "EU 6.99," "Cover Design by Callum Chapman," "Be sure to visit PSDTuts+ website at http://psd.tutsplus.com/," and "ISBN 000-0-0000-0000-0." Style your text - you know what to do! Make sure you use pure black, though! Instead of finding an actual barcode, just use the Rectangular Marquee Tool to produce a rectangle to use as a placeholder.

Step 7: Adding Some Interest with a Stock Photo

We've got two things left: The spine, and an image on the front cover. We're going to leave the spine until the last minute - we'll simply be duplicating, resizing and rearranging some items from the front cover to produce our spines content. Head over to sxc.hu and download this great free stock photo of an old ammo box. Once you've downloaded the stock photo, place it into your document twice.

Grab the Magic Wand Tool and click on the white areas of both images - hit the delete key to remove the background. If you find the Magic Wand Tool is selecting areas of the stock photo that you don't want to remove, try lowering the Tolerance in the Magic Wand Tools options at the top of the screen.

Rename your two layers to "Ammo Box 1" and "Ammo Box 2." With "Ammo Box 1" selected, go to Edit > Free Transform or press Command+T to resize the photo. Whilst holding the shift key, drag the image right out of proportion.

Change the Blending Mode of the layer to Overlay, and using the Eraser remove some of the outer areas of the image - for example the part that is overlapping the spine.

Go to Edit > Free Transform or press Command + T on the "Ammo Box 2" layer and scale it up a little - don't worry if it's a little pixelated - we're going for a grunge look and pixelation all adds to it! Change the layers Blending Mode to Hard Light. Duplicate the layer twice: Lower the first ones Opacity to 30%, and the second ones Opacity to 20%. With the second duplicated ammo box still selected, hit the Shift + Cursor Down key to move the selection down - move it a little to the right and rotate it by going to Edit > Free Transform or by pressing Command + T and dragging the corners round.

Step 8: The Spine

That's our front cover complete! We now have to move onto the spine. Locate your authors name layer and your book titles layer - select them both and drag them down to the 'Create New Layer' icon at the bottom of the Layers Palette to duplicate them. Rearrange your two layers so that they're at the top of the Layers Palette. Arrange them so that they're sitting next to each other, as seen in the screenshot below:

With the authors name layer selected, go to Edit > Free Transform or press Command + T and scale the selection down whilst holding the Shift Key to keep it in proportion. Rotate the selection whilst still in Transform Mode and arrange it neatly into the spine.

Repeat the previous instruction again with your book title layer. Once the text is on it's side, grab the Text Tool and edit it. Delete the mini description, and spread "Book Cover Tuts+" across two lines by pressing the enter key to send any words after it onto a new line. Line the new text up with the author name.

Hopefully you've taken my advice and have already put our stock photo layers into a group. If not, do that now! Once that has been done, duplicate the group, go to Edit > Free Transform or hit Command + T, resize to a suitable size and rotate the selection round. Rearrange the image so it nicely fits in the center of the spine.

That's it, we're all done! If you're following this tutorial for a real project, you will need to replace your barcode placeholder with a real barcode, as well as setting the file up ready for print - all printers require different settings, so it's always best to speak to them first!

Dirty Design: Create a Grungy Thriller Book Cover

2009-12-16T02:37:00.000-08:00

Step 1 - Setting Up Your .PSD file

Head over to Photoshop and set up a new document; make sure your width is set to 243mm and your height is set to 180mm. Make the resolution 300 pixels/inch and set the color mode to CMYK. Hit OK!

Step 2 - Choosing a Color Scheme and Adding Some Initial Background Texture

Crime, Horror and Thriller books are often associated with grungy covers, which means this tutorial is going to use a huge handful of textures, blending modes and brushes.

The joy of using textures in your work is that you can create a stunning piece of work with a very minimal amount of time, effort and resources. One texture can go a long, long way.

Step 3 - Making Different Areas Look Different

You should have more subtle grunge area at the top and bottom of your front cover now, which is suitable to present some nice typography later on in the tutorial.

Lower the Opacity of the new layer to 70% - you're spine should now merge in a little more between the back and front covers.

Step 4 - Organizing Our Document!

Step 5 - The Typography

Create a new layer beneath our authors name and call it "Author Shadow." Grab the Brush Tool, and with a medium-sized soft brush, paint a black shadowed beneath the authors name.

Repeat the previous steps to add a book title. I'm using the following text in the same text area on separate lines: "A Tuts+ Print Tutorial" and "BOOK COVER TUTS+."

Go to Filter > Noise > Add Noise. Change the Amount to 25, the Distribution to Gaussian and make sure Monochromatic is unchecked. Hit OK.

Change the layers Blending Mode to Overlay and its Opacity to 60%.

Step 6: The Back Cover

Reselect the Rectangular Marquee Tool and highlight a area at the bottom of our white ISBN background. Fill the selection with the off-white color we have been using throughout the tutorial.

Step 7: Adding Some Interest with a Stock Photo

Change the Blending Mode of the layer to Overlay, and using the Eraser remove some of the outer areas of the image - for example the part that is overlapping the spine.

Step 8: The Spine

How to Create a Magician’s Hat in Photoshop

2009-12-16T02:36:00.000-08:00

Step 1

Create a 450 px by 450 px document with a white or transparent background. Drag out two guides at the center of the document (for your own convenience). Now use the Pen Tool to make a shape like the one shown below.

Name this layer as "body." Make sure you place this layer and all layers constituting the hat in a single layer-set (call it "Hat").

While creating an irregular shape like the one above, it's hard to keep symmetry on both sides. The easier way is to create half of the shape first.

Now grab the Path Selection Tool (A) and click on the shape. Press Command + C to copy the path and then press Command + V to paste it on the same shape layer. The copied path will be selected spontaneously.

With the Path Selection Tool (A) still selected, go to Edit > Transform > Flip Horizontal and move the path rightward until you get the required shape. Click and drag a selection to select the two paths simultaneously then click the Combine button located in the Options bar.

Step 2

You can now add some reflections to the "body" layer. To do so, duplicate the "body" layer (Command + J) and reduce it's fill to 0%. Go to it's Layer Style and give it a Gradient Overlay.

When you're done with the settings, don't click OK. Before doing so, move the gradient leftward so that you have something like that shown below.

Step 3

With the duplicate "body" layer selected, go to Layer > Add Layer Mask > Reveal All. Grab the Gradient Tool (G) and drag a black to white gradient as directed.

Step 4

Duplicate the "reflection" layer and go to its Layer Style. Move the Gradient leftwards while applying the following changes.

Step 5

It's time to add a shiny band on the hat. Create a shape of any color using the Pen Tool.

The band should not be flowing outside the hat's body. Command-click on the "body" layer and go to Select > Modify > Expand, type 1px and click OK. With the "band" layer selected, click the Add Layer Mask button.

Step 6

Give the "band" layer the layer styles shown below. Move the gradient rightward before closing the Layer Style window.

Step 7

Duplicate the "band" layer and remove all its layer styles except the Gradient Overlay. Reduce its fill to 0% and make the following changes to the Layer Style. Note that this gradient is placed leftward.

Step 8

It's time to make the top part of the hat. Use the Ellipse Tool (U) to make an ellipse like the one shown below and name it "top."

Give it these Layer Styles.

Step 9

Duplicate the "top" layer and place the duplicate layer below the "top" layer in the layers palette. Move the duplicate layer 7px down then give it these Layer Styles.

Step 10

Make another copy of the layer and reduce its fill to 0%. Just make these changes in its Gradient Overlay settings.

Step 11

With the Ellipse Tool (U), make a black ellipse over the "top" layer.

Give the layer these Layer Styles.

Step 12

Now you need to add shadows at the required places. Create a new layer below the "top" and it's duplicate layers. Command-click on the "top" layer and move the selection a few pixels down, then fill it with black. Go to Filter > Blur > Gaussian Blur, enter 5px and click OK. You'll clearly notice that the shadow is flowing outside the hat's body.

To fix it, Command-click on the "body" layer and with the "shadow" layer selected, click on the Add Layer Mask button in the Layers Palette (as you did in Step 4). Set the Opacity of the layer between 30% to 50%.

Step 13

A shadow can also be placed beneath the base. To do so, fill an elliptical selection with black on a new layer, reduce the Opacity of the layer to 30%. This layer must be placed below the "body" layer. Go to Filter > Blur > Radial Blur, make the settings as shown in the image below before clicking OK.

Step 14

On a new layer, fill an elliptical selection with black and set the Opacity of layer to 50%. Go to Filter > Blur > Gaussian Blur, enter 2.5 px and click OK.

Step 15

The hat is done. You can now add a wand to the hat. Create a new layer set (name it "Wand") and hide the "Hat" layer-set by clicking on the eye to the side of it's name in the layers palette. Use Rectangle Tool (U) to draw a rectangle and give it a Gradient Overlay.

Step 16

Add two strips at the end of the wand while giving them a Gradient Overlay of purple shades.

Step 17

To reduce the flatness of wand, add anchor points to the strips using the Add Anchor Point Tool. Move them some pixels up. Along with that, add an ellipse at the end of the lower strip as shown.

Step 18

Duplicate the "Wand" layer-set and press Command + E to merge the duplicate set into a single layer. You can now hide the original "Wand" layer-set. With the merged "wand" layer selected, go to Edit > Transform > Rotate and rotate the wand 75 degrees CCW. Place it in a suitable location.

Conclusion

A shadow of the wand, falling inside hat's body, can also be added to complete our image.

If the final image appears too bright or dark on your monitor then you can add a Brightness/Contrast adjustment layer to the final image. To do so, open the final image in Photoshop then go to Layer > New Adjustment Layer > Brightness/Contrast, use settings that please you.

Creating the Spoiled Princess Fashion Poster

2009-12-16T02:35:00.000-08:00

Step 1

First of all create a new document. If your intention is to print this poster on a large size you might want to consider creating the document using a large size like 1900px by 2600px and 300dpi. Now fill the background with black.

Step 2

Next you need to create a lighting effect over this background. To do this go to Filter > Render > Lightning Effect and use the below settings. Basically you will have to just play around with the numbers until you get some effect that satisfies you.

Step 3

Create a new layer. In this layer you will create a few Lens Flare Effects. To do this go to Filter > Render > Lens Flare like in the image below. Then repeat the step 2 to 3 times to make the effect more powerful.

Step 4

Now you need to create another layer and make sure that you have your background and foreground set to black and white then go to Filter > Render > Clouds. Then set the layer to Soft Light and Opacity to 30%.

Step 5

Now it's time to apply some color to your background, to do this go to the selected layer's Color Balance and use the image below for the color reference. You should obtain some sort of reddish color. Next add some Vibrancy to your background. These have all been changed from the Adjustments menu.

Step 6

Import the image with the girl into Photoshop and use the Pen Tool (P) you need to extract part of her body like below and place it into your document.

Step 7

Next you need to double-click the model layer to enter the Blending Options menu. In this menu you will have to add Inner Shadow, Outer Glow and Inner Glow. The images below will give you the exact information you need.

Step 8

Cutting the model and placing it just like that into the background looks kind of strange, and cutting off the next effect you are going to create will not make much of a difference, but it will give the illustration a more interesting look. I am talking here about creating the interior of the model... just a piece of material that will look like the jacket she is wearing.

For this you need to make a selection like below and fill the selection with #2d343e. Now that the shape has been created, you need to make sure the layer is behind the model and double-click on it to enter the Blending Options and add the next settings.

Step 9

It's time to insert the graphic elements. Start with the circle element. First create a circle using the Eclipse Tool and then multiply it obtaining a square shape like below. Merge all circles into one layer and place the layer below the "model" layer. Also you will need to set the following Blending Mode to the layer: Gradient Overlay 50% and Opacity of the layer at 50%.

Step 10

Use the floral elements that you bought from GoMedia, or one of your choice, and add a few of them into the document. As you can see in the image below, they are not very detailed and cleanly placed but that is not a problem because you will come back and adding details later on as you proceed.

Step 11

Time to add some colors and flares. Create a new layer over all the rest of the layers, and use a big brush size set to white to create a flare like below. Set it to 50% Opacity.

Step 12

To make this more interesting you need to create three separate layers and place them into a folder named "circles." For each layer you need to create a round selection, then use the brush with different colors and sizes for each of them. Create soft color circles like below. Set the folder to Pass Through and 70%. In the end you will set it to Multiply as you will see that will make the colors more interesting and they will blend in with the rest of the composition better.

Step 13

Let's add some more elements to the background. Create a new layer and place it behind the model and all the rest of the elements, but keep it above the background layer. Use the Rectangular Marquee Tool and make simple lines like in the image below and fill them all with white.

Step 14

With the line layer selected you need to go to Filter > Blur > Motion Blur and apply a -90 degree Angle and a 10px Distance. Repeat the step but this time add a 0 Angle and 500 Distance.

Step 15

Next pick the Eraser Tool (set to a big size and with the edges soft) and use it to erase the center and some of the edges of the lines. You will also have to reduce the Opacity of the layer and for a more interesting look duplicate the layer. Move it slightly above the other and decrease the Opacity more for both.

As you do this, you'll notice the lines starting to disappear, but at the end of this tutorial you will see in the final result that the lines will start to be very visible. That is because in time you can go back and adjust each layer to your needs or maybe apply extra layers on top of them to make them stand out.

Step 16

In this step you'll start adding the elements that burst out of the box. Basically, just open up the images mentioned in the introduction of the tutorial, cut them out, and place them into your composition. One extra thing that I have done for the moment was to add a simple shadow to the box that you will eventually come back to later on, and add more effects over it and make it blend in more.

Step 17

Continue adding elements.

Step 18

Now you will create a more interesting element. Something like the Omega Code. For this use the Pen Tool (P) and create the triangle and don't worry if the lines are not symmetrical.

For creating this exact shape you will have to make a lot of duplicates and apply Motion Blur for some of the shapes to create an illusion of movement.

Step 19

Open up the horns image and cut them out of the actual image and place them into your document on top of the model's head. You will make her look like some sort of devil. In total she will have four horns on her head.

To make them look better you need to transform them into Black & White, then add a slight Inner Shadow to them.

Step 20

Applying one color to the whole image and changing the mode can dramatically change the aspect of the final image. For this you need to create a Layer Fill using this color #be04af. Then set it to Screen and set the Opacity to 30%. This layer must be on top of all the rest of the layers created so far.

Step 21

The second color effect is to create a new layer, then use a soft brush, just apply colors on the layer as you see below. In the end, set the layer to Screen and Opacity to 30%.

Step 22

Create another layer and fill it with #01b387. Then you need to create a Lens Flare effect by going to Filter > Render > Lens Flare and use the settings below. Repeat the step 2-3 times. In the end set the layer to Overlay.

Step 23

Next you need to select some areas of the model's body and using the Pen Tool (P). You need to cut off some shapes and place them into your document like below. Just add some simple graphic elements.

Step 24

The composition is basically finished at this point, but to make it more interesting you will need to change some elements, add some more effects to the background, and change the blending style of the colors.

First of all return to the small dots that you have created in Step 9. You will have to duplicate that set of dots two times and change the colors to red and blue. Overlap these two sets, but move them slightly so that they are not perfectly aligned, then set them to 50% Opacity and merge them.

Next move them over the original dots set and over the model and set them to 50% Opacity and Overlay.

Duplicate the layer.

Duplicate the layer again but this time leave it to Overlay and set it to 100% Opacity.

Step 25

Next it is time to make the background more interesting. First create a new layer and place the layer on top of the background but behind the model layer and other elements. Fill the layer with black and erase some center parts of the black layer using the Eraser Tool (E). Erasing a few parts of the layer is just for helping you decide a shape.

Now you will have to use a cloud brush that you can find over the Internet or maybe in your own gallery. The ones I used can be found here: DeviantArt. Using this brush you need to mask the image leaving a very nice transition between the old background and the new black effect.

As you notice on the images there are small dots on the black element that represent the stars, these can be easily created using the Noise effect. Create a new layer and fill it with black, then go to Filter > Render > Noise. To create the noise more to your needs go to Levels, and dragging the slider left and right you will decide how many stars you want over the background.

Step 26

The final step of this tutorial is to add some final color adjustments. To do this you need to save the image as a JPG and then open the JPG separately. Go to Channels and select the Green Channel. Copy the Channel by pressing Command + A to select the entire image then Command + C then go to the Blue Channel and Paste the Green Channel over it by pressing Command + V.

The color effect is applied. To see it go back to the RGB Channel.

Step 27

What is left is to add two more Curves Adjustments. Create the first Curve and add the next settings.

Using a black, soft brush you will need to draw over the girls face and neck in the mask to cover up the curve effect in that area, as the effect lights up the face too much.

Step 28

And then apply the last Curves effect and you are done.

Conclusion

You can view the final image below or view a larger version here.

Creating a Shiny Chain with Photoshop

2009-12-16T02:34:00.000-08:00

Step 1

First let's create a new document by pressing Command + N and give it a width of 750 pixels and a height of 1500 pixels at 300dpi.

Step 2

Now before we create our chain shapes we need to set up our guides. Hit Command + R to show you rulers, then drag a vertical and a horizontal guide to snap in the center of the document. Drag another guide down 140 pixels from the top and one 50 pixels from the left.

TIP: Holding Shift while dragging will force the guide to snap every 10 pixels and holding Alt while dragging will switch from a horizontal guide to a vertical guide. So if you wanted to drag a guide to exactly 100 pixels from the left, you would hold Shift + Alt while dragging to get a vertical guide that snaps every 10 pixels.

Step 3

With our guides in place we want to create the base shape for our chain. Grab your Rounded Rectangle Tool and change the Radius to 750px. Place your cursor at the intersection of the two center guides and start to drag. While dragging hold Alt to scale from the center until it snaps in with the top and side guides as illustrated below. We'll name this layer, "base link." Note: it's important to start dragging before you you hold Alt. I will explain more in the next step.

Step 4

Now we need to knockout the center of the previous shape by repeating the last step with a few minor differences. Select your Rounded Rectangle Tool and change its radius to 325px. With the "base link" shape layer selected once again we'll start with our cursor in the center most intersection of our guides. As I mentioned in Step 3, it was important not to hit Alt until you were in mid-drag. This time we do want to hold down Alt before we start dragging.

You will notice your cursor now has a minus symbol next to it. This tells us we are going to subtract this shape from the "base link" layer. So let's go ahead and create our inner shape now. Starting at the center guides hold Alt and then start to drag your shape until you have a chain link shape like the image below.

Step 5

Let's chrome this puppy! With the "base link" layer highlighted, add a Bevel and Emboss Layer Style with the settings below but keep the dialog box open.

Step 6

Now we'll double-click the Gloss Contour. We want to shape this contour to look like a tsunami so using the image below as our guide, let's create the first half of the wave. Don't worry if it's not exactly like the image below but try to get it close. Now before we shape the second half, with the tip of the wave selected you want to check the Corner box as seen below for this point only. By default, all new points have this turned off so you should only have to check it once for the tip of the wave.

Step 7

For the second half of the wave we want a steep drop down and a sharp curve to the bottom as seen in the image below. Hey look...Is that Keanu?

Step 8

Now, right underneath the Bevel and Emboss filter is a nested checkbox called Contour. Lets check that box, then double-click the Contour and shape ours to look like the image below. It's kind of an S-curve with the initial point one grid space up from the top.

Step 9

Next, we slide into some Satin. Change the settings to match the below image.

Step 10

As you can probably see already our link is starting to look like a chain. But wait, there's more! Next, we'll add a Gradient Overlay.

Change the main dialog box settings to match the image below, and then double-click the gradient to customize the colors and steps of the gradient. Again we don't have to be perfect with the colors or stages of the gradient, but we've added the exact colors below for you to be more precise.

Step 11

Ewww, what happened to our chain? It's all washed out and icky, did we do something wrong? Fear not! For we will keep the Layer Styles window open a little longer and add the finishing touches to achieve our chrome goodness. Oh, and yes.. the corny remarks will continue as well, so get over it already.

Next, we'll add an Inner Glow to our recipe of Layer Styles. Inner Glow is a little misleading in this instance.

By default Inner Glow is set to a yellowish color with a Blend Mode of Screen. This is fine if we actually want an inner glow, but what it we are looking for the opposite?

There's no Edge Shadow filter. But by using Inner Glow and thinking in reverse we can add an effect to our shape that gives the edge of our shape the illusion of roundness. Setting the Blend Mode to Multiply and using a darker color instead of a lighter color we achieve this effect.

TIP: You can use this reverse Inner Glow trick on anything that you want to look like it rounds off at the edges.

Step 12

Oh, I'm sorry. Did I say we were finished with the Inner Glow? Remember our friend the Tsunami Contour from Bevel and Emboss"? Well, we're bringing it back for Inner Glow. This is where you'll really start to see your washed out parts come back to life.

Using the settings below and adjusting the Contour with our wave from Steps 6 and 7. Now we can put Inner Glow to bed and move on to the next Layer Style.

Step 13

Next, we want to add an Inner Shadow using the settings below. The &Inner Shadow distorts the coloration just enough to make the chain not look so symmetrical. When we attempt to create pseudo-realistic elements it's best to try and distort the perfection a little bit to give it a more realistic look.

Step 14

Now we're going to apply another Contour, but this time it's a preset. Open the Contour menu and select "Ring – Double" as seen below.

Step 15

Ok folks, one last Layer Style effect to add and it is Stroke. Change your settings to match the image below and viola - we have a chain! But we have one last piece of flair to add to the "base link" so lets jump to the next step.

Step 16

Let's start by adding a new layer by clicking Command + Shift + N and name this layer, "Hilight."

Step 17

Next, with the "Hilight" layer selected Command-click the base link layer to get our selection.

Step 18

Now we want to shrink this selection. We'll do so by heading to the top menu and click on Select > Modify > Contract, then contract the selection by 60 pixels.

Step 19

Next, we want to feather this selection by 5 pixels. Head back up to the top and Select > Modify > Feather by 5 pixels.

Step 20

While still on the "Highlight" layer, we'll hit "D" to make sure our foreground and background colors are at the default. Now hit Command + Delete/Backspace to fill our feathered selection with white. You could almost reach into your screen and grab it!

Step 21

Now we need to make the top and bottom links, which should be much quicker since we've already done all the ground work in the "Layer Styles" to make our chrome finish. So let's set up some new guides and we'll create the rest of our links.

We know that our chain from the side view is no thicker than one side of our chain from the front, so we drag a guide to the inside-left of our "base link" and one down to the outside-bottom of the "base link," as seen below.

Step 22

Using these guides we want to create the side-view links of our chain. Grab the Rounded Rectangle Tool, set the radius to 325 pixels and using our new guides, drag the shape into place until it snaps to our guides. You should end up with a new Shape Layer that looks like the image below. Name this layer "top link."

Step 23

Now we want to copy the Layer Style we applied to the "base link" and paste it on the side view link we just created. Right-click on the "base link" layer and select Copy Layer Style. Then select the "top link" layer, and Right-click, then Paste Layer Style.

Step 24

The image below now shows we have the same effect applied to the "top link" as we do to the "base link." Now we want to add the highlight to the "top link" just like we did in steps 17, 18 and 19 with the "base link." Let's move on to that.

Step 25

First, create a New Layer above the top link layer by pressing Command + Shift + N.

Then with the new layer still selected Command-click on the top link layer to get our selection. Now if you remember we have to Contract and Feather this selection by going to the top menu and choosing Select > Modify > Contract, and contract by 60 pixels and then choose Select > Modify > Feather and we want to feather the selection by 5 pixels.

Lastly we're going to fill this selection with white by hitting Command + Delete/Backspace. Name this layer "top link hilight" and now we have our top link with the same Layer Style and highlight as our base layer.

Step 26

Now let's put these pieces into place. Select both the "top link" and "top link hilight" layer by selecting one and Shift-click the other. Drag it to the top center as seen in the image below.

Next, we want to copy these two layers. We do this by Alt-clicking and dragging them down to the bottom until it matches the image. Now finally, rename these copies to "bottom link" and "bottom link highlight."

Step 27

Now, maybe it's just me, but I don't like the way the top of that bottom link looks. So let's fix it. Open up the Layer Styles dialog box for the" bottom link" by double-clicking on the layer. Then go to the Bevel and Emboss style and change it from Up to Down. Much better.

Step 28

This step isn't really a step as much as it is a best practice. Since we have different layers that make up the separate link parts we're going to group the layers together. Let's select the base link and it's "Hilight" layer and hit Command + G and name this Group Layer "base link." Do this same process for the "top link" and it's highlight and then for the "bottom link" and it's highlight. All nice and organized.

Step 29

If we have highlights we have to have shadows right? Right! So Create a new layer above the "base link" group layer as seen below and name it "shadows." Next, if it's not open already, let's open the "base link" group and with the "shadows" layer still selected Command-lick on the "base link" shape layer. Once again this gives us a selection of our "base link."

Step 30

Now, press Shift + M until we have our Elliptical Marquee Tool. We want to subtract a portion of this selection, so like before when we did the knock out effect of our base links shape layer, we press and hold Alt and again we can see that the minus sign is visible, which tells us we're going to subtract from this selection.

Now simply drag your marquee on either side of our original selection to subtract it from either side until you end up with a selection looking like the image below. As you can see below our selection isn't perfect either so if you want to try it a couple times we can wait.

Step 31

Feather our selection by 35 pixels. So if you remember from earlier you can head up to the menu and go to Select > Modify > Feather. Or just hit Shift + F6.

Step 32

To fill our feathered selection with black press Alt + Delete/Backspace, then deselect by pressing Command + D and move on to the next step.

Step 33

Again with the "shadows" layer selected, we Command-click on the "base link" layer to get our selection. Then we go to Layer > Layer Mask > Reveal All to create the mask layer. Now fill the mask by pressing Command + Delete/Backspace, and then Command + D to deselect.

Step 34

Wait, something's wrong. Shouldn't the shadow be ON the chain and not behind it?

Step 35

Oh yeah, a simple Command + I to invert our mask and there you have it. Drop that shadow to 70% Opacity by pressing V to make sure our Move Tool is active and then 7 to get our Opacity to 70%.

TIP: As long as the Move Tool (V) is active, pressing numbers one through zero will jump the opacity of that layer in steps of ten. So pressing 1 will give you 10% Opacity and pressing 8 will give you 80% opacity, while 0 will bring it back to 100%. Subsequently, pressing 5 then 3 quickly will give you 53% and so on and so forth.

Conclusion

We made it! Click here to see the full size finished chain.

I hope you had as much fun as I did! We learned a lot, and not just how to create a chain, but hopefully some other techniques you can use in the future designs you create yourself.

Remember, to head over to Fuel Your Creativity to read the sister tutorial on how to make this chain look old as well as your chance to win a Premium 6 Month Membership to Psd Plus!