Whiteshading Website Layout Page 2

Page: Previous 1 2 next

tip

Hold down shift + click to select a perfect circle

Now we are going to create those top circle decorations, first pull out the circular marquee tool and make a selection like so (be sure to make a new layer) :

It doesn’t matter where you make the circle on the screen just be sure to use the arrow keys to center the circle in the top center of the document and fill the circle with white, (make half of the circle off the screen like below):

Apply the following settings to the layer:

Now with that layer selected press ctrl+j to duplicate that layer, press the (v) key to bring out the movement tool and press shif+upkey on keyboard, to move the duplicated layer up a bit, repeat that process a third time to come out with this:

Next we are going to work on the Main Content Header Area, pull out the rounded rectangle tool and drag out a shape like so (note make sure your foreground color is white, I ctrl+clicked on the layer so you could see what the shape looked like). *BE SURE THIS IS ON A SEPERATE LAYER ABOVE THE MAIN CONTENT AREA

Apply the following settings to that layer:

Now in the maincontent area, you should have a kind of table cell with a dropshadow, if you got lost in where to position it take a look at the big picture below (click on it to enlarge it):

Good so far? Great! Now the next bit is a bit hard to explain so bear with me, pull out the marquee tool and set it’s feather (found in top left corner) to about 50, now create a marquee in the far right hand side of the screen positioned like the pic below.

Press delete a couple of times, this part is hard because you really just have to do it by eye, after you think you got it looking like the pic below, move the marquee to the bottom of the rounded rectangle and press delete a few more times; you can add some text to the top like I did

Now follow the exact same procedure with the side navigation, create a rounded rectangle in the right hand side of the screen, with the dropshadow settings below, pull out the marquee tool again with the feather set at 50 and delete the bottom area of the side navigation:

You can also add in some text like I did, also note that when I created the sidenavigation layer I positioned that layer over the white background and pressed ctrl+g to “mask” that layer.
Next we’re going to create the bottom grey part for the copyright information. pull out the marquee tool and draw a box in the bottom part of the document and fill it with #E2E2E2.

Now you are basically done, Add in some cool pictures and text and you’ve got yourself a slick looking website.

I poked around with the design a bit more and came out with, see what you can come up with!:

View full image

Page: Previous 1 2 next

Whiteshading Website Layout

Page: 1 2 next

Welcome to the tutorial Website Layout White Shadow style tutorial! We will learn how to create a website design like below:

View full image

First off create a new image using the following settings:

tip

remember that about 30% of website users still have their resolution at 800×600 pixels, it’s always good to design your sites under 800 pixels wide.

Now pull out the paintbucket tool and fill the background with #C09477

Create a new layer and make a marquee selection like below, fill that selection with white #FFFFFF

Now we are going to want to make a brown “shadow”, first ctrl+click on the layer with the white on it to select everything in that layer, then create a new layer and move that new layer underneath the white layer, go to Select > Modify > Expand and select 10 pixels

Now you have a bigger selection outside of the white part fill that with #B08469, Be sure that this layer is underneath the white layer, you should end up with this

Now before you do the next step you need to create a new image 3×3 pixels and transparent background, pull out the pencil tool and draw out this:

Go to Edit > Define Pattern, it doesn’t matter what it is named. Now back to the other document (the design) press ctrl on the layer with the brown shading to select it, then go to Select > Modify > Expand and set it to 5, press ok, now create a new layer and put it underneath the brown shading layer, press shift+backspace and in the dialouge that comes up choose your pattern:

Press ok and you should come out with this on both sides:

Now we are going to make the header of the site, make a new layer use the marquee tool to make a selection like below, fill it with white:

Bring up that layers style and apply the following dropshadow to it.

proceed to page 2 to learn how to design the rest of the site.

Page: 1 2 next

Displacement Mapping in Photoshop

We are going to be creating an image like below using a technique called displacement mapping.

tip

A displacement map allows you to wrap images or other content over a background image so they blend in with it

First off you are going to need to download the water background used in the tutorial in a .psd format, click Here to Download
now you are to need two documents with the water background in them so just copy the water texture, create a new document of the same size and paste it in that new document. While you are in the new

tip

Guassian Blur blends the document together so that when we do our displacement effect it wont be so drastic.

document go to filter > guassian blur and set the setting to about 1.0

Now go to File > Save and save that document (in .psd format) wherever you want on your hard-drive just remember where you save it too. Now go back to the other document, (without the gaussian blur) and type in whatever text you want, it’s best if you use a font that is thick and set to bold, below I used Placard Condensed, set to Bold, and at 72pt font you can use

tip

Having trouble getting the font size right? press ctrl+t with the text layer selected to get that font size just right!

whatever font you think looks cool though.

Now you need to Rasterize the text layer, Right click on the Layer with your text on it

tip

What Rasterizing does is basically make the text layer exactly like any other layer so you can do filters to it, you cannot edit text after you rasterize it.

and choose Rasterize Layer.
Now we are going to use the .psd file we saved earlier, first with the rasterized text layer selected go to Filter > Distort > Displace use the following settings

When it asks you to select a file, select the .psd file you saved earlier then press ok, if all goes well you should come out with this

Set the blending mode of that layer to Overlay and apply the following style settings to the layer

Which should result in

Hope you enjoyed the tutorial!

CSS Dropshadow

Objectives

You will learn some basic CSS principles and in the end create an easy and efficient way to add dropshadows to every image you add into your website.

Basic CSS usage
Create a dropshadow image in Photoshop

Difficulty: Advanced

Final Result

Alright so here is the idea, say you wanted to have an easy way to insert an image and make that image have a dropshadow. The image you see above was inserted with the following simple code:

Pretty easy, eh?

So to begin, open up your favorite image editor and create a transparent .gif dropshadow image (I use Photoshop throughout this tutorial).

In Photoshop first create a new image 80x80px with a transparent background. Then fill the top left corner with white

Apply the following settings:

And save the image for web (hotkey: ctrl+alt+shift+s) and

Tip:

If you don’t want to create the image yourself you can right click on the image below and choose ‘save image as’ then you can use that image to make 75×75 pixel images have dropshadows

save the image as a transparent gif, I saved it as ‘dropshadow.gif’

Now you need to get an image that is 75×75 pixels, I used the following image from Halo

Now for the part you’ve all been waiting for, the CSS. The following is the code for the id ‘Dropshadow’

#dropshadow{

background: url(‘dropshadow.gif’);

width: 80px;

height: 80px;

}

Insert that CSS in an external Stylesheet or in your inpage stylesheet

Next your going to need to insert the HTML from above

To come out with:

I hope you enjoyed the Tutorial, post any questions you have in the Forums

CSS Web Header Beginner Tutorial

One of many css tutorials for beginners

Welcome to the CSS Header Tutorial! Today we are going to be building a scalable cross platform header which will validate strict XHTML on W3C. Our finished design will look like this:

This CSS Web Header Tutorial is an excellent supplement to all of our photoshop tutorials.

Note: This Tutorial assumes you have a basic knowledge of HTML/CSS editing

Click image to preview CSS Header

Step 1: Your going to need to download all of the images that I use here:

Download CSS Header Files
(size 14.1KB files: index.html, headtop.png, logo.png)

Make sure you save all the files in the same directory!

Step 2: Your going to need to open a text editor (like Notepad Start – Run – Type Notepad) to edit your HTML and CSS create a file named index.html Tip: I personally use VIM as an editor.

Step 3: First of all we need to create the HTML of our website and assign all the various areas different ID’s

index.html

————————————

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>
<head>

<title>CSS Header</title>
</head>
<body>
<div id=”wrapper”>

</div>

<a href=”link”>Home</a> |
<a href=”link”>Download</a> | <a
href=”link”>More Links</a>

</div>

</div>
</div>

</body>

</html>

Lets break that down:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>

That bit of code declares your website as an XHTML website, which helps be more cross browser compatible (e.g. Internet Exploer/Firefox)

The rest of the code assigns the areas of your page to different ID’s so you can style them in CSS e.g.

Right now your website wont look like much so you will need to use CSS to design it

Open a new document and save it as style.css in the same directory as index.html

Let’s look at the coding for style.css

style.css

———————————-

body{

margin: 0;

padding: 0;

font-family: Verdana;

}

text-decoration: none;

color: #FFFFFF;

font-weight: bold;

}

#wrapper{

width: 100%;

background-image: url(‘headTop.png’);

background-repeat: repeat-x;

}

#header{

width: 80%;

height: 194px;

margin-left: auto;

margin-right: auto;

position: relative;
}

#logo{

float: left;

margin: 80px 0 0 0;

}

#mainMenu{

float:right;

margin: 160px 0 0 0;

color: #FFFFFF;

font-size: 11px;

}

Alright so we will look at it from the top, we first change the body attribute to have no margins or padding this allows the website to be Flush with the window, we also change the Font to Verdana

Next we change the appearance of the links (the a attribute) set it text-decoration to none (no underline) color to #FFFFFF (white) and it’s weight to bold

Now the wrapper is quite interesting. we set the width to 100% of the entire page, set the background image to ‘headTop.png’ and the background-repeat to repeat-x. what that does is makes the background only repeat on the x (horizontal) axis so that it doesn’t spread across the entire page, it only spreads on top. Thats a pretty nifty attribute

Hopefully you are noticing how the #idName controls the id that’s in the HTML e.g. #wrapper controls the div that was given the id of wrapper

The next id we change is the header Which is where the logo and the links are. The width is set to 80% of the page height to 194 pixels (the height of the background image) notice the margin-left and margin-right are set to auto, this is what causes them to center.

Now for the Logo it is set to float: left, this allows it to align to the left of the div without ‘pushing’ things down. I used CSS Shorthand on the margins like this margin: 80px 0 0 0, what does that mean? Well it’s like this margin: top margin#, right margin#, bottom margin#, left margin#. So essentially I only set the Top Margin to 80 pixels which pushes the logo down 80 pixels.

For the Main Menu you do essentially the same thing as the Logo except float it to the right and push it down a bit more pixels.

Don’t forget to link the HTML file to the CSS file like so

Goes into

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>
<head>

<title>CSS Header</title>
</head>
<body>

My advice is to use this tutorial and then mess around with the settings until you figure out what they all do in CSS

Please Contact Us with any questions or comments

Thanks for reading

Beginner CSS/HTML tutorial

Intro to CSS/HTML

This tutorial is aimed at a few different people.

Those who want to learn more programming/scripting.
Those who are tired of trying to read messy HTML files.
Those who have procrastinated staying with the times.
Those who just don’t anything.
And finally, those who just want to make their site look good!

Reguardless of why you are reading this you are already well on your
way to having a good looking site.

HTML

So you want to make a web site huh? Fine. See if we can learn you a
thing or two.

I’m not aiming for any kind of website in particular, I’m just going
to give you the steps on how to create the basic parts that you will
need to create your own website. This means you’ll have to do some
coding. We are going to use a language called HTML (Hyper-Text Markup
Lanuage). HTML is very easy to use, and so I’m not going to give you a
discourse on it. We’re diving right in.

First we’re going to need a place to write our code for our website. For
this tutorial we’ll use Notepad. Any text editor will do though.
If you don’t know what that is don’t worry. I’ll get you there.

Click on Start
Click on All programs
Click on Accessories
Click on Notepad

Once you have your Text editor open put this code into it. Don’t
worry, I’ll explain everything.

<br /> <html><br /> <head><br /> <title></title><br /> </head><br /> <body><br /> </body><br /> </html><br />
This is as simple as it get in having a skeleton to work with. These
are the most common HTML tags and in virtually every web page. At any
time you can save your work and view it in a web browser.

Click on “File”.
Click on “Save As”.
Type whatever you want the name to be and put “.html” at the end of it.
Then click the drop down arrow on “Save as type” and change it to “All Files”.
Save the file wherever you want.
Double click on the file after saving it and it will bring it up in the browser.
Now all you have to do is go to “File” and click “Save” every time you update your code.
As you go through this tutorial or as you code, save often.

The
first tag is the “html” tag. This tag tells the browser “Hey I’m coding
in HTML here!”. The “head” tag is where we can tell the browser as well
as the server a lot of things. The only thing we’ll concern ourselves
with though is the “title” tag. The “title” tag goes in side the “head”
tags. Whatever you put inside those “title” tags will be the title of
the Web page. For example. Look at the top of your window or tab. It
says “Beginning CSS/HTML”. I did it because I have this code in my
page

Cool huh? Now we come to the “body” tags. This is where we get to the
meat of this business. The “body” tags are basically where everything else
goes (pictures, links, etc.).

Now take note for every tag I make,
I have a closing tag to go with it designated by the “/” in the tag.
These are a requirement. If you don’t agree then you just got an “F”
and I’m not telling you anymore.

Now I’m going to give you some stuff to put inside those “body” tags
of yours to give a little bit of substance to your page. We’re going
to start with a the paragraph tags. The paragraph tags are in the form
of

<p>This is a really boring paragraph</p> <p>

<br /> <body></p> <p>This is a really boring paragraph</p> <p>As is this one</p> <p> </body><br />

Check that out. The browser even knew to skip some space and start a
new paragraph for us.

I know that’s not overly exciting so how about a link? For links we
use what are called the “anchor” tags. The “anchor” tags are done like
this

<a href="http://www.google.com">A boring link</a>

Now as studly as that was, we’re going to throw an image into our
web page as well. And a break and a list and a table, and I think
that’ll give us a nice page.

<br /> <body><br /> ..<br /> <img src="http://psdesignzone.com/images/beginnerCSS/mypic.jpg" /><br /> </p> <ul> <li>This is a lame list</li> <li>This is a lame list</li> <li>This is a lame list</li> </ul> <table> <th> <td>What a cool table</td> </th> <tr> <td>I want to cry</td> <td>Me to</td> </tr> <tr> <td>Stop crying</td> <td>We’re about to learn cool stuff!</td> </tr> </table> <p> </body><br />

If you look at it carefully you can almost read it as if it was
english. For an image you have the “img” tag with the source (“src”),
attribute to tell where the image is. We have a break in the page for
some white space “br”. There’s the “unordered list” (“ul”) tag. Which
basically means you have a list with no order (bullets). I’ll let you
try and guess how to do an orderded list. Then we have the “table” tag.
If you have used Excel before then you know what a table is. It’s
simply a grid to make things look nice and organized. You first declare
your rows (“tr”) and then at you do you header (“th”). Then when you
go to your next row you insert your data (“td”).

Make sure you close off all your tags. Some of them like the image and
break tags don’t have anything out side the initial declaration so they
are closed by having the “/” at the end of the statement right before
the closing bracket.

How’s that? You made a web page. Now lets make it look a bit nicer.

CSS

Probably the first thing you need to learn is when you make your HTML
file. Don’t do anything extra. Don’t do something along the lines of

<body>

That is what your HTML should look like. Don’t try and spice it in
any way.

Enter CSS!

I’m going to insert one line into that HTML file between the “head”
tags

And we go from this

to this

CSS Is the design/style for your website and HTML is the content. Seperating
your content and style gives your code a lot more readability preventing
confusion and making it far easier for someone else you work with to
modify your code if needed. How is this done you ask well I will show
you the css code and explain each part. Take note in the line we
inserted into the head tag

<link rel="...

href=”css/mycss.css” />

<br /> /* CSS Document */<br /> body{<br /> background-color: #000000;<br /> font-family: Verdana;<br /> font-size: 11px;<br /> color: white;<br /> }<br />

The actual code starts off with “body”. This is telling the browser
that we we’re going to add some style to everything inside the body
tags. In CSS “body” is what would be called a Selector becuase it is
what we are selecting to modify. Then we proceed to insert properties
and their values with which we are going to make our site look good.
The properties and what they do are self explanatory because you
probably recognize it from trying to do that in your HTML code from
before.

Learning CSS will save you a lot time, coding, space, headaches,
disease, plauges, and even from Armegeddon (almost anyway). CSS is a must
go ahead and continue with more tutorials. This one has served to be an
introduction to what CSS is and can do.

Arrow style Logo Gimp tutorial

Welcome to the Gimp Arrow Logo tutorial, in this tutorial we will be creating a Logo like below. Note: I created this logo for the upcoming website StudyNShare.com

Be sure to also check our photoshop tutorials

To begin, create a new Image in Gimp with the following properties

Now that the new image is created create a new layer and name it Arrow-One use the rectangular select tool and create a selection with the following properties: Tip: Look to the left for these properties

Use the bucket tool (Shift + B) and fill the selection with the color #4DA900 you should now have the following:

You are now going to need to create a Triangle to do this activate the View-Show Grid option and the View-Snap To Grid Option, this will aid in the creation of the triangle. Select the path tool and use it to create a selection like below:

after you are finished, look to the left hand side and click the ‘Selection from Path’ button, this will create a new selection. Use the bucket tool and fill your new selection in with #4DA900 again. It should look like below.

Tip: You may need to move the selection around a little bit to get it aligned properly. You can also remove the View-Snap to Grid and Show Grid options.

Now right click on the Layer with the arrow on it And select Alpha to Selection this will select the arrow, now right click in the image editing area and choose Select then Grow this will expand the selection by a certain amount of pixels, grow it by 3 pixels like below

Now create a new layer underneath the arrow layer and name it Arrow Border use the bucket tool and fill the selection with white #FFFFFF. Right click in the selection area and go to Filters – Light and Shadow – Drop Shadow like below:

In the Drop Shadow Dialouge be sure to apply the following settings

Now right click on the main Arrow layer and select Alpha to Selection this will create a selection for the arrow, create a new layer and select the Rectangle Select Tool now press and hold ctrl and then drag a selection around the bottom of the arrow like below.

It should now look like this

Now select the Blend or Gradient Tool (L) and set it’s properties like so:

Create a new layer and name it Highlight Layer Now drag the gradient in a vertical line from Bottom to top Like so

Which should make it look like so: Tip: You can adjust the opacity of the highlight layer for a more realistic appearance

Now, merge every layer except for the background layer, Duplicate the newly merged layer, pull out the rotate tool click anywhere in the editing window and set the rotate tools angle to the following settings and press rotate. (only modify the angle

Now use the Move tool to position the newly created arrow underneath the first Arrow.

Now we can work on the Text of the logo

Pull out the text tool and click anywhere you want the text to be

I set the Text to the following properties

Now type in whatever you want for the tutorial I typed ‘study’

Once again right click on the new ‘study’ layer and choose, Alpha to Selection Create a new layer under the ‘study’ layer and right click in the image editing area and choose Select then Grow this time choose 2 pixels and your selection will grow Fill the selection with white #FFFFFF, and apply a dropshadow (right click – filters – light and shadow – drop shadow) with the following properties:

And there you have it, do the same as the previous step with the rest of your text and you will come out with.

Affiliate Banner in Photoshop

In this tutorial we are going to create an Affiliate Banner like below:

tip:

Affiliate banners have standard sizes the standard size below is 120×240 pixels, to see a full listing of all web-banner sizes click here.

Step 1: First creat a a new image, make the background transparent, and the size 120 pixels wide by 240 pixels tall *note see the tip above to see about standard web banner sizes.

Step 2: Now you are going to want to create the shape of the affiliate banner using the rectangle tool set the radius of the tool to 10px put the cursor near the top left hand corner of the document and drag down towards the bottom right of the document. *Note* If you want to use the same color scheme we use, remember to set the foreground color to: #009543; Or you can fool around with a color you think would look good, or better portray your message.

Step 3: Next apply a stroke to the layer,

tip

to create a Layer style click on the button on your Layers window, in this case you’ll want to select stroke.

I applied the following settings.

Step 4: We are now going to be adding some glow effects to the banner, first make a new layer, by clicking on the new layer button , Now with that layer selected press ctrl+g, what this will do is make that layer “Mask” the layer underneath it i.e. things will only show on that layer if it is “touching” stuff in the layer underneath it. Grab the rectangular Marquee tool , make a selection of about the top 4th of the rounded rectangle box, now select the gradient tool set it’s style to foreground to transparent (top box you can make the gradient tool work by making it move from solid color to transparent color), and drag the gradient tool from top to bottom like so. REMEMBER!! to set the foreground color to #00F943 and the gradient from solid to transparent.

To come out with:

note how the solid to transparent gradient is selected, as well as the correct foreground color

Step 5: Now we are going to do about the same thing just a more subdued gradient, pull out the marquee tool again make a selection from the bottom up to almost 3/4′th of the way. After that pull out the gradient tool, , remember to keep the same settings as the previous step and use the gradient tool like so *note how we don’t “pull” the gradient all the way through the marquee this allows for a more “blended look”:

That should produce this:

And that is about it, I borrowed some photos from MorgueFile.com A great website that offers free professional stock photos. I cropped the images from there and positioned them on top of that banner, then added the Monkey Feather Logo (MonkeyFeather.com is a high quality hosting company that psdesignzone.com recommends above any other!) and some other advertising text with an outer glow to get a decent looking affiliate banner like below:

Tip:

A ‘Stock Photo’ is usually a high quality real life image, that if used properly can add alot to web-design and design in general.

Windows Messenger Icon in Photoshop

Gaming Style Header

We are going to be creating an image like below:

Step 1:

To begin, first create an image 150×80 pixels:

Step 2:

Use the paintbucket tool to fill the background with with: #5B5B5B

Step 3:

create a new layer andUse the Rectangular marquee to make a selection like below and fill it with: #485337

Step 4:

Now apply the following Layer Styles to the layer:

You should come out with

Step 5:

Now create a new layer you should have 3 by now, use the rectangular marquee tool to make a selection like below and fill it with #757957.

Step 6:

Now pull out the Burn Tool , it is in the same place as a the dodge tool, just click and hold down on the dodge tool to pull out multiple tools, make sure that the Exposure is set to 50%, and draw out a line like below.

Step 7:

Create a new layer and make a selection for the top of the header to the top of the layer you just made. Fill it with #898C66

Step 8:
Pull out the pencil tool and at the very bottom of the selection you just made, draw a line with the color #9EA175

Step 9:

Now pull out the Dodge Tool (O) and draw a line

Tip

When using the dodge tool, you have to be on the same layer as the layer your trying to highlight.

like below (be sure the dodge tool is set to highlights and opacity of 50%) you may have to draw the line back and forth a few times. Next pull out the pencil tool once again and draw a black line at the top of the header, and with the dodge tool set at 1 pixel, draw a line right underneath it. It should look like below.

Step 10:

Now pull out the brush tool set the foreground color to #1E2213, set the pixel width to 1 pixel, and draw a shape like below (press shift to draw perfectly straight lines and angles).

Step 11:

Now you need to apply the following layer style settings to the layer, a Dropshadow and a Bevel and Emboss:

That should produce:

Step 12:

Press ctrl+j to duplicate the layer and use the Move Tool (v) to move it to the right hand side so you have two vent like items.

Step 13:

Use the polygonal lasso too to make a selection like below:

Step 14:

Now go to Select > Modify > Smooth and set the Sample Radius to 5 press ok, and it will smooth the selection to have rounded corners fill that selection with black.

Step 15:

Duplicate that layer with ctrl+j, then with the duplicated layer selected go to Edit > Transform > Flip Horizontal use the move tool (v) to move the layer to the far right (just above the right vent:

Step 16:

Next use the marquee tool to fill in the middle section with black like below:

Step 17:

Now apply the following Layer Style Settings to the layer

Click on the Gradient to pull up the next window

That should produce:

Step 17:

ctrl+click on the layer you were just working on and create a new layer, go to Select > Modify > Contract and contract it by about 10 pixels, fill that selection with black.

Step 18:

Now apply the following Layer Style settings to that layer

Which should produce

Step 19 (optional):

Create a new layer and press ctrl+g (ctrl+alt+g for cs2) to have that layer mask the layer under it, with the polygonal lasso tool make a selection like below, then pull out the gradient tool, and set the colors white to transparent, and draw a gradient from the top left to the bottom right, which should produce:

Step 20:

Now all that is left is to add in some text, use whatever font you want and apply the following settings to it, I set the color of the font to #FFE500.

And you should get

Duplicate all of the layers that contain a buttom element on them and you can make multiple buttons like below

I hope you enjoyed the tutorial

Learn how to design the skype logo along with this.

Whiteshading Website Layout Page 2

tip

Whiteshading Website Layout

tip

Displacement Mapping in Photoshop

tip

tip

tip

tip

CSS Dropshadow

Tip:

CSS Web Header Beginner Tutorial

Beginner CSS/HTML tutorial

Intro to CSS/HTML

HTML

CSS

Arrow style Logo Gimp tutorial

Affiliate Banner in Photoshop

tip:

tip

Tip:

Windows Messenger Icon in Photoshop

Gaming Style Header

Tip

Tutorial Categories

Recent Tutorials