1. Photoshop (30Days download https://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop)
2. Fireworks (30Days download https://www.adobe.com/cfusion/tdrc/index.cfm?product=fireworks)

NB: Guys this is just for learning purpose. Don’t copy any website which do have copyright policy. Please don’t miss use the concept.

This is a general concept the site designers use to create site using photoshop and dream weaver but i have just elaborated it so that any one can create good looking website.

Before proceeding to create a website make a list of all what you want and think about a structure.
If its hard to think about a structure(which is common) then you can visit some website and see if you like there structure.

I like the structure of symantec.com site and so lets start with symantec.com structure. Say we will make a site for Gosipxyz.com (Some xyz name)

Step1: Open symantec.com and press F11 to have a full screen view. Take a screen shot now. (PrtScr on your KB). Open Paint and paste the screen shot and save the images as 1.png
If you dont like the above format you can go for some pictures as shown in the link below. They also have the procedure how to make them.

Optional Structure Link:

1. http://classictutorials.com/2007/08/23/stylish-website-layout/
2. http://classictutorials.com/2007/04/03/a-web-page-layout-from-talk-mania-superb/

Step2:Our next step is to clean up the screen shot we took. In this step we will remove all texts and we will create a skeleton like structure.
Open the 1.png in photoshop.And use the paint or brush tool to remove all the texts which are not required. Obviously choose proper colour while masking.The end result should look somethin like this.

In the above picture i have removed most of the text except the norton icon and some links

Step3: Now in this step we will remove the norton icon with our own icons and remove norton related links to Gosipxyz.com links. Remember to put proper icons based on the type of site we are designing. Say Gosipxyz.com is a computer hardware site. So we need some computer related hardwares icon..
Am attaching a icon pack which contains various icons which you can use.I have used icons from it. Ask me if you want more icons.
Icon Link: Download

Also remove any extra images like browser parts etc..Use the photoshop crop tool to do the job.
If you find difficult to remove text because of using brush tool then use an existing part and copy paste.. Or just put a comment i will show you.

This is how it looks now. More customization you can do based on your wish but lets go to next step.

Step4: Converting our hard work to a website now.
Save your photoshop image as 1.psd and close photoshop and open Fireworks. Open the 1.psd with fireworks.
Now on the left hand side there is a Slice tool we will use it to slice our photo.
See the screen shot.

Remember that using slice tool is very easy just like drawing rectangles.Finally it should look like this.

Remember not to leave any part of the image unsliced. For better slicing and to avoid overlapping and small gaps use the zoom tool in fireworks.

Step5:Once we have sliced it we need to convert these slices into images. Follow the basic rule to convert
Rules:
1.If its a less graphic part say white background or full white use Type: Image and Compression: GIF Web 216. Takes least space.
2.If its quality graphics use Type: Image and Compression: GIF adoptive 256/ JPEG . Take more space
3.If you want to put some html coding like embedd flash etc use Type: Html and Html: Your html code.

To convert slices into various formats you just need to select it with pointer tool(V) and change it. Also for buttons just put the hiper link in the link box.The image below shows how to make the “Contact US” button point to classictutorials.blogspot.com

Thats it.
Once all the slice is converted go to file –> Export then use the default setting and save.. You have a brand new webpage. Congrats!

Hope you like the post. Please bring in all your reactions

out of the box, Adobe Photoshop has no option to save files as .ICO or icon files. One option is to make a bitmap (.bmp) image first and then rename it to .ico . However that creates a problem with icon backgrounds occasionally. Then there are the more expensive additives or plugins. But now you can make, edit and save icon files with Photoshop without spending a single dime using the Icon Plugin by Sibcode.

The Icon Plugin is a small (~ 700 k) Photoshop extension. it lets you export or save image files as icon or .ICO files, fully compatible with Windows XP. This plugin supports a wide range of features including multi-format icons, transparency and semi-transparency. The icons created can also be made Windows Vista compatible from the icon creation dialogue by enabling .png compression. It also supports non-standard icons of different sizes, colors and resolutions, including monochrome, 16 colors, 256 colors, 24-bit True Color, and 32-bit True Color with semi-transparency. The users also have the handy option to add/remove sub-icons from the root icon file.

Icon Plugin is compatible with a slew of front running image/graphics editors like Elements, AfterEffects, Premiere, PhotoDeluxe, Corel PhotoPaint, PaintShop Pro, Painter, and Photo. As for OS compatibility, for the time being, this plugin goes fine with Windows, no MAC/Linux support (sorry apple/unix boys and girls). The plugin is a freeware and comes compressed in a zip file. The installation instructions are available in a tidy “read me” file inside the package. Go on, start belching out cute icons with Photoshop today.

Download Plugin

Source: Download Squad

Photoshop Knowledge Required: Medium
Difficulty: Easy
External Plug-ins required: None

Before starting Reset your workspace by Window —> Workspace —> (Reset Palette Locations/Default Workspace)

If you have a decent printer and a picture of yours then you won’t have to waste your bucks for getting your photos shot.
And it also comes in handy if there is an emergency situation and you need instant passport sized photographs.
So let’s take this silhouette image as our sample. So we can concentrate on important things.

Now most of the passport images are in the ratio of 4:3. So we are going to crop this one like that too.

1) Select the rectangular Marquee Tool (M) and apply the following settings in it.

2) Now draw a rectangle in the image and place that it fits according to your needs.
Here is an example of what it should look like.

3) Image —> Crop

Now the image is complete and ready for printing. But you may need multiple copies right?
And you might even need some borders to go with it?Okay here is how it is done.

Borders: (Can be skipped)
1) Press Ctrl+A to select the entire image.
2) Select —> Modify —> Border (Width: according you your needs)
3) Select the appropriate colour and hit Alt+Backspace. And you border is made.

Multiple Photos: (Shouldn’t be more than four, this too can be skipped)
1) Press Ctrl+J the number of more pictures you want. E.g. I want four pictures and so I’ll hit it three times.
2) Image —> Canvas Size
(Now you have to increase the width of your canvas to the size of the pictures placed side by side, so a little mathematics is needed here)
If there are four copies then the approx width of the image should be 4*current size + some extra space for gaps.
I chose the width to be = 4*182+100 = 828

The canvas screen should look like this (except the size, because that is for you to calculate)

3) Now select the layers one by one in the layer’s window and drag them to their appropriate positions.

Printing:
1) Press Alt+Ctrl+P
2) In the preview window, you can see how the print is going to look like.
3) Now what you have to do is set the image height, coz it’s the same only the width has changed (If you have used the Multiple Photo option).
4) Set the image height to 4 cm. (This is the default size for photographs, you can set what you want), the width will automatically adjust.
5) Now you need to save paper too. We have to align the pictures to the top.
6) Deselect Center Image.
7) Set the top and left to 1 cm each.

And now you can print!

Note: If you need more that four pictures i.e. 8 then after printing once follow the last step again, instead increase the top and use the same paper to print. Just make sure that the images don’t overlap.

let’s start with a new document
Size 760×770 Pixels
Background color : 012c3e

Now go to Filter > Render > Lightning Effects
and use the following settings

Then Select Rounded rectangle Tool and create a simple shape ( the next image is resized )

For this shape add the following layer styles

This is the result

Now please go to www.free-photoshop.com and download the Custom Shape #1 – Banners set.
Load the custom shapes in photoshop and add a shape like in the following image

Then add the following layer styles for this custom shape

This is my result

Select Rectangle Tool and create a shape

Go to Edit > Transform > Warp ( if you don’t have warp tool you can use Pen tool to create something similar )

This is my result

Then add the following layer styles

This is my result after i have applied the layer styles. You can notice that i have placed this layer under the custom shape layer

Then add some text

Be sure you have the type tool selected. now press On “Create Warped Text” button

And use the following settings

This is my result

Create a new shape with the Rectangle Tool ( i have used the following collor : #012c3e )

Now it is time to load another set of brushes in Photoshop
For this you need to download the Brush #6 -Flowers set from www.free-photoshop.com

Then create a new layer on top of all layers ( press CTRL+SHIFT+ALT+N )
And with brush tool press one time on the logo

Then add the following layer style

This is the result

Duplicate this layer ( press CTRL+J )

Then select Both Layers and press CTRL+E ( this will merge both layers )

Load the selection now ( Go to Select > Load selection )

Now select Brush tool and with different colors try to add as many details on this selection

This is my result

Now please add some text on your layout

Then select Line Tool. ( set the weigh to 3 pixels ) and make a horizontal line on the bottom of your layout
Then with the same tool set the line weight to 1 pixels and add the second line above the first one

Now load Brush #1 set from www.free-photoshop.com and add on your layout some details
This is my final result

Thanx to talk-mania and there team for this lovely output

• Adobe Photoshop (7+)
• Basic knowledge of said software

This tutorial will teach you how to make Vista style buttons, much like the ones found on the new Task Bar. However, the basics of the effect are found throughout the OS, and therefore can be applied to other shapes / objects as well.

Finally you should get some thing like this:

Step 1.

Startup Photoshop. Create a new document, make sure it’s RGB, with a White background, 72ppi resolution. Size (W x H) is up to you.

Step 2.

Select the Rounded Rectangle tool (1).
- Click the arrow in the options bar, and make sure Snap to Pixels (2) is checked, also make sure Shape layers (3) are enabled.
- Make the corner Radius about 8px, I have 3px in the screenshot, but that’s a bit too small.
- We’ll add layer effects soon, so the color of your rectangle doesn’t matter.

Step 3.

Draw a rounded rectangle as wide as you want, and about 40px high.

Step 4.

Now it’s time for some layer effects. Start by pressing Layer –> Layer Style –> Stroke…
Use the settings in the screenshot below:

Next we’ll add a gradient.

Step 5.

At this point we have a decent glass button. But lets add a few more effects to give it that Vista flare.

We’ll start with an Inner Glow.

Now, a Drop Shadow (though the actual effect isn’t much of a shadow)

And lastly, an Inner Shadow (again, we’re actually using this for a highlight, not a shadow)

OK, we’re done the effects. One quick note, the drop shadow we added earlier won’t be visible on a white background, so select the Background layer and fill it (Alt+Backspace) with a medium gray.

Here is my final result (the typeface is “Lucida Sans Unicode”). Read below to find out how to change color.

Step 6, Tweaking

Changing shape

Since the button is a shape object, you can easily use the Direct Selection Tool (Press the A key) to drag the points and resize the button. Just be careful when moving points, since they won’t be restrained to pixel values, your edges might go blurry — to fix that, zoom in and move the points until the edges becomes sharp again. To avoid the problem you can use the Arrow keys, and Shift+Arrow keys, to move the points in increments.

Note: Make sure the button isn’t too high, since the Gradient Overlay (due to the way it works) will begin to look a little blurry. Of course, this might not bother you, so do whatever looks best

Changing color

For precise color modification, your best bet is to modify the Gradient Overlay in the layer styles.

But for something a little quicker, you can:

• Ctrl+Click the layer
• Add a new Hue & Saturation adjustment layer
• Adjust as desired

Updated Recently:
Ha at last seems i got the real owner of this tutorial. Every where i saw i got a new owner but seems it belongs to Hamishi Marpheson. Great work bro

Similarily, type some text in the middle of the circle, rasterize the type layer and select similar eraser and erase random part of the layer. Our custom stamp with seal is ready

 

Source: http://www.webdesign.org/web/photoshop/drawing-techniques/realistic-stamp-with-seal.11729.html

Then with Type Tool, Write some text

Go to Edit > Transform > Skew and change the text like me

Select Move Tool and change the Vertical Scale

Now for this text Layer add the following layer styles

This is the result

Please be careful on the following steps

Step 1 : duplicate this layer ( press CTRL+J )
Step 2 :then press one time on ” Up arrow – from your keyboard

Then for this second layer add the following layer styles

Repeating step 1 and 2 a few times, Maybe 10 times , you will get the following result

Now it comes the nice part. Select Pen tool, and make something like me

You can see that i have the same layer styles as the text layer

Now duplicate this layer a few times, Rotate all the duplicate layers, You can also resize them if you want, then place this layers as you want.
All should be random
This is my result for the left side of the wallpaper

After i have duplicated the layers a few times, i have placed this shapes also on the right side of the wallpaper

Now it is time to change the colors of this shapes. The easy way is to change the Gradient colors

Now you can use your own colors. I will use mine

This is the result

FULL VIEW
I hope you like it

So open the following image in photoshop

Rename the layer to ” Layer 1 ” ( in this way it is very easy for you to follow my tutorial )
Duplicate the layer ( press CTRL+J ) , then rename this layer to ” Layer 2 “

Then go to Image > Adjustments > Desaturate ( or press SHIFT+CTRL+U ) This is the result

Duplicate “Layer 2″ ( press CTRL+J ) , then go to Image > Adjustments > Invert ( or press CTRL+I )
Please rename this layer to “Layer 3″

This is the result

Then Change the Blending mode to Color Dodge

Then go to Filter > Blur > Gaussian Blur
Use the following settings

After you will click OK, you will have this result

Then drag “Layer 1″ to the top of the layer palette.

with “layer 1″ selected press on the “add layer mask button”

Then Select Gradient Tool.
Use the following settings

Then make a small line on your canvas ( follow the size of my blue arrow )

This is the result

Now grab The brush tool ( use a small rounded brush )
Set the foreground color to white
Select “Layer 2″
Zoom your document to 400 % or 500 %

Then with the brush tool start drawing on the image

After 3-4 minutes of small tweaking with brush, this is my final image

Nice isn’t it ?

Let’s start with a new document
Size 760 x 780 pixels
Background color: #2b2b2b

Create a rectangle with a gray color and place it like me

Go to Filter > Noise > Add noise , and use the following settings:
You will be asked if you want to rasterize the layer ( press OK )

Then With Rectangle Tool , Create another rectangles with a yellow color. I have used: #e8b702
Place the shapes like me

Then for all this shapes, change the blending mode to Overlay

This is the result

Now i will give you 2 images, because we will need them.

Open the following images in photoshop

Then place the images like me

Then add the following layer styles for both layers with auto ( front , and back image )

This is the result

Select all the Yellow shapes layers

And press CTRL+E ( this will merge all the layers into a single one , and in the same time all the layers will be rasterized )
Be sure that you still have the Overlay blending mode selected

Now let’s add some details. Please find some crack brushes and add some details on your layout.
Soon i will release a Huge Pack for designers with styles, patterns, brushes, gradients, and all you need
Before you add this cracks in the asphalt , you should create another layer ( press CTRL+SHIFT+ALT+N )
This is my result

Create another layer ( Press CTRL+ALT+SHIFT+N )
Load some Grunge brushes and add more details on your ” Street “

Also a few Oil splats will be good.

Next step is to select The yellow shapes layer .
Grab Eraser Tool.
Use the following brush

And start Deleting parts of the yellow lines. This is my result

Now it will be good if you can add some stones on your layout. If you google a little i am sure you can find a lot of images, You can add also some grass if you want. this is only a idea

Now i will create another rectangles

For all this shapes, add the following layer styles

This is the result

Now add some text on your layout

Then Select Type Tool , Choose a small Font, and write some minus signs “—–” And place this layers like me, under the text

Select Ellipse Tool and make a simple shape

Then drag the shape under the car layer. It should be visible only a few millimeters

Then add the following layer styles

This is the result

Now Create a new layer ( press CTRL+SHIFT+ALT+N ) , select A round Brush ( Soft Round 13 pixels ), and start creating some random lines with 3 different colors: #2e3136 , #434e5a , #ffffff

Next go to Filter > Blur > Gaussian Blur and use the following setting

This is the result

Now you can load a star brush, and make some simple stars with a white color

Now you can add any details you want. I will be happy to see more results
this is my final outcome