/    Sign up×
Community /Pin to ProfileBookmark

Slicing Images/Creating Layout

Copy linkTweet thisAlerts:
Jun 30.2008

Hi, I’m looking for some help regarding using Photoshop to create a website layout that I can then add content to using a simple HTML editor.

Of course, if I had Dreamweaver on my MacBook I think it would be fairly easy to do this, but I don’t. I know I could just save my sliced layout as an HTML file, open it in Dreamweaver, and edit it like that. However, like I said, I don’t have it on my MacBook, and I prefer to use simple text/HTML editors anyway. I use TextEdit for this.

And that’s basically where I’m stuck. I don’t know how to take the HTML file that Photoshop gives me and add content, links, images, etcetera to it. Let me show you.

When I saved the sliced layout as an HTML file I got this

[code=html]<html>
<head>
<title>layout</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body bgcolor=”#FFFFFF” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
<!– ImageReady Slices (layout.psd) –>
<table id=”Table_01″ width=”930″ height=”1000″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td colspan=”4″>
<img src=”images/index_01.gif” width=”930″ height=”144″ alt=””></td>
</tr>
<tr>
<td colspan=”4″>
<img src=”images/index_02.gif” width=”930″ height=”40″ alt=””></td>
</tr>
<tr>
<td>
<img src=”images/index_03.gif” width=”180″ height=”670″ alt=””></td>
<td>
<img src=”images/index_04.gif” width=”1″ height=”670″ alt=””></td>
<td>
<img src=”images/index_05.gif” width=”568″ height=”670″ alt=””></td>
<td>
<img src=”images/index_06.gif” width=”181″ height=”670″ alt=””></td>
</tr>
<tr>
<td colspan=”4″>
<img src=”images/index_07.gif” width=”930″ height=”101″ alt=””></td>
</tr>
<tr>
<td colspan=”4″>
<img src=”images/index_08.gif” width=”930″ height=”45″ alt=””></td>
</tr>
</table>
<!– End ImageReady Slices –>
</body>
</html>[/code]

which looks like this: [url]http://pkmn.xboxsavage.com/[/url]. The first box from the top would be the main banner, the next one down a small navigation bar. The vertical boxes on the left and right would be where all the links are. The largest box right in the middle, the content of course. The larger box at the bottom would probably contain affiliate buttons with the last box right under that as the copyright notice.

And the entire thing is supposed to be centered on the page with a repeating background image behind it. Some other sites that are extremely similar to what I’m trying to create, are: [url]http://rctgo.net/[/url], [url]http://serebii.net/index2.shtml/[/url], and [url]http://www.sivph.com/[/url]. Hopefully those sites give a good visual idea of exactly the kind of layout I’m trying to make, which I think is probably fairly easy, I just don’t know how to do it myself.

So, could anyone possibly give me some assistance with this?

to post a comment
HTML

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAJun 30.2008 — I believe this is the template you're looking for: http://www.pmob.co.uk/temp/3colfixedtest_4.htm

KDLA
Copy linkTweet thisAlerts:
@AftershockauthorJun 30.2008 — Thanks, that is indeed very similar to what I'm trying to create.

However, I'd still like to know how to do this with Photoshop. Because once I learn how I plan on going back into Photoshop to create a much nicer layout (graphically speaking, similar to the one on RCTgo). So if I can figure out how to use Photoshop to create my layout with this very basic layout I made now, I should hopefully be able to work my way up.
Copy linkTweet thisAlerts:
@KDLAJun 30.2008 — You don't want to do that. Photoshop creates an HTML layout using either tables or absolute positioning, which can be a real pain to edit, much less be cross-browser friendly and accessible. ?
Copy linkTweet thisAlerts:
@AftershockauthorJun 30.2008 — I thought most layouts with really nice graphics (such as RCTgo) are made in Photoshop (RCTgo was actually made in The GIMP).

So are most website images made with Photoshop by themselves and then put into a whole layout by hand?
Copy linkTweet thisAlerts:
@Mr__E__CrypticJun 30.2008 — As an example - I would generally design all my sites in Photoshop (although, always paying a lot of attention to how it will be implimented in HTML). This 'Design' is only ever a reference though.

From there you should be trying to duplicate the layout in HTML as much as possible, picking from the raster design only the parts that [I]have[/I] to be graphics and incorporating them into the design. In the days of table based layouts this was a huge pain in the piece of flesh between the bottom of your back and top of your legs, but with CSS it's a doddle.

I suppose what I'm trying to say is that your photoshop design is really only to facilitate designing - it's a snapshot of what you really want to do.

I'd suggest flicking through a few tutorials on XHTML and CSS before you get started.
×

Success!

Help @Aftershock spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...