Creating a similar looking site like any site
Level: Begineer/Basic knowledge in PS
Requisits:- Photoshop (30Days download https://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop)
- 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 :)
