Hey there, guest

Guides

How to use gradients

Please note that the guide is for Photoshop mainly Elements (as that is what I use)
Gradients can be used for anything, not just icons

So here is a rather plain blank icon of Audrey Kitching. Most icons are sized 100x100 pixels so thats how I put this one.

Choose an icon gradient, from the gradients I've got, for your image and paste it onto a new layer (Layer - New - Layer) but make sure the layer is above your blank icon image like so:

From the menu above the layers, choose one of the options.

I picked overlay but the choice is yours depending on which you prefer

Simply save your image (try to make sure its a JPEG) and you should have something that looks like this:

Banner Guide

Now, it all depends on what layout you're using and what size banner would fit, but for this guide it is for a 500x250 pixel size banner.
First of all you need to get the images you want to use, it is good to get images that are of the same person with similar poses. These are the images I'm using:

Now paste them onto Photoshop making sure each image is overlapping slightly

Click onto the Lasso Tool and set the feather to 20px.


Now get the lasso and select the bits you want to blend and delete them

Once you've done it, it should look a little like this:

Now it's time to make it more exciting.

Pick the Gradient Tool and select a gradient you like. Make a new layer and put the gradient you want onto it, but make sure the layer is above your image. Then from the layer drop down menu, select an effect you want (this step is also shown in the adding textures to icons part of the page).
This is how I've done mine:

From here you can simply add whatever you want, maybe text or brushes.

And here what I did:

How to make a button

Mkay, first pic a button base without the border, I want to pic this one:

Then paste it onto a blank Photoshop file (make sure the file size is 88x31 pixels)
Now you need to pick a border, heres mine:

Paste it on top of your button base and here's what the layers should look like:

Ok, when you pasted the button border, you noticed that the background was all black? Well, now we need to get rid of that

Select the

and click on the black, making sure you are on the right layer, like so

and press delete.
Ok, now on your border all the black has gone, so now you'll have to re apply the black border using the Pencil tool, hopefully it'll look something like this:

You can also see the button base on the layer behind.

So now the border is re-applyed we must actually make the button, so use the

again and select the pink bit of the button border and press delete, now you can see the lovely button base

Now click on the layer which has the button base on it and use the Eraser tool (I've put it's mode onto block) and just erase the outside area of the button border, it will take a bit to do it by hand but you should get this:

You need to choose a font next, I'm using Bangalore and used a colour that will match the button base

You can't see the font very well because of it's colour, but you will once there's a border.

Use the Pencil tool again and just outline the writing in a light colour, it is a slow process to do it this way but I find that that's how you get the best results, and here is my finished button

Transparency

The button may look complete but the background is not transparent, so if the button was put on a page with a blue background, you would clearly be able to see white space behind the button.

So, you need to make sure that before you save it the white background layer is deleted, making the background transparent

Now you can save it, make sure it is a PNG. After you've clicked the 'save' button a grey box will appear, saying PNG options, make sure the interlaced circle is checked and ther you have it! The button is transparent!
Finished result:

Cool Effects

I must say that the colours and the effects used for the first two guides won't work for every image as it may turn out different due to your images lighting or something else along the lines. This guide gives you a basic idea on what to do, but you can experiment with colours to make it fit your liking.

Guide 1
Before:

After:

What to do
First, choose an image which you want to use, it doesn't really matter what, just make sure it isn't pixelly at all.
Select Layer - Duplicate layer to copy the layer (or use Ctrl+J) and set it onto the screen. By doing this, it should brighten up the image

Afterward, make a new layer and use the Paint Bucket Tool to colour the box the colour #edc47c. Then set it to color burn with an opacity of 56%.

Create another layer on top of that one and fill in the box the colour #9d130b and then set it onto lighten, no change of opacity is needed.

The final result:






Guide 2
Before:

After:

What to do
First, choose an image which you want to use, it doesn't really matter what, just make sure it isn't pixelly at all.
Select Layer - Duplicate layer to copy the layer (or use Ctrl+J) and set it onto the color burn. By doing this, it should brighten up the image

Afterward, make a new layer and use the Paint Bucket Tool to colour the box the colour #44b3f3.

Create another layer on top of that one and fill in the box the colour #4458f3 and then set it onto vivid light, no change of opacity is needed.

The final result:






Guide 3
Before:

After:

What to do
This guide is incredibly simple - there is basically only one step to it! :)
Use the selection brush tool to select the areas you want to pixelate.
Go to Filter - Pixelate - Mosaic.. and a box should appear

Make sure the cell size is anywhere between 11-16 and you're good to go!

The final result:

Guide 4
Before:

After:

What to do
Create a new blank file and put it exactly like this:

The most vital thing is to make sure it's transparent, otherwise it won't work.
Kay, you'll have to zoom in quite a bit and use the Pencil tool onto the colour black to make this:

then go to Edit - Define Pattern and click 'OK' in the box that comes up. This now makes it a pattern
Now go back to your image and create a new layer, use the Paint Bucket Tool and set it onto pattern. Find the pattern you created and fill in onto the new layer making it like this:

Set it onto overlay and your done!

The final result:

Resources

The layout - CSS sites

Fonts

For your layout, it is important to have good fonts. So, if you're stuck for fonts, these are some cool ones
Of course, you can't download them on here (I've just put up the font alphabets for you if you wanted to make a button in MS Paint or something). You'll have to search Google for the font and you can download them on a font site which has the font you're looking for (:

Icon gradients

To make your icons less dull, use textures on them to really jazz them up. These are made by me so if you use them please add credit.

Button Bases

Edited by me but images are from Photobucket, please credit. Use them for buttons to link back your site

88x31

No border

100x100

Button Borders

Cool borders for you to use for your link back buttons
These buttons are 88x31 pixels
Please credit me somewhere :)

Button Fonts

Good fonts to use for link back buttons
Of course, you can't download them on here (I've just put up the font alphabets for you if you wanted to make a button in MS Paint or something). You'll have to search Google for the font and you can download them on a font site which has the font you're looking for (:

Colour palettes

These are to help you pick a colour scheme for your site layout

Site Names

Site Names: One of the important things about making a site. Down below are some possible site name ideas, though I'm not 100% sure if these names are already taken so please let me know!

For these name you can edit them how you want, so, from the first one Chaotic Flare you could change that
into Chaotic Flare Designs or Chaotic Flare Layouts
Please try and credit me somewhere xD
If you get rid of your site, I will make the name available again
If you use a name, let me know so I can cross it off

Chaotic Flare
Mystique
Suburban Dreams
Sugar Muffin
Toxic Innocense
Haiku
Splatique
iDesigns
Intoxication
Vintage Rebel
Kiwi
Aerofusion
Paper Doll Site Link
Rock the House
Angel Coated
Unique Visions
NEON
Sonic Fusion
Unshed Tears
Poison Kisses
Indifference
Spectrum
Kandy Kane
Amongst the Cherry Blossoms
Disaster
Sushi
Principle
Connections
Peroxide Site Link
Nuclear
Warped
Falling Roses
Amythst
Divisions
Unique Visions
Vertigo
Faded Polaroid
Sweet Sunflower
Apostrophe

Brushes/Stamps

What better way to funkify layouts or lookups then with brushes? I did not make any of these so I am not taking credit for them. If you are the creator of some of these, let me know and I'll add credit. Some off the brushes come from offsite places so I cannot link them :o
Thooouuuggghhh, I did stamp these brushes onto the blank files for you to use, so no stealy stealy!
Drag 'em to the address bar for full size

How to add a brush to Photoshop

Copy and paste the brush set you want into a blank file on Photoshop.
Okays, I chose this one (on the right)

Now get the
and use it to cut out the brush you want to use:



Copy and paste the cut out brush onto a new blank file.
Select Edit - Define Brush then simply click 'ok' (though if you want to name the brush you can) and that's it! Whenever you use the Brush tool, you can now use that shape! Simple.

PNGs

Use these for layouts, but please credit me somewhere!
These are not actual size, drag the images to the address bar

Splat Bases

Please keep the credit on (drag to address bar for full size)

Backgrounds

I did not make any of these so am therefore not taking any credit of them. Please credit me somewhere anyway so that others can find them too :)
Not actual size, drag them to the address bar for full preveiw