web design with PS: making a site adaptable

Dan

ok, I want to create my site with Photoshop... the layout etc.

but how do I make it so its going to work with all resolutions?

how can I make certain parts stretch, etc. by using repeating images, etc. without manually designing those parts and manually coding the HTML? Im not too great with HTML so I would like to do it in photoshop.

If im not on the right track here, how should I go about it? I just want at least from 800x600 - 1280x**** to be able to see the site nicely.

how can I go about this in a fairly user friendly way without designing more the one page?

and what about making templates?

ok I want to make a standard layout for my pages, but when I open them in say GoLive or Dreamweaver, how do I make it so I can only add text/images to certain parts of the template? I dont know much about this So I need some help...

Im just wanting my site to be uniform with itself, etc.

thanks for any help

MoonGurl · Posted: Sat Apr 26, 2003 1:24 am Post subject:

Well uum
i used frames and tables when i was on the easy for every one to see it kick ....
but they can be a pain in the butt
i wish i could be of more help but i just dug in and got my hands dirty looked at tons of other sites picked what i liked and what i hated then figured out how to do it ....
much luvins moonish

Dan · Posted: Sat Apr 26, 2003 1:46 am Post subject:

yah.. thanks...

I do know what I like, and I know it can be done with HTML of course... but the thing is Im still in highschool and working 40 hours a week (home courses in the evening).

I just dont got the time to be learning that deeply in HTML.

I was just hoping that PS could handle repeated BG's of tables, etc. kinda like how its done in phpbb... yah know all the tables have a repeating gradiant, or whatever that is used.

same as the banner at the top.. in the middle thats probbaly a repeating background then the logos are placed over it.

If only I had the time to learn HTML clearer Frown

heres what I have for my template so far.... first prototype:

MoonGurl · Posted: Sat Apr 26, 2003 5:45 am Post subject:

are you going to image map it ... or do roll overs or just traditional cut images that link ??
BTW i dig that hunny
a cure you may think about is sticking with what you have and then useing small tables filled with a gradient image a thin one .... say 4 pix tall and what is that mabey a 100 pix wide or visa versa if you want the gradient to cary on that theme
then you could set your table to 100 percent height
...
Or you could get sneaky all toghter and use a gradient image with gradient where you want it and white like that is then set the image as a traceing image

so that the image stay stagnent then you could place roll overs or what ever on top of it and they should justify to fit screen width Should
lol

i hope i was a little more helpful
looovins in da oven
mooon on da roof

Dan · Posted: Sat Apr 26, 2003 3:19 pm Post subject:

hnmmmm Im really not sure what Im going to do!

HAHA

see Im more of a photoshop user, then a web design guy... I can do the design, just dont know what Im doing once I take out the knife and have to chop it up Big Grin

I'll figure somethign out i guess...

JMulder · Posted: Mon Apr 28, 2003 4:34 am Post subject:

With your current design you're going to have a problem making the header stretch 100%. The idea is that you slice your header into three pieces; left, middle and right. The left and right image can be regular images but the middle part should be a pattern functioning as the background so it is repeated.

I used this idea at my forums; http://forum.mm2c.com/

The thing you need to do is decide what is going to be your left/right image and your pattern.

I never use slices in Photoshop, I always cut them up manually with the Marquee Tool and save them seperately. It helps if you have a bit of knowledge on HTML here

beetle · Posted: Mon Apr 28, 2003 9:28 am Post subject:

HTML is fairly easy to learn. I suggest brushing up before tackling a web-project.

www.w3schools.com is a good place to start.

Kinja Kahn · Posted: Mon Apr 28, 2003 10:11 am Post subject:

explore <iframe>'s and layer use, and absoltue positioning.

example:

<iframe FRAMEBORDER="0" BORDER=0 width=150 height=90 src="winamp.htm" name=winamp scrolling=no style="position:absolute; z-index: 3; top:320px; left:270px" ALLOWTRANSPARENCY= "true"></iframe>

frameborder boolean, border= pixels width & height = dimensions
src= whats page displays in the frame. name= target frame scrolling= do you want scrollbars. style position absolute means the top left corner of the frame goes here. z-index= is 3d Z like layering in PS... im no pro and may have not explained correctly but play with this and you will find alot of potential.

Personally i just target 1024x768 anyone who uses computers enough to be into CAD most likely wont be less than 1024.

TiDaL · Posted: Mon Apr 28, 2003 4:16 pm Post subject:

i frames are useful in intefaces such as teh one you showed but i dont like when they are over used, 1024x768 is a nice resolution but i think 800x600 is still the best because i no plenty of poeple that run it, although it sorda depends on who you are gonan have look at the website

Hemicota · Posted: Tue Mar 30, 2004 11:33 am Post subject:

I have been creating in 800x600, only because my computer here at work is in that format.
I have used frames, but I'm a newb to those too.

I think I'll take the suggestion of Kinja, and try it out on a site I'm building for a friend. The template was made in PS, and I sliced in Image Ready.
Currently, I'm just running a space background, to fill the background for the 1024x768 people.

Copyright © 2003-2016. PhotoshopForums.com, iFroggy Network. All Rights Reserved. Powered by phpBB © phpBB Group. phpBB SEO. Privacy Policy. We are in no way affiliated with Adobe. Photoshop, Adobe and related marks are registered trademarks of Adobe.