psdlearning.com

Dramatic Movie Poster

Ross — Fri, 14 Nov 2008 20:03:33 +0000

In this tutorial we will be learning how to take a few different stock images and put them together with some text to make a professional looking movie poster/DVD cover design. This tutorials includes some great photo compiling techniques and some ways of making your typography better with character editing and layer styles.

Read the Tutorial

Setting a Plane on Fire

Ross — Fri, 14 Nov 2008 19:56:00 +0000

In this tutorial we will be learning some indispensable techniques to use for any type of photo-manipulation. We will be doing this by taking a photograph of a model plane and editing it to to look like a photograph of a WW2 spitfire which has just been shot down and is on fire. The techniques used here are the same for any type of ‘destruction’ photo-manipulation.

Read the Tutorial

Flickr Group Roundup

Ross — Fri, 17 Oct 2008 18:52:43 +0000

The Flickr group is growing fast; 199 images and 70 members. This is the second Flickr group roundup where I’ll show you some of the really awesome work in the group, I’ve chosen five of my favorite images in the pool. Congratulations if you made it into the top five! If you aren’t a member yet then make sure you join in. And I’ve added the links to the winners’ photostream in the sidebar.

Favorite Images

Here are the images that really stood out to me, great work here! If you didn’t make the cut don’t worry I’ll be doing another roundup soon enough so keep at it.

Esoteric
estheticcore

Isla Flotante
Diego Mattei

Lo stress Uccide
uriel.design

Comp_osit_ion
Dgearin

BestGrafiks Design
ironbondio

Portfolio Design Part 2

Ross — Fri, 26 Sep 2008 15:05:09 +0000

This is the second part of the portfolio design tutorial where we are creating a stylish side-scrolling gallery where we can show of our work. This part will focus on the html/CSS side of things, even though this is a Photoshop website, it’s still important to branch out occasionally and a portfolio is useful for displaying your work anyway. This is a beginner tutorial.

Introduction

If you haven’t already read it then you should check out part one of the tutorial. I’ve not gone into all the basics of html and CSS but if you know some of the basics then this is a good opportunity to put your knowledge to use. This tutorial shows how to code the site using html and CSS only which maybe isn’t that efficient but I’m trying to focus on the layout and the styling so if you know a bit of PHP then you can use that to maybe loop over the images etc. I’m working on developing a CMS for portfolios like this which I’ll release soon and so far it has functions like image upload and resize, an admin dashboard, the ability to create new pages and to add a bio, I’m still working on template integration and a few other things so check back or subscribe so you don’t miss it. You can check out the final portfolio here. And lastly this is not developed for IE, I would need to create a separate stylesheet so if anyone feels like doing that then I would be happy, else I’ll just do it myself then put it available for download. Let’s go!

Step 1

First we need to work out structure of our site; since this is a simple html/CSS only site then it won’t be complicated. We’re going to create everything on our computer then if you want to upload it to a hosting service then you can do that at the end. Since we’re only using html and CSS then you don’t have to worry about installing any programming languages or databases etc. Below I’ve shown a diagram of the structure of the site. The topmost folder, ‘.root’ is the root directory of the site, you only have to worry about this if you are going to put the site online otherwise just create a folder named portfolio then within that create the other folders using the same structure as well as the index.html and the style.css documents.

Step 2

Open up your ‘index.html’ document in a text editor; notepad will do but there are better alternatives like Notepad++. Now type or copy out the code shown below into you document then I’ll explain it.


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
 
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Portfolio of Ross Aitken | PSDlearning</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
 
<body>

On line one we specify the type of document, here we’ve set it to ‘Xhtml 1.0 strict’, I’m not going to go into much detail but basically ‘DOCTYPE’ will tell the browser what kind of html we are using (there are a few) and this saves the browser from guessing. Next we have our ‘html’ tag, which begins the html code. After that we have the ‘head’ of the html document which contains some meta info, the title and links to any external stylesheets, javascripts, favicon etc. Here we’ve put the title which you can change then a link to the CSS stylesheet. Lastly we’ve got the ‘body’ opening tag which specifies the start of any content that will be shown in the browser window.

Step 3

Now add this code below that.

<ul class="scroller">
 
	
	<li class="item">
		<a href="images/1.jpg">
			<img src="images/s_1.jpg"/>
		</a>
		<h3>Image Title</h3>
		<p>Client</p>
	</li>
	
	<li class="lamp">
		<img src="css/img/lamp.png"/>
 
 
 
	</li>
 
	
	<li class="item">
		<a href="images/2.jpg">
			<img src="images/s_2.jpg"/>
		</a>
		<h3>Image Title</h3>
		<p>Client</p>
	</li>
	
	<li class="lamp">
		<img src="css/img/lamp.png"/>
	</li>
 
</ul>

First we’ve got the ‘ul’ tag which specifies the start of an unordered list the ‘class=”scroller”‘ means we can style this element in the stylesheet seperately. Next we have the ‘li’ tag which denotes the start of a list item, this has class named ‘item’ attached to it and contains an image then the title and client of that image. After that we’ve got another list item which contains the lamp. I should also point out that the ‘‘ tags are used to comment out text so we can read them but the browser cant basically. After that we’ve got exactly the same two list items for the second image so you can see how to add more images by just copying and pasting these. Whenever you open a tag you have to also close it so thats why some of the tags start with’/’.

Step 4

Now we’re going to quickly test our code but first you need to put some images in the ‘images’ folder, for each image we add to the portfolio we will have a small version and a large version; so for image 1, the large version will be named 1.jpg and you’ll have to resize it so it has a height of 522px exactly, the small version will be named s_1.jpg and will have dimensions no bigger than 480×360px (so as big as you can get it without going over these limits). Add at least two, if you add more then make sure you edit the code above. You’ll also want to download the image of the lamp here and save that in the ‘css/img’ folder. Now save the html document then open it in any browser except IE. You should get something pretty horible that resembles the image below, If not then recheck your code.

Step 5

Now either type or copy the code below into the index.html document.

<div id="bio">
	<h2>Name</h2>
	<p>Bio</p>
</div>

The ‘div’ tag denotes a division in the code and is ussually used as a container we’ve set the id as ‘bio’, the id does exactly the same as the class where it lets you refer to the element in the stylesheet, however id’s are meant to be used when you are only going to have one element with that id whereas the same class can be used multiple times. For example we are only going to have one ‘bio’ on this page but may have multiple ‘lamps’. ‘h2′ is is just a header, ‘h1′ is the largest header and ‘h6′; the smallest but they can be styled anyway. The ‘p’ tag just means paragraph, so insert you or your company’s name where I put ‘Name’ and a short bio where I’ve put ‘Bio’.

Step 6

This goes below again:

<div id="menu">
	<ul>
 
		
		<li>
			<a href="http://portfolio.psdlearning.com">All Work</a>
		</li>
		<br/>
 
		
		<li>
			<a href="http://portfolio.psdlearning.com/clients">Clients...</a>
		</li>
 
		
		<li>
			<a href="http://portfolio.psdlearning.com/contact">Contact...</a>
		</li>
 
	</ul>
</div>
 
</body>
 
</html>

You should understand this alright and if you want to add another menu item then just copy the part labeled ‘General menu item’. The ‘br’ tag here just specifies a line break and last of all we are just closing the ‘body’ and ‘html’ tags.

Step 7

CSS code is fairly self explanatory and everything here is fairly simple so look over the code below then copy it into the style.css document. Note that I’ve put the word ‘COLOR’ as a comment beside certain parts of the code, these are the elements that I’ve colored lime green so if you want to go for a red theme then yo would change all these values to reddish hex value or just put in ‘red’. THe background property of the ’scroller’ element refers to background.gif, this is the pattern that we used in the previous part of this tutorial, you can downlound the one that I used here then make sure you put it in the ‘img’ folder. Some parts of this stylesheet are a bit strange and hard to understand and that’s because we’re making a side-scrolling web page where all browsers automattically wrap text an make thing scroll down so there are a few parts which are edging on CSS hacks. There may be a better way to do this but I haven’t found one yet. Lastly if you’re not familiar then a ‘#’ refers to an id and a ‘.’ refers to a class.

body {
margin:0;
background:#0c0c0c;
color:#ddd;
font-family:"courier new", rockwell, serif;
font-size:12px;
}
 
ul{
list-style:none;
margin:0;
padding:0;
}
 
a{
color:#ddd;
text-decoration:none;
}
 
a:hover{
color:#bfda29; /*COLOR*/
}
 
a:active{
outline:none;
}
 
a:focus{
outline:none;
}
 
h2{
font-size:24px;
margin:5px 0 0;
color:#bfda29; /*COLOR*/
}
 
h3{
font-size:14px;
letter-spacing:1px;
}
 
.scroller {
background:url(img/background.gif);
white-space:nowrap;
position:absolute;
padding:50px 200px 30px 400px;
top:80px;
border-top:1px solid #3a3a3a;
border-bottom:1px solid #3a3a3a;
height:440px;
}
 
.scroller li {
display:table-cell;
}
 
.scroller li.lamp {
padding:0 80px;
}
 
.scroller li.item{
text-align:center;
}
 
.scroller li.item img {
border:2px solid #bfda29; /*COLOR*/
}
 
.scroller li.item p{
text-transform:uppercase;
letter-spacing : 5px;
font-size:12px;
color:#bfda29; /*COLOR*/
}
 
#bio{
width:180px;
position:absolute;
padding:50px 15px;
top:80px;
z-index:8;
}
 
#menu{
position:absolute;
top:80px;
width:150px;
height:522px;
background:#0c0c0c;
border-right:1px solid #3a3a3a;
border-left:1px solid #3a3a3a;
margin-left:220px;
}
 
#menu ul{
text-align:right;
margin:97px 15px 0 0;
}
 
#pagetext{
width:200px;
}
 
#page{
overflow:hidden;
}

Conclusion

If you experiment with the stylesheet you’ll find that it’s very simple to change things about the site like the background color, the font, and even the wallpaper pattern. You can also try substituting the lamp image for something else if you really want to personalise the portfolio. Note that here I haven’t shown how to create pages but basically you just need to copy and paste the index.html file then rename it and substitute the images for text; simple. Hope you found that helpful and feel free to ask any questions in the comments.

Portfolio Design Part 1

Ross — Tue, 23 Sep 2008 08:23:26 +0000

This is the first of a two part tutorial teaching you how to create a side-scrolling portfolio site. If you’re planning to get serious in the design industry then you need to get yourself an online portfolio. Here I’m going to show you how to draft up the layout in Photoshop then next time I’ll be showing you how to code it in html/CSS.

Introduction

It’s been a few days since I posted my last tutorial, the reason for this is because I started writing this tutorial with no intention of coding it but I ended up coding in html/CSS then I added a few more features and a bit of PHP then I added image upload functionality and threw in a database as well and before I knew it I had created a simple CMS for portfolios, so I’ve been developing this while writing the tutorial and I’m hopefully going to release the CMS after I’ve posted both the tutorials.
Before we get started, you can check out the live demo of he portfolio we will be making here as well as the full size image. *The portfolio demo doesn’t work in IE at the moment, I’ll need to develop a separate stylesheet*

Step 1

Create a new document with dimensions; 2000×680px then change the foreground color to #0c0c0c. Now fill the background layer with this color; you can do this by hitting Alt+Backspace. With this design we want it to be side-scrolling so we don’t want to have to scroll vertically, I worked out that on all browsers running on a 1024×768px screen resolution there is at least 650px of vertical space to work with (unless you have hundreds of toolbars). Just to be safe we’re only going to use 520px as well as a margin of 80px at the top. So go View>New Guide and create a horizontal guide at 80px and then another one at 600px. If the guides aren’t showing then make sure View>Extras is checked as well View>Show>Guides. Lastly turn on snap by checking View>Snap. In the images below each step I’ve only shown half of the document as there isn’t enough space here to show it all so just ignore the fact that your proportions may look a bit different.

Step 2

Create a new layer then change the foreground color to white, next select the rectangle shape tool and draw two rectangles snapping to the guides at the top and bottom and get something that looks like the image shown below.

Step 3

Now we need a floral pattern to go as the background, good floral patterns are actually quite hard to come by but I found an absolutely awesome free pack containing about five hundred seamless patterns; this has quickly become my favorite pattern pack and is definitely worth downloading, you can get it here or you can just download the single image that I used here. Open up one of the floral images in Photoshop then go Edit>Define Pattern and save the image as a pattern, you can now close that document and go back to our portfolio.

Step 4

Right click on the layer with the two rectangles and go to blending options then add a pattern overlay and a stroke using the settings below and the pattern that you saved.

Step 5

In the layers panel change the fill opacity of this layer to 0%.

Step 6

Using the text tool add your name and a small bio on the left and add some menu items and align the menu to the right. I wanted to go for a slab serif font so I used Courier New but you could also use Rockwell. Put your name in a different color and either remember this color or add it to your swatches, When we come to code this we’ll have the menu items changing color when we hover over them so you can change the color of one of them just to see what it looks like.

Step 7

We’re going to add in an image now so open an image that you’ve made then go Image>Image Size, make sure constrain proportions is checked then change the size so it has maximum dimensions of 480×360px. Now just copy and paste this image into your portfolio document and position it like shown below.

Step 8

Add a stroke to this layer in the same way as we did in step 4 and use a size of two pixels and use the same color as you did for your name then add a title and put some other information below; I decided to put the name of the client below in the lime color.

Step 9

I thought it would be cool to have some wall lamps between each image to separate each one and make it look more like a real art gallery. I used a stock image for the lamp but had to make a lot of modifications to it like extracting the lamp then adding a new glow behind it and some shadows then mirroring one of the halves and scaling it down, if you want to do it yourself then you can get the original image here or you can just download the edited image here, this is in PNG format so already has transparency so all you need to do is to copy and paste it in like so.

Step 10

Now all you need to do is to repeat steps 7, 8 and 9 to add another image in then that’s you done.

Conclusion

Although here I’ve used a dark gray background, a floral pattern and a lamp as a divider, once we go on to code this then it’s easy to substitute these for different images or colors which means that using the same layout you can go around in Photoshop and change these parts until you get something that you like and when I bring out the coding part you can code your own personal portfolio. Hope you enjoyed this tutorial and I’ll get the coding part to you as soon as I can.

Check out Part 2

Stylish Floral Typography

Ross — Wed, 17 Sep 2008 11:48:30 +0000

This tutorial will teach you how to create a very appealing and slightly abstract text effect that looks like the text is made from plants and flowers; you really have to see it to know what I mean. We’ll be using a lot of floral brushes which look great and also learning a really useful technique for accurately hiding stuff behind other stuff.

Things You’ll Need

Floral brush pack

Introduction

Of all the tutorials I’ve written this is probably my favorite yet; it’s so simple yet looks so complicated and only takes about 10-15mins to get an awesome result. I got the idea from the second image here by Craig Ward. So basically I’ll be showing you how to achieve this effect really quickly in Photoshop. Hope you like it as much as I do!

Step 1

Create a new document with dimensions; 1200×800px then create a new layer and select the gradient tool, click the gradient preview in the main toolbar and choose the gradient that goes from black to white. In the main toolbar change the style to radial and drag from the top right corner to the bottom left to get something similar to the image below. Now just change the opacity of this layer to 15%.

Step 2

Select the text tool then click once in the middle of the document, first change the paragraph alignment to center then choose a bold sans-serif font, I used Helvetica but you could also use Arial Black. Now change the size to 150pt and type your message, it looks better if you use more than one line so just hit Return to go to the next line as you normally would. Go Window>Character to open the character adjustments, highlight your text then adjust the leading (vertical spacing) and tracking (horizontal spacing) to get your text spaced appropriately, I had to change the tracking to 100. Your image should now resemble the image shown below, note that it’s important that there is enough space between the letters to add the plants.

Step 3

First, in the layers panel, change the fill opacity to 0% then right click on the text layer and go to blending options and add a drop shadow using the settings shown below, I’ve also shown the result I got after applying it.

Step 4

The next few steps are the most important so make sure you follow them correctly as you’ll be repeating them a few times. First create a new layer (you may want to create a layer group to put all the plants in) then select the brush tool and select one from the floral pack you downloaded and click once to place it; try and get it looking like it stemming out of the text like in the image below.

Step 5

Go to the text layer and change the fill opacity to 10%, this is so we can see the text while we go through the next few steps; it makes it easier for this part but we’ll change it back later. Go back and select the floral layer.

Step 6

Ctrl+click on the text layer, note that the floral layer should still be selected.

Step 7

Select the polygonal lasso tool and in the main toolbar change the mode to intersect and make sure feather is set at 0px and anti-alias is checked. Now what intersect will do is to select only the parts contained within both of our selections, we’ve already made one selection (the text) so this means that no matter what we are not going to have a selection that extends outwith the text. We want it to look like the flowers weave in and out the letters so some parts have to be hidden behind the letters. Here we want the flower to go behind the bottom of the ‘D’ then through the hole in the middle so to do this you would draw a selection (indicated by the red line) with the polygonal lasso tool and that will make a selection of everything included within both the text and our selection, so only the parts where they overlap. The resultant selection is shown in the second image.

Step 8

Now to hide this part just hit Delete then Ctrl+D to deselect.

Step 9

Okay now repeat steps 6, 7 and 8 to hide some more of the flower, notice how I hid the flower behind part of the ‘N’.

Step 10

You should now be confident using this technique to hide the flowers behind parts of the letters so I’m just going to show a few images of what mine looked like at various stages of the process. You now need to use the same technique from step 4 to step 9 with some more flow brushes. You’ll see in the image below that I added three more flowers and made them weave in and out of the letters, I also put the fill opacity of the text layer back to 0% to show you how this looked but you can keep it at 10% for a little longer.

Step 11

I now added even more flowers and put in some of the smaller ones to balance out the image so none of them were looking too bare, again use the same techniques to hide parts of the flowers.

Step 12

The last step to finish off this image is to refine some of the details as you’ll notice that some of your flowers don’t look like they are stemming from the letters or some are a bit too sharp. Select the brush tool then go back to the basic brushes and choose a 2px hard round brush then create a new layer then paint in some extra details freehand. I’ve shown a before and after example and you’ll notice that I’ve rounded off some of the corners also.

Conclusion

There is a lot further you could go with this image like adding thorns to the text or even putting in some tree brushes but for the purpose of this tutorial I tried to keep it simple and I’ll just leave you to experiment now, Hope you learned something new, leave a comment and spread the word!

Flickr Group Roundup

Ross — Tue, 16 Sep 2008 10:54:17 +0000

A few weeks a go I opened the PSDlearning Flickr group and so far it’s doing great; 69 images and 20 members. This is the first Flickr group roundup where I’ll show you some of the really awesome work in the group, I’ve chosen five of my favorite images in the pool. Congratulations if you made it into the top five! If you aren’t a member yet then make sure you join in.

Favorite Images

Here are the images that really stood out to me, great work here! If you didn’t make the cut don’t worry I’ll be doing another roundup soon enough so keep at it.

expressions
Dario P. M

Vintage McDonalds
zafralumpa12000

Firedance
[TsuNami]Daviz

Fusion of light and color
Colorsplashed

Stanley Aura
Lukie Poplin

Abstract 3D Wallpaper

Ross — Mon, 15 Sep 2008 12:50:19 +0000

Yesterday I wrote a tutorial on using abstract 3D renders to create a nice piece of art, check it out here. So I thought it would cool to release the final image as a wallpaper in various colors and sizes, so if you love PSDlearning enough to have it pasted on your desktop then download a few of the wallpapers. I’ve got them in red, green and blue. Enjoy!

Creating an Abstract 3D Design

Ross — Sun, 14 Sep 2008 09:37:59 +0000

Abstract 3D objects is something that we are seeing more and more in graphic design so I thought it would be good to learn how to create a cool looking design using an abstract render and let you see how simple it is to create a full piece of art in this way. I’ll be using lots of simple techniques so anyone should be able to follow it.

Tutorial Files

If you are a PSD PRO member then download the PSD file and much more by going here.

Things you’ll need

Render pack

Introduction

This tutorial will show some similar steps to the snowboard design tutorial as we will also be using a rendered 3D object. First make sure you’ve downloaded the file that I mentioned above.I’m going to show you the simple steps to creating this image but feel free to add your own bits in. I’m also going to release a set of wallpapers in different colors like this soon for anyone to download so check back. Lets get going!

Step 1

Create a new document with dimensions; 1600×1200px then create a new layer and fill it white, a quick way to fill the layer white would be to hit D then Ctrl+Backspace. Now go Filter>Noise>Add Noise and use the settings shown below to give use a noisy background.

Step 2

We are going to add a slight shadow below where we are going to place the render. Your foreground color should still be black so create a new layer, now select the brush tool and choose an 800px 0% harness round brush and click once to give the effect shown below.

Step 3

Open 1.png from the render pack then copy and paste it into this document then scale it down slightly by hitting Ctrl+T and dragging the corners while holding shift then move it above the shadow like shown in the image below.

Step 4

Go Image>Adjustments>Desaturate then go Filter>DIstort>Twirl and use a value of 125°.

Step 5

Change the blend mode of this layer to soft light and change the opacity to 75%.

Step 6

Now paste the render in again, you could probably just hit Ctrl+V unless you’ve copied something else. Now scale this down in the same way and position it like so.

Step 7

The render is looking a bit too dark at the moment so go Filter>Render>Lighting Effects and try and mimic the settings shown below as best as possible.

Step 8

Next go Image>Adjustments>Hue/Saturation and change the hue to +80.

Step 9

Lets take a look at where we are, your’s should look similar to the one shown below but probably not exactly the same. We’ve added a simple background using the noise filter, you could have used a texture for this also like a paper texture or a concrete texture, both would have looked good also. We added a bit of lighting with the brush tool, you could have used the gradient tool set at radial to give the same effect. The faded render gives a slight shadow as well but doesn’t look like the render since we twirled it. We enhanced the render by using the lighting effects filter and a color adjustment, this was important as the render will be the focal point so has to look perfect. This wasn’t really a step, more of a recap. From here on every new layer we create will be created below the render layer as we want the render to remain the topmost layer.

Step 10

Okay paste in the render again, scale it a bit and position it like in the image below.

Step 11

In the layers panel change the fill opacity of this layer to 0% then right click on the layer and go to blending options and add a stroke using the settings shown below.

Step 12

This will have given you an outline of the render, I repeated the last two steps again but rotated the render slightly and used black instead of green as the stroke color. Later on I ended up making a few adjustments to these outlines so don’t worry if your’s doesn’t look the same throughout the tutorial.

Step 13

This step might take a few tries to get right, first select the pen tool then in the main toolbar make sure the shape layers button is pressed, start byclicking somewhere on the render then click outwith document bounds and hold and drag to get a nice curve then add another point then connect it back to the first point with a curve. You should have something that looks like this and make sure the layer is behind the render layer.

Step 14

Go into the blending optiions for this layer and add a drop shadow, inner glow and stroke using the settings shown below.

Step 15

Now repeat these steps to create another ribbon like shape, I lowered the opacity of the second one to 50%.

Step 16

Create a new layer then select the brush tool and choose a 3px hard round brush. Select a darkish green as the foreground color then select the pen tool and in the main toolbar press the paths button. Draw a path going from the middle of the render to outside the document and hold and drag to get a smooth curve, Right click within the document window and select stroke path and uncheck simulate pressure. Do this a few more times until you have about four or five lines. You may notice that I created a dotted line as well, this is optional but do it you you would go into the brush editor by going Window>Brushes then under brush tip shape you would increase the spacing then stroke the path.

Step 17

Change the blend mode of this layer to dissolve.

Step 18

We’re going to add some random lines now so select the brush tool and change the diameter to 2px, I used three different colors here, a lime green a darker green and a cyan color. So first creat a new layer then just go wild with these three colors by drawing lots of freehand scribbles around the render. I’ve shown three examples below of what mine looked like.

Step 19

We’re going to go onto what I call the branding area, this is where you would tend to put your title, name, maybe website. However this has to look good as well so you need some nice typography and colors here. I’m not going to go into all the details of how I created this because you’re obviously going to be wanting a different title and your name’s probably not the same as mine, just make sure you create each element in a new layer. Create this shape by first making a new layer then selecting the polygonal lasso tool and holding shift to get straight lines, once you’ve closed the loop fill it black by going Edit>Fill and choosing black then in the layers panel change the fill opacity to 10%.

Step 20

Now go into the blending options for this layer and add a gradient overlay and a stroke mimicking the settings shown below.

Step 21

Now you’ll want to add something else to this box so I’ll let you be creative in this step, you’ll see that I just added a layer mask to this layer with the letters PSD but you can add or take away whatever you want from the box.

Step 22

Here I added some text in a techie font, I also added some simple green lines at the bootom of the box and added a stroked PSD. Basically just put your title in here somewhere and a few extra things if you want.

Step 23

Next I added some simple arrows above the text and some dots next to it. I then put in my website and some really small illegible text. I also put chinese text along the bottom of the box as this always looks good.

Step 24

Here what I did was to get a small version of the image by, in a new layer, going Image>Apply Image then sacaling it down and adding a border. Then I just put my name to finish it off.

Step 25

Ussually at the end of creating an imagew like this, I make some small color adjustments using curves but here I tried changing the hue totally and actually quite liked the results, I’m not sure which I like better though but I’ve shown both below. To do this go to the top of the layer stack and add a hue/saturation adjustment layer by clicking the black and white circle button in the layers panel. You’ll notice I’ve also added a few extra things and would encourage you to do the same and experiment a bit. Hope you found this tutorial useful!

25 Brilliant Wallpaper Tutorials

Ross — Thu, 11 Sep 2008 15:24:30 +0000

I’ve compiled a list of the best Photoshop tutorials that teach you how to make really great backgrounds. All the tutorials here give a top quality final result and teach you some nice techniques. This should give you enough tutorials and wallpapers to last a while so give them all a shot and make sure you share the list if you like it!

psdlearning.com

Dramatic Movie Poster

Read the Tutorial

Setting a Plane on Fire

Read the Tutorial

Flickr Group Roundup

Favorite Images

Portfolio Design Part 2

Introduction

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Conclusion

Portfolio Design Part 1

Introduction

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Conclusion

Stylish Floral Typography

Things You’ll Need

Introduction

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Conclusion

Flickr Group Roundup

Favorite Images

Abstract 3D Wallpaper

Green

Blue

Red

Creating an Abstract 3D Design

Tutorial Files

Things you’ll need

Introduction

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Step 16

Step 17

Step 18

Step 19

Step 20

Step 21

Step 22

Step 23

Step 24