Penrd Combat Arms Glitches/Hacks

Only Combat Arms
HomeHome  PortalPortal  GalleryGallery  FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  RegisterRegister  Log in  

Share | 

 Make a website same as the real one

Go down 

Number of posts : 42
Humor : Sleepy
Registration date : 2008-09-17

PostSubject: Make a website same as the real one   Sat Sep 20, 2008 12:04 am

not by me

Creating a similar looking site like any site
Level: Begineer/Basic knowledge in PS
Requisits: Photoshop (30Days download
Fireworks (30Days download

NB: Guys this is just for learning purpose. Dont copy any website which do have copyright policy. Please dont 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 site and so lets start with structure. Say we will make a site for (Some xyz name)

Step1: Open 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:

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 sceleton 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 links. Remember to put proper icons based on the type of site we are designing. Say 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
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 hiber link in the link box.The image below shows how to make the "Contact US" button point to

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!
I have tried to finish the tutorial in very short and to explan the whole act it will take huge space which is not possible in this place.
But yes i will entertain all comments and will be happy to answer them.
Back to top Go down
View user profile
Make a website same as the real one
Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
Penrd Combat Arms Glitches/Hacks :: Other-
Jump to: