Soushi | Free Adobe Photoshop Tutorials

!

Soushi — Thu, 01 Jan 2009 00:21:02 +0000

2009!!!

The News

Soushi — Wed, 31 Dec 2008 17:05:50 +0000

Hey,

So i’ve wished you all Merry Christmas now, and it’s over too. Oh, but i have to wish you a Happy New Year too!
Let’s hope this year of 2009 will be good for all of us, not that 2008 wasn’t good or anything!

Anyway so i just remembered it was 2009 in a few hours whilst writing this, but what i really came here for is to post some news.

I’m currently working on a new design for the website, and i’ve been working on it for the past few days now. It’s taking quite a bit of time, every time you finish tweaking something, you browse around and find something else to fix. Or maybe it’s because i’m too much of a perfecionist, but nah. Let’s face it you don’t want to come read a tutorial and make your eyes bleed because there’s lots of weird things that are not right, that haven’t been tweaked as they should’ve.

Plus i’ve had enough of this layout, needed a change. If you’ve come yesterday or today you may have seen a message saying the website is temporarily down. You’ll probably encounter it again in the next few days whilst i set everything up. At the moment i’m working on the thumbnails for the tutorials. Gotta find a way to make the images appear at 100% quality. (Yeah i’m definitely not a pro when it comes too PHP).

Then i’ll take a look around see if there’s anything else to fix. When that’s done i’ll be taking the site down whilst i re-write the start of each tutorial so that it can fit with the new design (don’t worry, not too much of a hassle).
I’m saying this because i’m going working now, till 23:00 so i can’t work on that anymore at the moment.

Anyway, Happy New Year Everyone!!!

ROYALE® Casino

Soushi — Sun, 21 Dec 2008 19:27:38 +0000

Learn in detail how to create a stylish online casino layout. Useful even if you don’t own an online casino.

Quick Tutorial Stats:
Image Count: 120 Word Count: 3950 Character Count: 21,546 Production Time: 15 Hours

Hello everybody!

So, “brief” introduction. In this tutorial as you probably have guessed by now (since you did click the link to access this tutorial, didn’t you?) we will be creating a web layout for a casino. In this case, the ROYALE®Casino (which isn’t a registered trade mark by the way, or maybe it is, but i don’t own it. It just looks good with that little ®.

So, why did you click to view this tutorial? Bit bored? Looking for free money gaining tips in a photoshop tutorial? Or maybe you genuinely wanted to design a casino layout.

Wanted to create something which looks like this maybe?

As i’m pretty aware, most of you (ok, all of you) do not own an online casino. So it’s a pretty pointless tutorial you may say? Well i’ll reply to you and say no. Why? Because you will be learning how to use photoshop, using various tools, and techniques. That’s what tutorials are really there for. When you see a tutorial on a website for a “Web Design Website Layout Tutorial” or again “Web Host Layout Tutorial”, they’re putting into context a tutorial to show you how to use photoshop, what techniques are used. They’re not telling you how to set up a web host. Maybe some do, but i’m not here for that. I put into context my tutorials so that you can learn photoshop, but also learn and experiment the different aspects of the genres. I mean in this tutorial you will be working and creating things which you’ll see a lot at online casinos. (Flashy text, crisp design, etc).

So yeah, you should learn a few things or two if you’re not super advanced in photoshop. The tutorial is relatively easy and shouldn’t give you too much trouble. Of course i can’t tell you how to do everything, so you’ll have to get creative and do your own things at certain moments, let’s get started and hopefully we’ll all be spending our money in your new online casino! (only joking)

THIS IS THE PART WHERE THE TUTORIAL BEGINS, YOU CAN SKIP WHAT IS ABOVE

Step one, the canvas. We’re gonna be working on a slightly larger than usual canvas than for my other web layout tutorials, so let’s get a nice 850×650 px canvas up on our screens.
You can have a transparent or coloured background it doesn’t matter.
Create a new Group, and name it Header.
Also create a new layer in that group and name it Header.
Grab your rectangular marquee tool and use these settings.
Now click on your canvas to bring up the selection, and fill it in with any colour (CTRL+Backspace, or use the paint bucket). Deselect (CTRL+D)
Grab your move tool and move it to the top of your canvas. It should be touching the top. Also at the length should fit perfectly inside the canvas too.
Now go to the blending options for this layer and use these settings.

Your canvas should look something like this now, with your header at the top.
Create a new canvas, with a height of 1 px and a width of 40px and a transparent background.
Zoom in a little, grab your rectangular marquee tool, and set the width to 20px. (just put 1 or more for the height).
Click on your canvas, and move your selection to the right. Fill it in with black.
You should have something like this.
Next go to Edit > Define Pattern… Name your pattern as you wish.
Let’s go back to our casino canvas! Create a new layer and name it Pattern. (still in your header group).
Set the opacity to 20%. Now CTRL+Click on your header layer to bring up a selection. Grab your paint bucket tool.
At the top left you’ll notice a drop down menu which says Foreground. Click that and choose pattern. Now click on the little box and choose the pattern we just created.
Now fill in the selection with the pattern, on your pattern lay, but don’t deselect just yet.
With your selection still active (and your pattern layer active), grab the rectangular marquee tool. Now press on your down arrow key once, to nudge the selection down 1 pixel. Now hit CTRL+SHIFT+I (or go to selection > inverse) to inverse your selection. Now hit delete or backspace on your keyboard, deselect. What we’ve done is cut off the pattern at the top so that it doesn’t overlap the inner shadow we put on the header layer.

Your header looks like this now, doesn’t it?
Still working in the header group, create a new layer and name it gradient.
Set your foreground colour to #1e1e1e.
Grab you paint brush tool, and use a nice big brush, like 100px smooth brush.
CTRL+Click your header layer again and now what you want to do is draw a nice line at the top of your header layer. Start otuside of your canvas (in the grey area) and while holding shift and start draging right (or left if you started from the right ;-)). It’s up to you how you want it to look, so play around a few times with how much you paint on and at what height.

Mine ended up looking like this.
I’ve already done it in the picture above, but once you have brushed and you’re happy with it. Deselect. Now just grab your move tool and press your down arrow on your keyboard once to nudge it 1 pixel down, so that it doesn’t overlap the inner shadow again.
Create a new layer (in your group) and name it Gold bar.
Take your rectangular marquee tool and use these.
Click on you canvas, fill it in, deselect, and use these blending options.

(On the gradient, i put reverse, but maybe you don’t have to. Just make sure the dark side in to the right).
Grab your move tool and move the bar at the bottom in a fashion that it overlaps the bottom of the header layer.
You should aim for something like this.
Phew, that’s the header done, tap yourself on the back! (and close the header group(click little arrow)) We’ve got a lot to do still!
Create a new layer, name it, uh.. Promotions. We’re done with the header, so move this layer outside of the group, and move it under the group, too.
Set? You’ve guessed it… grab your rec. marquee tool. Use these if you wish.
Now just click your canvas, fill this in, with white so we can see it, doesn’t matter… deselect.
Actually for this step you might want to disable to gold bar layer, and the drop shadow on the header layer. Because we want to move this (move tool) promotions layer right under the header. So that it looks something like this (without shadow/bar)

and with:
We’ll come back to the header later, for now we’re working on the layout of the.. layout. So create a new layer, under your promotions layer. Name it Background.
Grab your rectangular marquee tool and use these.
Click your canvas, and fill in the selection with #121212. Deselect and move this right under your promotions layer. That’s easy, no screen shots
Create a new Group. Name it… suspense… Footer.
In group. Create New layer. Name: Footer. Grab: Rec. Marquee tool. Use: These settings.
Click canvas to bring up selection, fill it in with #0d0d0d. Deselect. Move it right under the Background layer.
Your canvas should look like this now (albeit zoomed out )
Go to your footer layer and use these.
Now create a new layer, name it pattern, opacity 20%. And do these same as for the header. Ctrl+click footer, paint bucket, paste pattern, keep selection, cut off the top for the inner shadow, deselect, etc.
Same again, create a new layer, foreground colour #1e1e1e. CTRL+Click footer, Brush tool, (bit smaller… 65px), deslect. nudge down 1 pixel.
Handled that alright? It’s just the same as for the the header, so if you’re stuck just use the steps for the header.Your footer should look like this now. You can close your footer group for some space now.
So. OK. Now let’s get started. For the purpose of this tutorial, we’ll be using images i give you So download this image to your computer.
Download first image
Open this image in photoshop. Now we’re gonna make it slightly more lively, just in colour. Nothing much.
In the layers palette, click the little black & white circle and create a Color Balance layer. Use these.
Now your image should look more colourful and lively, merge the two layers (CTRL+E) and save it (CTRL+S). Now select all (CTRL+A). and copy (CTRL+C). (yes, lots of control.)
Go back to your casino layout. Click on your promotions layer to make it active. Now CTRL+click on your promotions layer to select it.
Now press CTRL+SHIFT+V or Edit > paste into. This will paste your picture into the size of the promotions layer.
This is the tricky part, to explain at least. Hit +CTRL+T on your new image layer to bring up the free transform. Now grab a corner, and while holding shift start dragging it inside to make it smaller. Don’t make it too small. For the purpose of this tutorial, you should definitely re-size it to about the size i’m doing. Here’s what re-sized it to. Note how i moved it to the right (do that). To move it, just grab your move tool and in the layer palette, click the image of the image (lol), not the mask.

So, you should aim for this. Note the white space on the left, that’s the rest of the promotions layer which we’re gonna fill with another picture now.
Okay, we’ve got space now on the left. Or we should So. Download this picture.
Open up the picture in phtoshop, and add a color balance to this one too.
Merge it. Save it. Copy it. Go to your casino. No wait don’t, stay here and do the tutorial!
Again CTRL+Click the promotions layer, paste into. Now you can resize this one too (CTRL+T), but just a little.
Place it to the left. You should aim for something like this. (trust me, you should.)
Ooookay. Now. First things last™. Move your Background layer above your promotions, and your two images.
Create a new layer, above your images, but below your your background. Name it Top 10.
Take your rec. marquee tool and use these.
Click canvas to bring up selection and fill it in with anything, deselect. Blending options:

(Again, some gradients show Reverse on, maybe you don’t need it. Just make sure they look like the ones in the screens. ie: the dark colour on the right, the light on the left, etc.)
Just take your move tool and move this fella over the top pictures, where they meet each other. You should have something like this.
Now create a new layer, don’t need to name it. Grab your rectangular marquee tool and use a length of like 300px and a height of 15px. Fill in the selection with #3b550c. Create a new layer, and draw a straight line with the pencil tool (hold shift). Move it to the top of that green rectangle you just created. Create another new layer and use the same rec. marquee settings and fill it in with #d5fa70.
Move this lighter green layer right under the dark green one. Everything should be touching each other. Now merge these layers.
Set the opacity of this new layer to 30%. Now what you want to do is duplicate this layer and move it right under the first one so that they’re touching. What you want to have it 10 lines (hence the Top 10). When you have 10 lines, merge them together Move them over your Top 10 layer and CTRL+Click your Top 10 layer. Not hit CTRL+SHIFT+I to inverse the selection and hit delete/backspace. This will delete what’s outside of the top 10 layer. You should have this.
Create a new group, name it Red Bar, also create a layer called Red Bar inside the group. Place the group above the Background layer. Select the Red Bar layer Grab the rec. marquee and use these.
Bring up the selection, fill it in and deselect. Use these.
Now we’ll add that pattern again. So create a new layer, name it pattern. Set the opacity to 30%. CTRL+Click the red bar layer. Fill in the selection with pattern, deselect. But you don’t need to chop off the top this time.
Create a new layer again, name it gradient. Now set your foreground colour to#211c1c (for the luls). CTRL+Click the red bar layer again. Grab a smaller brush, like 13px. and use the same technique as the footer and header.
Now go to the blending options for the gradient layer and use these.
Move this group (with the red bar, pattern, and gradient layers inside) so that it sits on top of the background layer and the two images. Like so. Also note how your red bar should look like. You can close the group.
Alright now we’re gonna be doing the menu. This may get tricky for the ones who are not too good with photoshop. I’ll try and explain what’s happening here. Okay.
Create a new group, name it. Menu.
Create a new layer and name it Red. Take the rounded rectangle tool and use these.

Now click on your canvas to bring up the shape. Take your Direct Selection Tool. (It’s the one which looks like a white arrow, after the text tool).
Bit of shape shiftingz now. So. With your direct selection tool, click the shape. And then click the point right to the left, in the middle.
Hold shift and hit your left arrow key one time. To nudge it left 10 pixels.
Now click the point right above it, and while holding shift, press your left arrow key 5 times.
Do the same for the right hand side, except you nudge them with your right arrow key.
When you’ve done that and have your shape, with the direct selection tool, right click inside the shape and select Make selection. Press OK on the next dialogue.
Fill this in with white, and deselect. Grab your move tool, and move this at the top, but not exactly centered. Now, uh. You need to nudge it up (top arrow key on your keyboard) so that 3 pixels are outside of the canvas. I’ll take two screens to show you how it is when it’s fully inside the canvas and when 3 pixels are out (like we want it).Inside:

Outside:

Uh, yeah so the screens don’t help much… so.. JUST NUDGE IT UP THREE PIXELS OUTSIDE, OKAY!?
Go to blending options and use these.

To get this.
Now create a new layer and name it gradient. You’ve guessed it. Get hold of your brush tool. Size 35px. Also set your foreground colour to #b72736.
CTRL+Click your Red layer to select it, and then draw a straight line with your brush (hold shift). You want something which looks like this.
When you’re happy with your “gradient”. Go to the blending options for the gradient layer.

This should add a nice effect to your menu, which in the end should look like this.
Now you do the menu like you wish. I’m just going to show you how to do the other part of the menu to the left (the gold one). The technique is the same for the blue and green parts of it.
Duplicate your Red layer and name it Gold. Move this layer under your Red layer, in the layers palette.
Go to the blending options and use these.
Duplicate the gradient layer. Name it Gradient Gold. Move this under the Red layer but above the Gold layer.
Go to blending options.

(Note that i didn’t include the inner shadow, because we duplicated the gradient layer which already had it. Keep it on.)
Now grab your move tool. Select your Gold layer, hold shift and press on your left arrow key 8 times to move it left 80 pixels. Do the same for the Gold Gradient layer.
Now CTRL+Click your Red layer to select it. Click your Gold layer in the layers palette to make it active. Now hit delete or backspace on your keyboard to delete what’s not visible. We did this so that the drop shadows don’t overlap. Notice how it’s darker before we deleted the hidden parts of the Gold layer.
You should have something close to this now.
So just use the same techniques if you want to add more ‘tabs’ to the menu, like i did.
Okay now we’re just going to create some boxes where online casinos usually put some things such as “How To play”, “Most Popular Games”, “Download Client”, etc.
So create a new group and name it How2Play.
Create a new layer, name it how2play. Now take your rec. marquee and use these.
Fill this layer in with any colour, and go to the blending options. (I’m not going to repeat to “click canvas, fill, deselect, etc for all these boxes…)
OK. Now, as seen in my other tutorials, notably in my simple portfolio tutorial, we can see that stroke is not perfect. (hmm… what?). Well, zoom in on your box, to one of the corners. What do you see? Wait i’ll show you.
See that little dark pixel? We don’t want that. When zoomed out, it looks like it’s not a sharp edge. So. stay zoomed in. Create a new layer, name it Fix, or whatever floats your boat. Now take the Eyedropper Tool (I) and select that light yellow colour next to the dark pixel. Next grab your pencil tool, get a 1px brush and click on that dark pixel. You should now have this.
Do this for all other 3 corners
Now close the group, and click it to active it. Grab your move tool and move it so that is it 10 pixels from the left, and 10 pixels from the Red Bar. As so
New group, name it Top Games. New layer, name it Top Games. Rec. Marquee, use these.
Fill this in any colour and hit us up with the blending options.
Now same problem again. Zoom in, but this time we also have the inner shadow to fix.

So using the same technique as before, create a new layer and get your eyedropper to select the light grey inner shadow and fix it. Also fix the stroke of course, all corners, please.
Now is the time to add some lines using the same techniques i showed you for the Top 10 layer.
Close the group, and grab your move tool to move this 10 pixels to the right of the How2Play box and 10 pixels from the red bar, as so.
New group, name it Win Rate. New layer, name it Win Rate. Rec. Marquee, use these.
Fill this this any colour, copy the layer style of the Top Games layer. (Right click on it in the layers palette) And paste it onto the Win Rate layer (Right click on it in the layers palette).
Zoom in, fix the corners.
Move it 10 pixels to the right of the Top Games layer. It should sit perfectly 10 pixels away from the Top Games and the right edge. As so.
Create a new group ( ) name it Download, new layer… rec. marquee… (yes i’m as tired as you )
Fill it in and use these.
Don’t go yet, you don’t want to forget to fix the corners.
Move this to the right of Top Games and under Win Rate.
Phew! That’s done.. thank god for that. Well.. at this stage the layout is pretty much finished. All that’s needed now is to add some text, some other little details etc and it’s finished!
I’ll be guiding you through a few of them, but you’ll have to do the rest yourself! As always, experiment!
So, the most import part… what’s that? The logo! Create a new layer, above everything else.
So basicaly it’s up to you. You have to get creative. Get a suiting font for a casino. I used Century Gothic. Play around and place it like you wish. I’ll show you mine now so that you can get some ideas.
Put a little tag line under it to make it look professional, and you’re done! You can also add a line a the bottom. I’ll tell you how to do that too.

So to achieve that effect, use these blending options on your text.
To draw a line like mine under the logo. Draw a selection a few pixels high and about the same length as the size of your text. Then add a layer mak to that layer. Fill in the mask with black so that the layer isn’t visible anymore.
Now grab your gradient tool and use these.

Remember where the centre of your line was and click there, holding shift drag the gradient towards the right or left, but not too much. The more you drag the less the bar will be faded out. Play around till you find something you like. Use the screenshot of my logo for reference.
Once you have your logo done, you’re basically done (yes, you can be done twice, or more). I put a bit 98.7% in the Win Rate box.
Just copy the layer style of the logo i just gave you, and add an outer glow.

To get something like this in the end.
Add some text and a promotion on the Roulette. I again used the same style, and gave an outerglow. The text at the top if simply a drop shadow.

Also the picture with the people is a comon one in online casinos to show offers.
I used the same style again, but changed the colours of the gradients and gave them outer glows.
You can also seperate the links on your menu with trendy inset seperators. To do this zoom in your menu. Create a new layer, grab your pencil tool and draw two lines like this.

The first line is #5d1017 and the second i #a63d48
Merge the two (if you drew them on seperate layers) and add a layer mask. use the same technique as for the line in the logo. Fill it in with black so that the serpator is not visible anymore. Use the same gradient i showed you. Start from the centre and this time drag up or down. You want something like this.
Type in your menu links, leaving some space. Then duplicate the seperators and place them in between. Your menu is done!
Next continue filling in your boxes and your layout with various props. It’s up to you if you want to fill them. I usually do it because it just looks better, and it also gives me an idea of what it could look like if it really had content inside.
Looks like we’ve reached the 100th step! Well this is fake, because i’m just showing you what i came up with! Ah but wait! It’s a valid step, because it can help you determine what you want to put on the layout, where to place it, etc!
Click for full size!

There you have it! Your very own online casino layout! I hope you enjoyed this tutorial! I certainly put a lot of effort into it.
It took me a good 10 hours (including toilet breaks ) to do create it. And well 5 hours to type it all up.. so! I do hope you can put all this to good use, and that you’ve learned something!

Have fun, and hope to see you again soon for some more crazy tutorial action!

Copyright notice: I do not claim ownership of the images of the roulette (royale roulette) and the people at the table (€1500 free) used in this tutorial. These images are copyright of their respective owners.

Transparent Backgrounds

Soushi — Thu, 30 Oct 2008 17:28:00 +0000

Save your images, buttons, etc with transparent backgrounds!

Hey there fellas!

Alright, I’ve had one or two comments from people regarding the Stylish Button Tutorial. People were wondering how they could save the button and actually use it, and using it usually means you’ll want a transparent background so that you can fit it on any colour background you have.

In this tutorial, i will teach you how to crop an image, more specifically a button and then save it with a transparent background.
Please note this is a very basic tutorial for those who are unsure on how to do this, if you already know how to do this, then why are you here ?!

Let’s get started shall we

Alright, you want to crop and save your image don’t you? So open up your PSD with the graphic you created. I’ll be working with the stylish button i created in a previous tutorial.
Note: Oh yeah before we go on, i’m not teaching you how to get rid of a background on an image which already has a background. That’s something different. I’m teaching you how to save your image which you probably created in photoshop and want to use on the web.
Now, when i created my canvas to work on my button, i used a transparent background.

I recommend selecting transparent as your background on every canvas you create, so that you don’t have to mess around deleting layers and what not if you want a transparent background or a different coloured background.
Now if you have selected white as your background when you created your canvas, you should have a layer called Background which is locked.
If you do have this layer, then simply delete this layer. Note that you need to have other layers in your layers palette in order to be able to delete the Background layer, but as you should be working on your image which you want to get a transparent background on, i suppose you have other layers.
Now what? Well you should have a transparent background. Unless you created other layers on top of the Background layer and filled them. If so, delete them. If you don’t know, a transparent background looks like this.

You’ll know your button/image is on a transparent background if you have something which looks like above.
Now, my canvas is 600×500, but i don’t want that. So what i’m going to do is grab my rectangular marquee tool. Yes, grab your rectangular marquee tool
What we’re going to do is narrow down the canvas so that it is just a few pixels larger than our button. This is important if you don’t want your image to be hard to manipulate on your website.
Now on my button, i also have a reflection. I need to take it into account when cropping.
So zoom in to make the task easier, and draw a selection around your image just a little larger. Actually, if your image has sharp edges then you can cut the selection right down to the sides of the image, but as i have some soft edges because of the outer glow i decided to let the selection be a little wider.

Notice how i included the reflection in the selection. By the way ignore the grey background, i just reactivated my background layer so that i could see the reflection more easily.
Now with your selection active and your transparent background, go to Image > Crop.
My canvas is now roughly the size of the button.
Now this is the crucial part. Go to File >Save For Web & Devices… (Photoshop CS3, may be called slightly different in earlier versions).
You need to save your image as either a GIF or a PNG.

If you have an image which has perfectly sharp edges without a drop shadow, or an outerglow and it is not extremely detailed you should save it as a GIF.

However, as my button HAS got outerglow, and a reflection, the GIF will not work. Look what happens:

The rest of the background is transparent, but the area where there is the outer glow and reflection have a white background automatically added.

So, if your image has much detail, and/or has outer glows, reflections, soft edges, shadows etc, save as PNG!

Save as PNG-24 for maximum quality. The filesize should not be too significant since Photoshop does try and optimise it for web use.
You should now have a button with a perfectly transparent background! Here is the button i was working on in this tutorial, saved as a PNG.

I hope this has helped out the people who were unsure on how to save images with a transparent background! It’s really useful when saving for the web. Especially for forum signatures and buttons etc!

Cya

Fresh Layout

Soushi — Fri, 03 Oct 2008 14:59:53 +0000

Create a nice & fresh layout for a personal page, or anything else!

Hey there! So today we’re back in business with a new web layout tutorial. This time we’re gonna be working on a nice and colourful layout, moving on from the dark themed layouts. This one looks nice and fresh and could easily theme a little blog or personal site.

Ah yes, something i’d like to mention. I mainly create web layout tutorials, and tutorials in general so that people can get working with Photoshop, get some ideas, inspiration etc. That means that i’m not really going to teach you how to get these layouts to work. This is a Photoshop Tutorial site. So if you can’t code these layouts at the end of making it, then sorry but i can’t help you. I’m actually not the best coder there is, i get along so coming here for help isn’t the wisest idea! As i said before, if you think it’s useless to create something then not use it, then so be it. What about all those tutorials teaching you to create a company’s logo or something? You’re going to put a trademark logo in your website’s header? No, you’ve read that tutorial so that you could see the process of it being made, how to create certain effects, etc. That’s what tutorials are about.

Anyway, that’s that sorted, let’s get started shall we?

As always, let’s give ourselves some space and create a new document; 800×600.
Fill in your background with white or black, you can name this layer Background if you wish, hit the blending options for that layer. We’ll add a nice gradient.
Create a new layer, name it Content and grab the rounded rectangle tool, use these settings.
Now click on the canvas to bring up the shape. now right click inside the shape and in the menu select Make Selection.
While on the Content layer, fill in this selection with white. Deselect.
Now still working on your Content layer, hit CTRL+A to select the whole canvas.
Press CTRL+X to cut the shape we just created, and now hit CTRL+V to paste it back in.
The shape should now be perfectly centred.
Get a hold of your rectangular marquee tool. now we want to square off the 3 edges we don’t want, to do that we create a selection and then fill this selection in with white.

So create a selection like this: That’s the bottom left corner of the shape, drag the selection right to the bottom like i did.

Now fill in the selection with white, and we get:
Now do this for the Top Right and Bottom Right corners too. Make sure you fill in the bottom too. You should now have something which looks like this:
Go to the blending options for the Content layer and use these.
Okay, duplicate the Content layer and name it “Content Back”. place it under the Content layer in the layers palette.
Go to the blending options for the Content Back layer and use the following.
Get your Move Tool, now hold Shift. Press the Up arrow on your Keyboard 4 times to nudge it up 40 pixels
Hold Shift again, and now hit the Left arrow once to nudge it left 10 pixels. Release Shift and press the Left arrow five more times to nudge it a further 5 pixels. Now, you’ll have this.
You can see that the edges at the bottom left and top right are missing, on your Content back layer just grab your rectangular marquee tool and create selections and fill these in with white so that that all edges are aligned.
Create selections like these, note how they are within the strokes of the Content and Content Back layers.

To get something like:
Get your move tool again, and select your Content Layer. Holding Shift nudge it down (down arrow) 30 pixels. (3 times on your down arrow key.) Do these same for the Content Back layer. We’ll now have some space at the top for the navigation.
Before we get on to that, select everything: CTRL+A and go to Image> Crop. Deselect. Just so the gradients are correct.
On to the navigation now, create a new layer and name it Menu. Get your rounded rectangle tool and use the following settings.
Click on the canvas to bring up the shape, right click inside the shape and choose Make Selection.
Fill this in with white.
Now, as we did with the Content layer, we’re gonna square off the two bottom edges. So grab your rectangular marquee tool and square ‘em off.
Now judge this down so that it’s comfortable sitting on the Content Back layer as so.
Duplicate this layer. Grab your move tool, hold shift and nudge it 9 times to the right. Then release shift and nudge it two more pixels. You’ll get this.
Now duplicate this layer and nudge it again. For the purpose of the tutorial we’re gonna create 5 links so get duplicating! You’ll end up with something which looks close to this. Note: Move them all around left or right if they overlap the edge.
Go back to the first menu link we created, should be called the Menu layer. Go to blending options.
Now right click your Menu layer in the layers palette and choose Copy Layer style. Now right click and Paste Layer Style on all the other menu links. Now we’ll change all the gradient colours, so go back to the second link and use this, then the third gradient for the third link, etc. You get the idea.
You’ll now have a nice colourful menu!
Actually we’re soon done, just one more thing and then it’s the detail work.
Create a new layer and name it Text Area. Grab your rectangular tool and create a selection like. I didn’t mention a width or height because it’s up to you how wide you want the Text area to be really, i left space at the top and some to the left for additional things:
Fill this selection in with White. Now add a layer mask to this layer with the layer mask icon in the layers palette.
Set your foreground colour to Black, get the gradient tool and use these.
On your layer mask, hold Shift and drag a gradient like this. (Click at the top and drag towards the bottom).

You can play around for different types of fades, how much you want to chop off etc.
This is what i got.
You now have your layout done. However there’s a little thing that still wrong, have you noticed? No? Look at the Right, Top corner of the Content layer.

Hmm? What? Yes, it’s rounded. We’re gonna square it off. Yeah we’re squary people. Create a new layer, and name it, uh Square? Set your foreground colour to #3baaff
Zoom in on the evil corner, take your rectangular marquee tool and create a seleciton like this.
Fill it in with that blue we used, deselect. Set your foreground to white. Grab your pencil tool. Use a 1pixel brush size.
Now simply draw the missing stroke like this.
Zoom out, and admire the squariness!
Now you’re basically done. All that’s left to do is add your links, your content, a logo some stuff on the side if you left some room. And polish up a little if you need to!This is my final result. Note it’s a little larger than the one we made in the tutorial because i created a new one for the purpose of the tutorial. Note if you want to enlarge the width of the site it’s very simple, use the squaring off technique used on the corners to add extra width to the Content and Conten Back layer, and it’ll make it larger to your needs.
Click for Full View

As you can see i added the logo, some add to favourites links, some example text, lines in the background etc. I also added some stuff to the left. If you want to know how to do the Email Us letter than just let me know i’ll add it to the tutorial, although it’s very simple and done in a few steps.

I hope you enjoyed the tutorial and that it can give you some new ideas and inspiration!

Stylish Button

Soushi — Fri, 29 Aug 2008 15:58:23 +0000

Create a stylish button to use in your website.

Hey there, today we’re gonna be doing a stylish button that you’ve probably seen quite a few times around the web now, but maybe you’re not sure on all the steps to do to create one, so here we are.
This tutorial resembles my Orb tutorial a little, and it includes my reflection tutorial.

Read my tutorial on how to save your button/images with a transparent background!

Let’s get started

Open up Photoshop (yes you need to open Photoshop!), create a new canvas, i used 600×500 to give myself some breathing room, you can make it smaller if you wish.
Fill in your background with a colour your eyes are comfortable to work on, i used a grey gradient, this step is not important, you can just fill it in white.
Create a new layer and name it Button. Grab your rounded rectangle tool and use these settings.
Click on your canvas to bring up the shape, now right click inside the shape and select “Make Selection”. Now fill this in with white. Deselect, go to the blending options for this layer and use the following.
You should now have something which looks pretty damn close to this!
Now create a new layer and name it Glow. Set your foreground colour to #9fd3ff
Grab your brush tool, select a Soft, Round brush at size 27px.
In your layers palette, CTRL+Click on your Button layer to select it. Go on your Glow layer, and while holding shift, draw a straight line from left to right inside the selection so that you have a kind of glow at the bottom. When brushing inside the selection, you want to have about half or less of the brush inside the selection and the rest outside, like shown here:
Deselect, and you should have something which looks like this.
Now CTRL+Click your Button layer again, and create a new layer. Name it Highlight.
On this new layer, fill in the selection with white. Deselect.
Now use your rectangular marquee tool to create a selection like this.
When you have the selection, hit the Delete key on your keyboard (You can also use Backspace, thanks Richard!). Deselect. Lower the opacity of the Highlight layer to 20%. You should have something like this.
Now create a new Group (use the New Group icon in the layers palette). Put your three layers inside it (Button, Glow, Highlight).
Right click on the group and select Duplicate Group. Now while having this group selected, hit CTRL+E to merge all the layers in this group. You’ll now have a single layer, move it under your first group in your layers palette.
Go to Edit > Transform > Flip Vertical. Now move your layer to this position.
Add a layer mask to this layer and grab your gradient tool, set your foreground to black and use these.
Hold shift, and drag a gradient like this and let go (drag from the bottom to the top).
You’ll now have a nice reflection. You can play around with the gradient if you want more or less of the reflection to be visible. You can also play with the layer opacity. This is what i got.
Your button is done! But i’ll just give you the blending options i used for the text too, because i’m like that!
I used the font Eras Bold ITC, size 15pt. You can use another font such as Arial if you don’t have this font. Type your desired text, and use these blending options.
You now have a finished button along with a text that goes with it!

Read my tutorial on how to save your button/images with a transparent background!

Hope it can come in useful to you! Get experimenting!

Smooth White

Soushi — Thu, 28 Aug 2008 19:33:34 +0000

Create a smooth white web design.
Tutorial Updated: 27/12/08 (added missing inner shadow)

Alright, today we’re gonna be working on an once modern website layout.

Let’s start off by creating a new canvas. I usually like to start off at 800×600, but for the purpose of the tutorial we’ll use 700×600px.
Now fill in your layer with white (if you created a transparent canvas). You can do this by flicking white as your Background colour and then press CTRL+Backspace.
Create a new layer name it “header”.
Select the Rectangular Marquee Tool and use these settings.
Now click on the canvas to bring up your selection and move it so that it is inside the canvas. Fill in the selection with black.
Deselect the selection by pressing CTRL+D.
Now press CTRL+A to select all your canvas. Now press CTRL+X to cut your header.
Press CTRL+V to paste in your header block. It should now be exactly in the center of your canvas. Press V to bring up the Move Tool.
Now hold Shift and press your Up arrow on your keyboard a few times to move the box 10 pixels each time. When you arrive near the top release shift and move it just using the Up arrow.
Create a new layer and name it “menu”. Select the rectangular marquee tool again and use these settings.
Now do the same as for the header. Fill the selection with black, and bring it just under the header box so that they are just touching. You should now have what looks like a larger rectangle.
Create a new layer, name it “bar” and again select the rectangular marquee tool. Use these settings.
Fill the selection with black and move it to the left of the header and menu.
Next duplicate that later by pressing CTRL+J whilst having the “bar” layer selected. You can name this layer “bar2”, it’s up to you.
Now move this bar to the right of the header and menu. You should now have something like this.
Now we’re going to start giving the menu and the bars some looks because at the moment it looks pretty dull!
Select your “bar” layer and in the layer palette either click the little “fx” button and choose gradient, or just right click the layer and choose “blending options”
Go to the gradient tab, and use these settings.When you insert the grey colour in the gradient, make sure you select the colour, then click the little point in the middle of the gradient like shown above. Set this point to 40%.
Right click the “bar” layer and select copy layer style
Right click your second bar (“bar2”) and select apply layer style
Now on layer “bar2” click the gradient overlay style. Now check the Reverse box and close.
Right click your “menu” layer and select apply layer style.
You should now have something looking along those lines.
What we’re going to do now is actually just give our header some colour. Now you may deviate from the tutorial and use an image or something of your own. Because of a lack of ideas for a header at the moment of writing this tutorial (I actually spent a good 45 minutes wondering what to use), I’m just going to use a simple gradient. You can use this too if you’ve got nothing to use for the moment.
Select the “header” layer and go to the blending options. Select gradient overlay and use any colour you like. I’ll be using blue for my example.
Stroke:

Gradient:
You should now have something which looks like this.
Okay it all looks a little more joyful right now so we’re going to start adding in the header piece and footer.
Now we’re going to quickly create a layer which will help us out in the next few steps. So just create a layer, you don’t have to name it anything. Now select the pencil too, or the brush tool. Select a small brush size like 1px or 2px.
Now on this layer just hold shift and draw a vertical line a few centimetres long in your canvas.
Do the centering trick: Select it all using CTRL+A then cut it with CTRL+X, now paste it with CTRL+V. It will now be perfectly centred.
Now select the move tool and move up it up around the header area by holding shift and using the Up arrow key. DON’T MOVE IT LEFT OR RIGHT, JUST UP! Now leave it here for now.
Create a new layer and name it “hpiece”.
Select the Rounded Rectangle Tool. Now go to the top toolbar and use exactly everything you see in this picture.
Now you want and click and hold your left mouse button so that you can move the rounded rectangle outline around. Move it to the header area, try and move it so that it fits between the two bars. It doesn’t need to be perfect, if it’s one or two pixels out don’t worry. This will help us in the next step.Here is a screenshot to help you out if you got confused. I’ve put the rounded rectangle between the bars, and we have that black line in the center we made earlier.
Right click the Pen Tool and select the Add Anchor Point Tool. Now, this is where our black line helps us out.
Click on the rounded rectangle line and the black line meet. You should now have a fairly centred point.
Right click the Pen Tool again and select the Remove Anchor Point Tool.
Click and remove the two circled points in the screenshot.
Now right click the Path Selection Tool (the one which looks like a mouse pointer), and choose the Direct Selection Tool (white one).
Select the point shown in the screenshot. We’re gonna move this point now. With the direct selection tool still selected, hold shift and press the Down arrow 3 times. This will nudge our point 30 pixels down.
Now do this for the same point to the right.
Make sure you have your “hpiece” layer selected. Right click within the lines of the rounded rectangle and select Make selection… and press OK in the next dialogue.
Now fill this layer in with black, so we can see it on the white background.
Use CTRL+D to deselect. You can now delete that black line we created before.
We’re going to give that layer some style now. Right click the “menu” layer and copy layer style.
Paste the style on the “hpiece” layer, and open up the blending options.
Then go to the inner shadow tab, and add this inner shadow.
Now select the move tool, and use the keyboard arrows to nudge the “hpiece” layer left or right so that it is perfectly within the two bars.
If you’ve done this correctly, the stroke from the “hpiece” layer should overlap perfectly on the strokes from the two bars. If not, do the rounded rectangle steps again. Making sure you: Add the point first, remove the two points, and then nudge the two other points. While writing this tutorial I actually encountered this problem and by doing it again it worked out.
Now this is up to your own liking, it’s perfectly centred, all that is left is to nudge it up. So with the move tool and the arrow keys, nudge it up to your liking. This is how I placed mine.
Also please note, if your “hpeice” appears darker than mine, it is probably because of the gradient. Make sure that the white part of the gradient faces downwards. If it doesn’t simply hit the Reverse box.
Alright we’ve got quite a bit done now, but we’re not over yet. We still need to create the footer.
Create a new layer and name it “footer”. Now select the rounded rectangle tool and use these settings.
Click on the canvas to create your rounded rectangle outline. Now select the add anchor point tool. Now add two points at the top like shown on the screenshot.
Now select the direct selection tool and select the point to the right. Hold shift and nudge it down 2 times (20 pixels) Do that for the other two points on the right.
Whilst having your “footer” layer selected, right click in the rectangle and select Make selection… Now fill this layer in the black. This is what you should have.
Place the layer between the two bars and nudge it down till the rounded edges are out of the canvas.
Then you want to select the rectangular marquee tool and draw a box around the rounded edges at the top of the rounded rectangle. Fill them in with black; this will lead you with straight edges.
Take a look at the screenshot to see what you should have.
Now right click your “hpiece” layer and copy layer style. Paste the style on your “footer” layer and open the blending options. Go to the inner shadow and use these settings.
Now create a new layer called “footerbar” and place it under your “footer” layer.
Grab your rectangular marquee tool and draw a rectangle that is at least as long as the space that we made in the “footer”.
Right click the header and copy layer style. Paste the style on the “footerbar”. Now you have a blue gradient on your bar, we’ll add a stroke and some shine – go to blending options and use these.
Now move that bar in place, aligning the strokes with the stroke of the “footer” and “bar2”
CTRL+Click in the layer palette on your “footer” layer to select it.
Now select your “footerbar” layer by clicking on it in the palette and hit Delete.
You should have something which looks like this now. Notice how all the strokes are overlapping and fitting perfectly.
Now select your “hpiece” layer and put it above all layers in the layer palette.
Create a new layer and name it “bevel”. Now select the pencil tool, and while holding shift – draw a white, vertical, 1pixel line going from top to bottom of the canvas.
Use the move tool and your arrow keys to nudge it to the left side of the “bar” layer. This will create a bevel for the bar. Here is a screenshot to show you where to put it if you don’t understand.
Now duplicate that letter using CTRL+J, and put it on the right bar, on the right side of the bar.
Now merge the two layers, and set the opacity to 75%.
Create a new layer and name it “gradient”.
Grab your rectangular marquee tool and use these settings to draw a rectangle.
Now use the gradient tool to draw a black-to-white gradient inside the selection. Drag the gradient from the top of the selection to the bottom.
Now use the move tool and your keyboard arrows to move it just under the menu. You can leave it one pixel away to create another kind of effect.
Lower the opacity to 10%, here’s what you should have now.
You now have your basic layout done! All that’s left to do is add in all the text for the logo, the menu, the footer copyright, the content, and all the other little details you may want to add to your menu or header!
To create the effect used in the menu, type your links using the colour #787878.
Next duplicate your layer. Now colour your original text in white using colour overlay in blending options.
Grab the move tool, and with the arrow keys, nudge it right one time, and down one time.
You’re done! Here’s what I came up with in the end.

Fonts Used:
Logo: Nasalization
Content: Verdana
Menu/Footer: Silkscreen
You’ll find all these fonts easily at dafont.com.

PSP Ready

Soushi — Mon, 25 Aug 2008 19:56:32 +0000

Create a Sony PSP Ready web layout in Photoshop.

Alright, how’s it going? Today we’re gonna be creating ourselves a Sony PSP Ready Website Layout. Okay, kinda wordy. So what does this mean? Well it’s not rocket science really, it’s a web layout which is ready for the PSP.

What? Ah okay, well basically it means that if you follow the guidelines in this tutorial when creating your layout, you’ll have a website which PERFECTLY fits in your PSP browser. Actually i’m not sure if the new PSPs (Slim & Light and the newer one) have larger screen, but i’m working off the “Fat PSP”.

A PSP ready website is cool if you want to allow people to also be able to access your site’s content via their PSP, without having to scroll ages to the right or left. It’s also interesting if of course, you want to make a website which’s sole purpose is to be viewed on the PSP. It looks damn good too when you view it on your PSP trust me . Let’s get started!

Create a new canvas, 480×400 pixels.
Fill in your background layer with white.
Create a new layer, name it Header and get hold of the rectangular marquee tool. Use these settings.
Fill this selection in black, deselect and move it to the top of the canvas.
Create a new layer and name it Menu. Grab the rec. marquee tool again and use these.
Fill the selection in with black, deselect and move it just under the header layer so that they are touching.
New layer, name it Content, get your rec. marquee tool, use these.
Fill in with black, deselect, bring right under the Menu layer.
New layer, name it Footer, use rec. marquee tool, use these.
Fill in with black, deselect, place it under the Content. Your canvas should now be filled with black.
In the layers palette, move your Content layer just beneath the Menu layer.
Go to your header layer and bring up the blending options, use these settings.
Next go to your Menu layer, use these blending options.
Go to your Content layer, add a colour overlay:
Finally go to your Footer layer and use these.
Now get your Move Tool, and move the Footer layer 1 pixel up using the Up arrow key on your keyboard. This is so the stroke is inside the canvas. After all these steps (including this one) you should have something like this.
You’ve got your basic layout done, now we’re going to add all the little details to spice it all up!
So type your website name, i used the font Trebuchet MS, bold size 24pt.
Add these blending options to it:
Create a new layer, name it logobg and select the rounded rectangle tool. Now draw a rectangle which is a bit longer than your text. Optionally you can leave some space like i did as i will be adding a little logo.

Go to the blending options and use these settings.
Now duplicate your logobg layer, right click it in the layer palette and choose Clear Layer Style. Now set the Fill Opacity to 0%, go to blending options and add a stroke.
You should have something which looks like this, note how i left space when i created the rounded rectangle to add my logo.
Next up is your menu, i used Trebuchet MS once again, all in capitals, size 8pt. Copy and paste the layer style from your website title to your menu links. I added some pins from the default shapes to make it more interesting.
Go to your Content layer, create a new layer above it, name it gradient. Now CTRL+Click your content layer to select it. Set your foreground colour to black. Grab your gradient tool, use these settings.
Now inside your selection, drag your gradient down about a centimetre or less. You should have a black gradient of your content layer now. Deselect and get your move tool. Nudge it down a few pixels so that you can see a line from the content layer, then lower the opacity to 20%. You should have something like this.
And uh.. you’re done! All you need to do now is add your content (to see what it can look like). You can of course also mess around with the colours, the blending options etc. The key is to experiment. Here’s my final result - Don’t get caried away, this website is purely fictional! At the moment anyway

Hints/Info:
If you follow this tutorial, and create a website for the PSP which is exactly 480px long, you’ll have a website which fits PERFECTLY on your PSP’s browser.
At this width it will be impossible to scroll left or right (which is good, it means the website is not running off the viewable area).

When coding your layout, make sure you set the position of the layout (in CSS i think) to absolute. As a rule of thumb you want your layout to be TOUCHING the LEFT and TOP sides of your web browser (when you preview it on your PC). If it doesn’t touch the left and top sides, most likely you’ll have the website being to the right a little in your PSP’s browser. Causing you to scroll right to see the rest of the layout.

That’s all really, the tutorial was pretty simple again, but i also wanted to share to people about creating a PSP ready website. That means you need a width of 480px, and need an absolute position. I’ve seen PSP “ready” websites which claim they are, but frankly they’re not, you need to scroll left and right to see the content etc, it’s a mess.

Try not to get images which are too big in there too, that’s both in size (pixels) and size (kilobytes). The PSP’s cache is not very big and if your website is too heavy you might run out of memory and thus not be able to load all images. If you stick to the dimensions i used for the site (ie: 480×60px for the logo), and save the files as GIFs, you should be fine.

The PSP actually resizes it a little, so it looks even smaller when viewed in the PSP Browser, but trust me it looks really good! If you have time to spare then i recommend giving it a shot for the fun, because these little miniature websites look really cute haha! It’s not like on mobile WAP where you have 1kb images with white background and black text, here you have a rich coloured website, but mini! Haha. Maybe it’s me but yeah, these things are great!

Happy experimenting, and have fun!

WebHost Themed

Soushi — Sun, 17 Aug 2008 15:52:41 +0000

Create a simple design with a web hosting theme.

Hey there :pac: ! Today we’re going to be designing a website template, i think you guessed that. But i’d just like to mention that you could probably use this layout for another purpose than a web host. It’s not that evident it’s a web host layout so just keep in mind that i just theme this layout with web host elements. Such as a login and price plans. Let’s get to it!

Create a new canvas, 800×600.
Fill in your background layer with any colour, now go to blending options and add this gradient.
Create a new layer, name it header and select your rounded rectangle tool. Use these settings.
Bring up the shape on the canvas, right click inside the shape and select “Make Selection.”
Fill in this shape any colour, deselect, and use these blending options.
Centre this layer and move it near the top, you should have something like this.
Now create a new layer and name it content. Take you rounded rectangle tool and use these settings.

Right click inside to shape, choose “Make Selection”. Fill this layer in with white, deselect and use these blending options.
Move this layer so that it is aligned with the right side of the header layer. It should look like this.
Create a new layer, name it menu. Get ahold of you rounded rectangle tool and use these.
Bring up the shape and right click inside, choose “Make Selection”. Fill this layer in with any colour and deselect. Use these blending options.
Move this layer to the left of the header layer, yo should now have something which looks like this.
You’ve now got your basic layout. End of tutorial! Pat yourself on the back, you just did one of the hardest tutorials on the web. I’m kidding, we’ve got some details to put onto this, no?
We’re working on a web hosting theme layout, so what would be a web host without its pricing plans? Let’s get ‘em done.
Create a new layer, name it plan and get your rounded rectangle tool. Use these.
Click the canvas to bring up the shape, right click inside the shape and select “Make selection”. Now fill this in any colour, deselect and use these blending options.
Create a new layer, name it light. Get your pen tool, use these settings.
Draw a shape which looks something like this. It’s the part that’s over the box that’s important.
Close the path, and right click inside your shape. Select “Make Selection”. Fill this selection with white. Deselect.
Hold CTRL and click on your plan layer in the layer palette. This will bring up the selection of the plan layer.
In the menu at the top, go to Select > Modify > Contract. Use a setting of 1px.
Now hold CTRL+SHIFT and press i. This will inverse the selection.
Click your light layer in the layer palette to select it, and hit delete. This will remove all the white and leave only the light on the plan layer. Deselect and set the layer opacity to 30%. This is the result.
Grab this image and open it up in photoshop, copy it to your layout canvas and place it above your plan layer. Now place it where you want, i placed mine like this.
Now create a new group using the group icon in the layer palette. Put your plan, light, and pc layer inside it.
Right click your new group with the layers inside, and select duplicate.
Nudge this to the right of your current group, and go to your plan layer. We’re going to change the gradient colour.
Now duplicate your PC layer, and set the it to “Hue” (in the drop down box where it says Normal, in the layers palette.)
Zoom in, get your rectangular selection tool, do this selection on the duplicated layer and hit delete, deselect.
Bring up Hue & Saturation. (CTRL+U). Use these settings.
You should have a blue PC now, without the green light being blue either (that’s why we cut it out in step 28).
Now duplicate THIS group. With the blue plan layer and blue pc. Nudge it to the right, and we’re gonna again change the colour of the gradient of the new plan layer.
Now go the PC layer, but the duplicated one which is set to Hue. Bring up Hue & Saturation and use these settings.
You should now have these three plans I placed them at the bottom of the content layer.
Create a new layer and name it separator. Place it above your menu layer.
Set your foreground colour to #6bd0ff. Grab you pencil tool, use a 1 pixel brush and draw a line a little bit shorter than the menu layer. Then duplicate it and nudge it underneath. Use a colour overlay to colour the duplicated layer in #35a9f3. Merge the two layers.
You should have something like this.
Set your background colour to black and foreground to white. (Hit D and then X) grab the gradient tool and use this gradient.
Add a layer mask to your separator layer. Now with your gradient, while holding shift click in the middle of your separator layer and drag the gradient to erase the sides. It might take you a few tries to get the amount you want erased. Here’s what i got.
Now duplicate this layer, get your move tool and while holding shift press the down arrow 2 times to move it 30 pixels down. Duplicate it a many times as you need a link.
Now go back to one of your groups which has the plans, and duplicate a “light” layer. Move it above the menu layer and move it at the top. With your light layer and your menu separators you should have something like this.
Now you’re basically done, for real. All that’s left to do is add the menu links, company logo, and other things you want in. I added a login and donation section. I also filled in the price plans.
Then in the header you can again add the company logo and slogan, an advertisement, and also add the content to your content area, that’s it! (Click for full size)

That’s all i can teach you really, there’s nothing else to say about the links i added or the images. I’m sure you can figure that out yourself. The text in the content saying “Web Hosting” and “Our Plans” is a tutorial which you can find here.

Have fun!