Web Designing: Using Photoshop - PART 1

Introduction: Web Designing: Using Photoshop - PART 1

Welcome to web designing. I have my own website. Sorry that I cant give you the link now. Currently its deactivated. So, i need to reactivate it.

Everybody In the world wants a website these days. They think it is so easy to do this. yes it is easy, but you will need a little skills.
All thinks WYSIWYG builders will make a good website. The thing is no, they won't make a nice one. it will be plain without anything of your idea. But a programming language called HTML can do this one. But not only HTML. For designing a website, first you will need some images. Many think that images are easy to make or they can always obtain it from the internet. No, they cant get the images always. What will they do for the logo of their website. logos can not be obtained from the internet. So, I will teach you to make a logo, header, footer for your website. You will first need Photoshop for this work. I recommend you to use the recent version of Photoshop.
I use Photoshop CS5.1 Extended. No problem if your one is portable.

So, lets get started  ---->

Step 1: Step 1 - Making the Logo...

logos are the images used to recognize your site. As you know Sony has a logo for their products and everything they do. This logo will help to recognize the company which did the product or anything that has the logo.

To make your logo..
First open up Photoshop and fill it with these thing;
Name: Logo
Width: 128
length: 128
Resolution: 72
Background contents: White
Press ok when you filled everything as the above.

Step 2: Step 2: the Making

Now select the fill tool and fill the background with your favorite color or gradient. it's upto you.
Select the brush tool and add some brush designs onto your logo and i have some custom made ones. You can also make your own.
Now select the text tool and add some text to your image. You can add gradients for your text and many other designs for your text to make it beautiful.
If you want to do anymore formatting then do it.
If you are done select FILE
Now a new windows will appear.
Name your project as logo
In the format drop down box select PNG as the format. PNG is most common format used for website images.
Now save it on the desktop.
After this close Photoshop.
In the desktop make a new folder called website and put your logo image into this folder. it is better if you do this.

Step 3: Step 3 : Your Header Your Way.

You know that a website will need a header. this header must be nice looking if you are making a very stylish website. Or else you can have it simple for a website that is a really simple one. Mine doesn't have a header. if you don't want you omit this step.

Open Photoshop and make a image
Width: 640
Length: 120
Others must be default.
Now name it as header and click ok.
You will see and new blank image.
Fill your image using the fill tool or the gradient tool. To obtain the gradient tool, right click on the fill tool and you will see the gradient tool and now select it and then you are done.
After filling it, add some text with a better font.
If also want to add some brushes and them using the brush tool.
Go to the next step to see how to add some images to the website header....

Step 4: Step 3 : Your Header Your Way.

Minimize photoshop select your image that you want to add.
Right click on the image and select " Select default program"
Now in these place locate photoshop. After that this image will be loaded on photoshop.
So, now select the marquee tool. Draw around the image using marquee tool.
Click the edit menu and select COPY.
Now go to the other tab where you have the header. Now once again select edit and click PASTE.
You image will be on the header.
Select the Image layer and then select the MOVE TOOL from the tool box.
Move the image where ever you want using the mouse or the arrow keys.
When you have done it.. add more images if you want.
Select file, save as.
Name it header and under the format menu select the format as .PNG.
Save it into the folder named website. this folder must be on the desktop. After you save the header into the website folder, close photoshop.

Step 5: Step 4: the Footer With the Website Piracy

Ok now as you know a website must have a footer. Footers have the text called "Copyright"
And also the Piracy link.
Now open photoshop and select new.
Width: 640
Length: 128
Name it as footer

The blank image will appear.
Do all the formatting you want and add the text and all.
if you want to add piracy and link only the text then do all the formatting fast.
After you do all this, right click on the crop tool
Then click on the Slice tool.
The slice tool will help to divide the images and save it as a HTML file.

Using the slice tool, click and drag on the text that you have to link separately.
Now go to file and select " Save for web and devices"
A new windows will appear select all the formatting.
Now click save.
Save it as footer in the website folder.
The format must be IMAGES ONLY.

Your done.

Step 6: Step Unknown: Success

You have done it. your website header and the logo and also the footer is done.
I have attached a sample file for you to download. Please don't edit it or sell it, you can distribute it for free.

Thanks for viewing my one.
Sorry that no images is attached.
Wait for upcoming part.............

Be the First to Share


    • DIY Summer Camp Contest

      DIY Summer Camp Contest
    • First Time Author Contest

      First Time Author Contest
    • Make it Fly Challenge

      Make it Fly Challenge



    7 years ago on Introduction

    Good Post Dear.A top notch Web Design and Logo Design company from India is LogoDesignsStudio.It is a best company providing its all the services at very nominal price in all over the world.


    9 years ago on Introduction

    Good Idea. But you Images are *really* small. Even the most basic compter these days likely comes with at least a 1024 x 768 pixel screen. Most mobiles are getting closer to this standard. So it is easier to create really large things in photoshop, and just scale them down later. So, an average (even small) header size would be 1024 px wide. I would recommend going like 3072px (3x 1024) and just increasing height by 3. Then you get a very large image, which you can scale down to a specific dimension. Plus, you can use the image later if screens become even more densely pixelated (the average display is around 1600px wide I think now)

    And a good logo pic could be somewhere around 800x600px. It really depends on your logo size/shape.

    Just hinting :)