Newbie Questions

DarkLogan · Posted: Mon Jan 18, 2010 1:29 pm Post subject: Newbie Questions

1) When making a layout in photoshop what is the average size of the layout suppose to be ?

2) Is slicing a must or just a preference ??

3) After the layout is made do you use like Microsoft Frontpage to make it all work ??

I'm lost guys i could really use some pointers here. Thx

darklite · Posted: Mon Jan 18, 2010 4:40 pm Post subject:

There is no average size. However, I prefer to design mine 1024 px wide to accomodate widescreen monitors.

Using slices would probably be the best way to go. That's what I would probably recommend. Once you get your image sliced and ready to go, if you do a 'save for web' and choose 'HTML and image', it will generate the html for you. Plus, it will generate the CSS for you as well if you like. Once you make a slice, you can right click on it, and set options like links etc.

Below is an example of a template with the generated html output. I just left it at tables. It originally started off at 226k which means an approximate 40 second screen loading time online with an average dial-up modem.

This code you see below is from a sliced template which is now 2.57k in size. Tremendous difference. I hope this helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">

<table id="Table_01" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<img id="temp1_01" src="images/temp1_01.jpg" width="441" height="51" alt="" /></td>
<td colspan="3">
<img id="temp1_02" src="images/temp1_02.jpg" width="583" height="51" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img id="temp1_03" src="images/temp1_03.jpg" width="45" height="344" alt="" /></td>
<td>
<a href="http://www.mysite.com">
<img id="button_left" src="images/button_left.jpg" width="146" height="37" border="0" alt="" /></a></td>
<td>
<a href="http://www.mysite.com/page1.html">
<img id="button_2" src="images/button_2.jpg" width="152" height="37" border="0" alt="" /></a></td>
<td colspan="2">
<a href="http://www.mysite.com/page2.html">
<img id="button_3" src="images/button_3.jpg" width="151" height="37" border="0" alt="" /></a></td>
<td>
<a href="http://www.mysite.com/page1.html">
<img id="button_4" src="images/button_4.jpg" width="150" height="37" border="0" alt="" /></a></td>
<td rowspan="2">
<img id="temp1_08" src="images/temp1_08.jpg" width="380" height="344" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img id="temp1_09" src="images/temp1_09.jpg" width="396" height="307" alt="" /></td>
<td colspan="2">
<img id="temp1_10" src="images/temp1_10.jpg" width="203" height="307" alt="" /></td>
</tr>
<tr>
<td colspan="4">
<img id="temp1_11" src="images/temp1_11.jpg" width="441" height="373" alt="" /></td>
<td colspan="3">
<img id="temp1_12" src="images/temp1_12.jpg" width="583" height="373" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="45" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="146" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="152" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="98" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="53" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="150" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="380" height="1" alt="" /></td>
</tr>
</table>

</body>
</html>

DarkLogan · Posted: Mon Jan 18, 2010 5:01 pm Post subject:

Ok very cool. So when i slice i should slice every little thing possible
Buttons Bars etc ?? And is it PS i use to do the slicing or another program ?

Also i read somewhere that the length of the layout dont matter because as you add content over time the layout will stretch ? How is that possible ? Or should you always keep your psd so that when you add content you can simply rezise the length ??

I know its alot of questions but i hate to get started adding content just to find out that i have to remake the layout all over cuz i didnt leave myself enough room to either side. I can say that i will be adding/removing extra content boxes all the time. Thx so much for your time and patience.

darklite · Posted: Mon Jan 18, 2010 5:27 pm Post subject:

Yeah, I'd do it all in PS, or Image Ready. I've attached a quickie example. I usually slice the background into sections, then make a slice for every link button. I can then right click up on the corner of the slice and choose 'edit slice options'. It's in here that you can apply slice titles (they make it easier) such as 'button 1' etc. You can also apply links, target links, alt tag etc.

But it's really up to you. If the bars, banners, boxes etc. aren't linking to anything, it's not always necessary to slice them. The slices keep the layout absolutely intact no matter where you cut it. It's kind of like beaming somebody down to another planet. A big mass gets broken up into smaller peices. However, if all the elements make the overall file size bigger, you might want to slice them as well.

As far as the layout stretching, it expands downward with the web content, the template stays the same. Once you design it, that's it. It's only the added content like text that grows with the layout, and that's also completely dependent on the type of positioning you use.

There is talk about liquid layouts, but I don't know anything about them yet. Keeping an original layered PS piece is always the best idea. You can always use the slice select tool to drag images, or make the slices larger.

DarkLogan · Posted: Tue Jan 19, 2010 4:53 pm Post subject:

I was reading a post from w3schools and it says with todays CSS there is no need to slice. Im really trying to figure out what is gonna be my best bet for when it comes to updating and what not.

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.