Jump to content
SkatePerception
Sign in to follow this  
karmafilmer

Web Design Tutorial (using Photoshop Design)

Recommended Posts

Alright many people have been asking how to make a Photoshop Web design work. Like Slicing and coding it to make another Page apear in the box/frame. Well This is the way to do it right. I will be using Dreamweaver to Code mine, I suggest if you dont have this download the Free 30 day trial at Macromedia.

 

Here is how you do it

 

First make your design in Photoshop the way you want it then:

SP.JPG

 

 

Then after it is opened up in Image Ready Click the Split/slice Tool

 

SP1.JPG

 

Then follow this:

 

SP2.JPG

 

Then after you have split the images save optimized as, as below make sure you save it in a place where you can find it.

 

SP3.JPG

 

then use these save AS. settings:

 

CLICK

 

Then when you've opened up your .html design in Dreamweaver click on the box you want a page to appear on in this case it is my media frame/box, when the box is still highlighted go to INSERT>TAG then click it.

 

CLICK

 

Then a box will pop up and click on the HTML tags folder and then chose the Iframe tag in the choices as below and click insert.

 

CLICK

 

Then a box will pop up asking for the H and W and name and source use the HTML page you want to appear as the Source and name the Frame you Sliced that is Highlighted and call it Content frame as below then hit okay

 

CLICK

 

Do the same to the news column except when it asks for the name of the frame type in newsframe and your news page like news.html as the source and enter the H and W as you did before.

 

Now this is a tricky part HOT SPOTTING is when you surround a picture or text with a box so when you click on it it opens in a new window or a frame you havde chosen. I am going to use my LINKS text as a example. Say I wanted it to open in the same box as my media box well I would enter the link down below in the Properties box my page is called links1.html also I want it to show in the Video box down below it so in the name I would enter the text : contentframe because earlier own I named it that. Do this for all your hot spots and look at my Example Below and you should be all set.

 

CLICK

 

Well there Finally you know how to do this.

 

Mods I hope I can please get 2-3 pts for this because I worked my ass off 5 hrs writing this thing. Thanks HERE is the final result. If you have any questions or comments PM me or hit me on AIM: PainB510. Hope you enjoy this

Share this post


Link to post
Share on other sites

i think there is already a tutorial like that, Spazz made it a long time ago, his was more detail, and better pictures too

Share this post


Link to post
Share on other sites

i liked this tutorial it helped me alot. Still deserving of some points.

 

 

I do have one question with this though with this picture Here . When you add the Video.html as your source did you justt go to File>New> Html in dreamweaver and save it as Video.html?? Basically how did you make video.html?

 

Also how did you add text to your News part/slice

Share this post


Link to post
Share on other sites
i liked this tutorial it helped me alot. Still deserving of some points.

 

 

I do have one question with this though with this picture Here . When you add the Video.html as your source did you justt go to File>New> Html in dreamweaver and save it as Video.html?? Basically how did you make video.html?

 

Also how did you add text to your News part/slice

Yeah I just created the video.html page and uploaded it to my server , and for the news box I just liced out a box and repeated the steps of coding it as shown above

Share this post


Link to post
Share on other sites

yo that was really good, but when i go to the site it just has like all these question marks.(i'm talking about on my site). i even uploaded all the .gif images that were created (for some reason)when i saved it on imageready. anyways, heres the link: trudat films

Share this post


Link to post
Share on other sites

so what would I do if I just had a pic and I wanted to have it so you could click on some text to go to the page like an enter page.

Share this post


Link to post
Share on other sites

what i do is either make a specific image of the thing you want the person to click and then add that below the image or text on the "splash" page.

Share this post


Link to post
Share on other sites

Dang dude, I didnt think you knew that much about web design... Goodjob A+ for you dude. You probably helped out so many people. I also like how you used so many pictures. Very good.

 

again.. Goodjob! :blink:

Share this post


Link to post
Share on other sites

Man, pictures help so much and the are not appearing on my computer, just has boxes with a "X" in it. :o

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×