Web Hosting Talk







View Full Version : Making a Webpage in Photoshop


ScionStatic(Stevo)
11-11-2004, 08:12 PM
While i was looking at a photoshop tutoral site..i noticed many that said "Good Site in Photoshop!" etc. where they would make one big image...and make it their site. My flash designer friend told me that they slice up the images and make it (but thats all he knew of). I would like to do that..since it looks cool. Anyone understand how they make them like that?

Abaweet69
11-11-2004, 08:25 PM
Uses the slice tool to cut out your images.

Then go to file, save for web

ScionStatic(Stevo)
11-11-2004, 08:42 PM
When adding text for content ..how do you get it in the content space (sorry im so stupid lol).

Hosemeyer
11-11-2004, 09:08 PM
you set the image that you want to type on as a backround image

Abaweet69
11-11-2004, 10:12 PM
^ You do that by rigth clicking on the slice.

and yes it takes a couple tries to get a hang of

blizzard-media
11-12-2004, 11:40 PM
When adding text for content ..how do you get it in the content space (sorry im so stupid lol).

If you wanted to use HTML for the text instead of making it part of the image (search engines won't be able to process it if the text is embedded in the image) then you could try making the slice the background image of a table cell. Then you can use HTML to write the text in the cell and effectively write on top of the image just as you would if you had done it in Photoshop. This too will take a little bit of tweaking to get right but it is another option.

UnLiMiT3D
11-13-2004, 04:46 AM
http://www.skinsntemplates.com/view.php?id=54&title=Photoshp%20To%20Dreamweaver
There is a tutorial that should help you.

Note: Dreamweaver needed though. You can get a free trial at www.macromedia.com

WebDesignGold
11-13-2004, 03:14 PM
Here's one tutorial for you..

Building a webpage in Photoshop/ Imageready and Dreamweaver (http://photoshopcafe.com/tutorials/super%20tutorial%202/website.htm).

Araunah
11-13-2004, 05:23 PM
More info about image templates and photoshop there.

http://www.aplustemplates.com/tips/template_tips.shtml

0wn4g3
11-13-2004, 08:50 PM
A good suggestion would be to not use the code that Imageready spits out as it sucks, the best thing to do would be to edit it within dreamweaver or apply all of your own html code to the pictures.

ScionStatic(Stevo)
11-14-2004, 03:43 AM
I used a tutorial off good-tutorials.com, but made the navi on my own (*gasp*). www.stevonio.com (the link under banner). Its just an expirement, not that great but its my first one.. Ill look at that tutorial Notpro and Araunah..thanks

Araunah
11-14-2004, 07:26 AM
No problem, you are welcome.

jamesyfx
11-14-2004, 10:16 AM
Looks pretty good actually.

What would happen if there was too much content for the contentarea though?

Egan311
11-18-2004, 05:31 AM
I have a related question so I thought I'd ask it here.....

Can I make a table cell with a scrollbar on the right side of only that cell?

It's driving me nuts! :rolleyes:

Marble
11-19-2004, 05:40 AM
iframes ...

Egan311
11-19-2004, 06:16 AM
Yeah. A friend hooked me up with the iFrame code. Works great. Thanks.....

meth0
11-19-2004, 06:46 AM
Pushing the text content beyond the conifines of an absolute td will bust the layout of the 'photoshop' graphic. You cant make a cell have its own scrollbar, use a div layer with scrollers for content overflow instead.

Designing a website around its graphics and is ridiculous. You place unnecessary limitations on your content. Analyse the content needs of the page, then design the layout to accomodate it.

senphoenix
11-20-2004, 12:06 AM
Originally posted by TCHQ-0wn4g3
A good suggestion would be to not use the code that Imageready spits out as it sucks, the best thing to do would be to edit it within dreamweaver or apply all of your own html code to the pictures.

i totally agree with you, man. if you do everything in photoshop /imageready, when u move to dreamweaver to modify the code, they tend to occur error..

for example rollover button making in imageready then move to dreamweaver to put text in to my content.. then i modify the table structure that created by imageready, when i hover the rollover button, java script errer occur.. i try to figure out what happen, but i failed... :confused: may be i am not expert enough?:D

Egan311
11-21-2004, 04:07 AM
You place unnecessary limitations on your content. Analyse the content needs of the page, then design the layout to accomodate it.
You're right. But in this case, the content IS the graphics with very little text. Although I wanted the option of scrolling if needed.

Thanks for the advice. :)

ScionStatic(Stevo)
11-22-2004, 04:13 PM
When i try to enter a scroll box in the text area...it scrambles up the whole page :-(

http://www.stevonio.com/Layout34.htm

WebDesignGold
11-23-2004, 03:50 PM
When i try to enter a scroll box in the text area...it scrambles up the whole page :-(

http://www.stevonio.com/Layout34.htm
A hint:
In your source code, you only have one "font" tag.. and it's a closing tag! Btw, "font" is depricated.
then you have three "table" tags.. two of them are closing tags!

ScionStatic(Stevo)
11-25-2004, 07:02 PM
Alright, im making tubes for my webpage now. The problem is once im going to make the lines overlay and their fill lower i dont want to have to go and do it to all 100 speratly. How can i make it where i do them all at once? http://stevonio.com/temp/HELP.jpg

P.S. Im using this tutoral http://www.good-tutorials.com/track/2201

Louis Prima
11-26-2004, 02:37 PM
You know, those Photoshop "slice-sites" look cool and all, but they're friggin HUGE!

Whenever I check out Monster templates, I have to wonder 'who wants a 170k front page?!?'