Just starting out . .. A few questions

[jnick]

Hey guys.

I've been messing around with photoshop for about 6-8 months so far. I mainly used it to do a TINY bit of photo manip and designing wallpaper. Well now I'm about to get a website. So I htought this would be a good opportunity for me to venture into web page design . . except I lack the knowledge. So I have a couple, of what I think ar good questions, heh.

1. The sie of the layout . . .From most of my research, I should be setting the pixels to around 760x600 . .. correct?

2. So I create a layout, and now 4 months down the link, I want to add another navigation "button" . . err . . .does this take MAJOR surgery?

3. Ok, so now I have created just the graphical layout of my website. I haven't sliced it yet (don't even know what that is :/). So I slice it (..?) then bring it into dreamweaver and in dreamweaver, is that where I would position the site on the web page? I would obviously want it cenetered, but once I make it in PSCS, Save for Web, and then view with IE, it isn't centered at all. Should I be centering it in PS? I would think the main background would be done with Dreamweaver, a long with the location of the layout on the screen, correct?

4. Everything is finally completed . . . Now do I upload the image to the site via dreamweaver . . .? Or do I upload the Save for Web image to my directory, then somehow enable it with DW?

5. I'm assuming that I "activate" the links on the navigation bars, or wherever via DW, right? Like, I have my layout, and now want to make the "HOME" button actually go to the main page of my site. Entering the link in the button is done in DW right?


Thank you for all of your patience and help in advance. I truly appreciate it.

Jnick

 

[theKeeper]

Hi jnick...

YES to #1.
But that size is relevant to the visitors you are either targeting, or already getting. If you don't know this though, go with the size you mentioned until your 'stats' show you otherwise.

NO to #2.
But that's also dependant on how you design your navPanel.
Think 'liquid design' -- as in... expandable.

NO to #3.
No to doing the BG in DW, and that kind of thing.
Do everything in PS. When you slice the layout PS will generate the html page for you. After that, open the page in DW and in there, you select the main layout table and center it on the page.
NOTE: if you use CSS tags instead of tables (under the Save Settings options in IR), you'll surround your content (in CODE View), with Div Align="center" tags.

NO to #4.
You CAN use DW to upload your site if you wish. That will avoid you needing a separate FTP app for that. You'll have to go through ans setup a "Site" in DW so that you can supply the program with the information it needs to connect to your server.
And when you say "image" in PS... you should really be thinking "imageS". Once sliced, your layout/design will typically consist of several images.

YES to #5.
All html coding/scripting is done within DW.
The exception is that when you first save out your design from SP and PS writes the initial page code for you.

Hope that helps. [excited]

 

[jnick]

Thanks a LOT Keeper.

But as always, I just have a few to follow up

Though the best way to ask, is with a picture, heh.

I kind of made that following a tutorial, to get me started.

Is this how I would create the site all the time. Do I have to proper idea as in positioning of the "boxes"? Like if you take this forum for example. Let's just say it was the main site. You have the forum in the middle, and then surrounding it is the yellow color, which I assume is the background.

That background color SHOULD be done in PS, correct? Now with the layout I made via a tutorial, the navigation boxes, whould they have been moved "in" more, so there was some background to the right and left of it, or is it fine the way it's butted up against the corner.

Lastly, So I need to add something in the tope left box a couple of months down the road. But ALREADY the box is full, lets just say. Err, how do I go about doing this to where I can kind of expand the box persay, to add something new. Would I just go to Edit > Free Transform, and stretxh it?

Thank you for your patience and knowledge, I appreciate it .

Jnick

 

[theKeeper]

Is this how I would create the site all the time. Do I have to proper idea as in positioning of the "boxes"? Like if you take this forum for example. Let's just say it was the main site. You have the forum in the middle, and then surrounding it is the yellow color, which I assume is the background.

Yes the yellow is just a BG colour that's designated in the page code BODY tag, or with your CSS attributes.

That background color SHOULD be done in PS, correct? Now with the layout I made via a tutorial, the navigation boxes, whould they have been moved "in" more, so there was some background to the right and left of it, or is it fine the way it's butted up against the corner.

No the layout is completely up to you. If you want the shapes 'hugging' the edges that's fine. Especially if your design is "liquid" in nature.

Lastly, So I need to add something in the tope left box a couple of months down the road. But ALREADY the box is full, lets just say. Err, how do I go about doing this to where I can kind of expand the box persay, to add something new. Would I just go to Edit > Free Transform, and stretxh it?

No. There's a specific way to create a 'liquid' design/layout and i've shown that in the attached image.

The red lines are your Guides. The coloured section on the top left box show how you'd slice the boxes -- ALL of them are done in this way. The green parts are the header/footer sections. The blue part is where your content will go, and the red parts are what will make the box 'liquid', as in expandable. Those side images would be designated as background images in either your table (TD) cells, or within your CSS style attributes.
Because those images are background images, they will tile endlessly within their assigned area. So when you add more content, the box will appear to just grow in height. This technique can also be applied to the box width if you want/need to.

This whole design concept is a little much to grasp if you're just starting out with Web Design. So don't feel bad if you don't understand it right-off.

Here's what you would do to get this done in DW. ( if you're using a table layout )
After slicing and saving out your design from PS or IR, open the generated html file in DW. Your panelbox 'side' images will be contained within cells, and you will delete those images. But first, click on one of the images and cut the image path/name from the properties box. Then press your ENTER key. Then click in the TD cell itself ( where the image used to be ), and paste the name/path into the BG textbox for that table cell.
(see my example image below)
Just repeat this with all of the panelbox 'side' images.

Special Design Notes:

1) Make sure that all of your panels are aligner vertically the same. Otherwise you'll have a heck of a time slicing properly.
FYI i had to correct your alignment for my example image.

2) The slices are made at precise spots around the boxes. The optimal slicing spot is right at the point where the bend in the corner straightens out. Slice just a fraction past that point. That will also help to create a natural margin all the way around your content too.

3) If using this technique with a CSS layout, then you can set a special attribute that will cause the images to only be tiled vertically, not horizontally. Which in some situations will prevent the layout getting graphically messed up. The attribute would look like this in CSS:

background-image: url(images/myImage.gif);

This should help get you started. I suggest you search the Web a bit for specific info on designing using CSS. Or even for more specific info on using images as 'backgrouns' for table cells.

 

[jnick]

Thank you VERY much for the time you put into this.

So basically all of the slicing and the "liquifying" that you did, was done in DW right? So when I'm done designing the page with CSS, I take it into DW and slice it/liquify it? Or do I have this backwards?

Now the red is where it was liquified. So this means that the red will "stretch down" when there is too much type, right? And then if I applied it to the header/footer, the box would stretch out . .

If that's correct, Then I understand what you're saying .

Thanks again.

Oh and about the alignment . . Yeah . . I knew they were off. For some reason I couldn't get it aligned. I was even holding the shift key . . . but still nothing.

Jnick

 

[theKeeper]

So basically all of the slicing and the "liquifying" that you did, was done in DW right? So when I'm done designing the page with CSS, I take it into DW and slice it/liquify it? Or do I have this backwards?

Ya you have that backward. The slicing is done in PS, not DW. DW is not a graphic editor.

Now the red is where it was liquified. So this means that the red will "stretch down" when there is too much type, right? And then if I applied it to the header/footer, the box would stretch out . .

That's correct. Except the images don't *really* stretch, they tile (repeat) vertically. And that's why you have to be careful where you slice them at. Because if you catch any of the corner in the side slices, they won't tile seamlessly. You'll end up seeing where each side image ends and starts over. That's why you don't slice the sides all the way down from top-to-bottom.

Get it?

Sounds like you're starting to understand more. [excited]

FYI: if your version of PS doesn't have the alignment tools, then turn on your Grid when creating your panelboxes. Then make sure "Snap to Grid" is turned on.

 

[Tron]

jnick, seems you are on the right path, here is a link to a tutorial that might open your eyes a little.
Give this tute a try and you will understand a little better what Mark is telling you.

Best

http://www.purephotoshop.com/article/54

I am not telling you to leave Photoshop Gurus, this tute was written by one of our members on his own site.

 

[jnick]

Hey Thanks guys. I appreciate all of your help. I'll remake it and post the results soon!

=)

Jnick