Photoshop Contest PhotoshopContest.com
Creative Contests. Real Prizes. Essential Resource.
You are not logged in. Log in or Register

 


Photoshop Contest Forum Index - Ask the Experts - Slicing a layout in Photoshop? - Reply to topic

Goto page 1, 2  Next

TofuTheGreat

Location: Back where I belong.

Post Thu Mar 08, 2007 6:41 pm   Reply with quote         


I'm currently working on a new layout design for my employer's website (link takes you to a screenshot of what it is so far).

It's not done yet but I'm happy with the direction it's going (although feedback would be welcome). I would like to make this site have a fluid layout so that it will adjust to screen sizes. How would I slice this in Photoshop (or Fireworks) so that I can make it a Dreamweaver template?

Thankey kindly for suggestions!

Smile




_________________
Why I do believe it's pants-less o'clock! - Lar deSouza
”The mind is like a parachute, it doesn’t work if it isn’t open.” - Frank Zappa
Created using photoshop and absolutely no talent. - reyrey

Marx-Man

Location: The United Kingdom!

Post Thu Mar 08, 2007 7:13 pm   Reply with quote         


Right firstly.. Denotation...

Site is mainly neutral browns large text on the top right (largest there i would assume its some kind of title.)

The colour of the "Title" is deep red "WoodCounty"

Connotations.. the colour scheme used suggests its themes on the wood elements mentioned in the title... as an anchor to the wood part.

the layout and conventions seem to be set for a simple page layout with boxes filled wth text information possibly pictures and so on...

No animation as of yet but it has potential for an animated navigation button system either gif over states coded in html or flash.
the slicing i would recommend...

saving one long thin slice of that background and using that as a vertically aligned tile saving greatly on loading times... only load it once and it carrys on down the page as part of the css style... the logo make it a transparent png that way if sombody does come to the site they can copy the logo straight from the cache and use it without fucking around with it and it will be high quality...


navigation

cut the button states out... Over,on, down and hit if necassary.
for each buttons in the navigation...

so the heirachy looks kinda like.

- natural web background colour matching the extreme edges for seamless appearance.
- Tiled background above that centrally aligned loads second as it wont take less than a second. and the text needs somthing to contrast with.
- navigation loads first after the misc quick backdrop has been placed. for quick browsing for people who have been there before..
- Title at the top (need to know where you are.)
- Contents in the middle (know where you are theres the content.)
Png logo at the bottom, (loads last a it is of a high quality. should be placed over the top of the tiled background...)

well thats my slant on it anyways




_________________

Marx-Man
Guest

Post Thu Mar 08, 2007 8:10 pm   Reply with quote         


great post




TofuTheGreat

Location: Back where I belong.

Post Thu Mar 08, 2007 8:35 pm   Reply with quote         


Marx-Man wrote:
Right firstly.. Denotation...

Site is mainly neutral browns large text on the top right (largest there i would assume its some kind of title.)

The colour of the "Title" is "Wood County"

Ummmm... I know. I'm making/doing it.
Marx-Man wrote:
Connotations.. the colour scheme used suggests its themes on the wood elements mentioned in the title... as an anchor to the wood part.

the layout and conventions seem to be set for a simple page layout with boxes filled wth text information possibly pictures and so on...

Great grasp of the obvious you've got there Marx. Razz
Marx-Man wrote:
No animation as of yet but it has potential for an animated navigation button system either gif over states coded in html or flash.
the slicing i would recommend...

saving one long thin slice of that background and using that as a vertically aligned tile saving greatly on loading times... only load it once and it carrys on down the page as part of the css style... the logo make it a transparent png that way if sombody does come to the site they can copy the logo straight from the cache and use it without fucking around with it and it will be high quality...
Must fight urge to say no shit sherlock. Web developer but not graphic artist however I do know how to do background images and tiles. The part I'm worrying about is fluid layout along the width (length pretty much takes care of itself).
Marx-Man wrote:
navigation

cut the button states out... Over,on, down and hit if necassary.
for each buttons in the navigation...

so the heirachy looks kinda like.

- natural web background colour matching the extreme edges for seamless appearance.
- Tiled background above that centrally aligned loads second as it wont take less than a second. and the text needs somthing to contrast with.
- navigation loads first after the misc quick backdrop has been placed. for quick browsing for people who have been there before..
- Title at the top (need to know where you are.)
- Contents in the middle (know where you are theres the content.)
Png logo at the bottom, (loads last a it is of a high quality. should be placed over the top of the tiled background...)

well thats my slant on it anyways


Anyone else understand what I'm trying to do? Maybe it'd help if I finished the preview so that people can see the nav links and other features.




_________________
Why I do believe it's pants-less o'clock! - Lar deSouza
”The mind is like a parachute, it doesn’t work if it isn’t open.” - Frank Zappa
Created using photoshop and absolutely no talent. - reyrey

nifft

Location: italy

Post Thu Mar 08, 2007 8:43 pm   Reply with quote         






gravyboat

Location: Northern NY

Post Thu Mar 08, 2007 9:00 pm   Reply with quote         


Looks good Tofu. Very...Wisconsony, that's the word. Laughing Seriously I like it. Smile




_________________
Not All Who Sing "The Wanderer" Are Dion

The Closer you get to Canada the more things there are that wanna eat your horse.
EJH

Location: NYC

Post Thu Mar 08, 2007 9:06 pm   Reply with quote         


This has nothing to do with web design, but I have a couple very small design-y suggestions...

I would suggest kerning the "Wood County" heading a bit... in other words, close up some of the space between the letters-- particularly in "Wood"-- and especially between the "W" and "o". (Well-set type can often be that little detail that makes a design "professional"-looking.)

And center "In beautiful central Wisconsin" vertically in the bar. Not sure if you intentionally set it a little high (so as not to be mistaken for a clickable menu item), but it looks odd to me. Perhaps make that type the same red as "Wood County" so it ties together better.




mightybeet
Site Moderator

Location: connecticut

Post Thu Mar 08, 2007 9:21 pm   Reply with quote         


what the slicin will do is make a table cell fer each slice. soooo... keep it simple stu... er... tofu... Razz ya can then manipulate the tables, table size cell size in dreamweaver.

the problem is that there are so many ways of doing this that it just become personal choice... like with everythin else done is photoshop...

dont go crazy slicin it up.. just cause ya sliced everythin into lil images at the size 1kb, they will still add up.

"about directory...etc" unless yer using a special font, just use linked type when ya bring it into dreamweaver. "Wood county" & "in beautiful blahblah.." can be one big banner image. OR "in beautiful" can also be texted in... OOOOOORRRR...
i dont know.. read what nifft linked Razz

theres a nav bar option in dreamweaver that will set it up a template and if ya change that, it will automatically change it for all the files.




_________________

L@rue: I'm eating a bag of bbq chips and drink a cocacola
mightybeet
Site Moderator

Location: connecticut

Post Thu Mar 08, 2007 9:28 pm   Reply with quote         


... i think i remember how to do it. once ya have it set up save it as a template in dreamweaver. while in the template ya can set certain table cells that are affected by the template whenever ya make changes to it and areas that will be left alone

then ya creat a new from the template you ll see the areas that are template and areas that ya left open for manipulatin. fill it the empty areas wth whatever and save it as about.html etc... just create a new from template fer each page and ya should be all set




_________________

L@rue: I'm eating a bag of bbq chips and drink a cocacola
TofuTheGreat

Location: Back where I belong.

Post Thu Mar 08, 2007 11:31 pm   Reply with quote         


EJH wrote:
This has nothing to do with web design, but I have a couple very small design-y suggestions...

I would suggest kerning the "Wood County" heading a bit... in other words, close up some of the space between the letters-- particularly in "Wood"-- and especially between the "W" and "o". (Well-set type can often be that little detail that makes a design "professional"-looking.)

And center "In beautiful central Wisconsin" vertically in the bar. Not sure if you intentionally set it a little high (so as not to be mistaken for a clickable menu item), but it looks odd to me. Perhaps make that type the same red as "Wood County" so it ties together better.


Thanks for the tippage E! I've done some edits and hopefully it's better. I've also added dummy text to show where the design is going. Very Happy

http://i12.photobucket.com/albums/a232/tofuthegreat/Site-Makeover-Template.jpg

Thanks also to you Beetster. I am pretty familiar with templates in Dreamweaver (as I am layout tables, layout divs, etc, etc, etc.). I was indeed planning on using CSS and text for as much as possible.

Lemme see if I can describe my question a bit better. See the background border that appears on the left and right? I want keep those edges no matter what the viewer's browser width is set to (within reason say down to 800x600 which is, I believe, is actually somewhere around 783x550 or so of viewable area).

So I'm wondering how to slice the image so that I can keep those right and left borders. Everything else is easy really. I thought about doing a 5px high bar section for the vertical tile (basically what Marx said). But that limits my width to the width of the slice. I want the width to expand or contract. Maybe I just need to do a right and left slice, vertically tile those and then just set the background to the color?




_________________
Why I do believe it's pants-less o'clock! - Lar deSouza
”The mind is like a parachute, it doesn’t work if it isn’t open.” - Frank Zappa
Created using photoshop and absolutely no talent. - reyrey

TofuTheGreat

Location: Back where I belong.

Post Thu Mar 08, 2007 11:39 pm   Reply with quote         


OH! And thank you to nifft for pointing that site out. I haven't finished reading through it yet but it does look like it'll help. Very Happy

And, BTW, the colors are from our "tourism" logo (it's in the bottom right with the lowered opacity). The board paid a ton of money for the thing and they've demanded we use it. Funny thing is that they paid enough that they probably could have had a logo and a web template done. But they didn't know better and didn't ask us (the IT dept) for advice before doing it. Now we can't afford a designer so I get the duty.

Also it appears that my laptop's color profile is different than my desk's flat panel so now I've got to determine the best color profile before generating my slice images. Confused




_________________
Why I do believe it's pants-less o'clock! - Lar deSouza
”The mind is like a parachute, it doesn’t work if it isn’t open.” - Frank Zappa
Created using photoshop and absolutely no talent. - reyrey

EJH

Location: NYC

Post Fri Mar 09, 2007 12:21 am   Reply with quote         


TofuTheGreat wrote:
Thanks for the tippage E! I've done some edits and hopefully it's better.

Better-- though I think that heading needs a little breathing room from the top of the header bar. And maybe adjust its shadow so it's got a little less blur, and is 180 degrees from where it is now (down and to the right, rather than up and to the left). You'd need to nudge the subhead away a little, so it's not sitting in the shadow.

sorry to nitpick, just trying to help Smile




Lord David

Location: Melbourne, Australian Continent, Earth, Sector 001, United Federation of Planets, Alpha Quadrant.

Post Fri Mar 09, 2007 1:29 am   Reply with quote         


TofuTheGreat wrote:
Anyone else understand what I'm trying to do? Maybe it'd help if I finished the preview so that people can see the nav links and other features.


Yes. To try and avoid the useful information of the Marx-Man. Wink




_________________

supak0ma

Location: Photoshop Nation

Post Fri Mar 09, 2007 4:34 am   Reply with quote         


the color scheme isn't exciting for me, be sure to use text links for the menu, if i understood you want the website to resize itself horizontally...why? that would compromise all of your design work, stick with a width and keep going.




supak0ma

Location: Photoshop Nation

Post Fri Mar 09, 2007 4:41 am   Reply with quote         


and another thing, i suggest going for css layout, ditch tables and use them for what they were intended for: tabular data. Trust me you'll be very happy plus the pages load way faster, this way you'l only need 4 images: the header, the menu strip, the shadow and the bottom right logo, the rest use #colors.

cheers




Goto page 1, 2  Next

Photoshop Contest Forum Index - Ask the Experts - Slicing a layout in Photoshop? - Reply to topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Navigate PSC
Contests open  completed  winners  prizes  events  rules  rss 
Galleries votes  authentic  skillful  funny  creative  theme  winners 
Interact register  log in/out  forum  chat  user lookup  contact 
Stats monthly leaders  hall of fame  record holders 
PSC advantage  news (rss)  faq  about  links  contact  home 
Help faq  search  new users  tutorials  contact  password 

Adobe, the Adobe logo, Adobe Photoshop, Creative Suite and Illustrator are registered trademarks of Adobe Systems Incorporated.
Text and images copyright © 2000-2006 Photoshop Contest. All rights reserved.
A venture of ExpertRating.com