View Full Version : Coding A Layout From Picture


Spit_Me_Out
08-10-2006, 05:28 AM
Well i designed my new layout for the first time with GIMP and image program.. I finally devised my own way of making a layout with the program. And it turned out really good looking.

Now i have never designed a layout with gimp or photoshop then coded it before, so i have no idea how to start. could anyone please tell me how to do this? because i need to get my website up as soon as possible for personal reasons which i do not want to discuss over the net. Nothing serious, just some reasons. But anyone who can help i would greatly apreciate it!:tired:

Arwen
08-10-2006, 08:59 AM
What kind of layout is it? Tables, div, iframe? Here (http://celestial-star.net/tutorials/designs/) are some tutorials for Photoshop. :)

Spit_Me_Out
08-10-2006, 09:18 PM
What kind of layout is it? Tables, div, iframe? Here (http://celestial-star.net/tutorials/designs/) are some tutorials for Photoshop. :)

Click Here (http://www.slipknotcpd.com)

it is very similar to that website. the navabar to the left and the page content in the center, then another side bar with some like updates or adds, or a quick forum log in. like that.

Arwen
08-10-2006, 09:43 PM
Then you can try this (http://celestial-star.net/tutorials/read/38/) one. Or search for 'table layout tutorial'.

Spit_Me_Out
08-11-2006, 12:22 AM
that didn't help, i don't use photoshop. the opnly thing i used was GIMP it is a free photoshop like program. so that didn't help

If i posted the layout design would that help you help me a littel?

Arwen
08-11-2006, 09:39 AM
I don't think it's possible to code a layout with Gimp. You can download a free trial of Photoshop or just search for 'table layout tutorial'.

Scottishchick
08-11-2006, 04:13 PM
Theres a couple tutorials for making layouts at magitek-designs.net (http://www.magitek-designs.net/) if that helps :)

Spit_Me_Out
08-12-2006, 08:00 PM
I don't think it's possible to code a layout with Gimp. You can download a free trial of Photoshop or just search for 'table layout tutorial'.

there is no way to CODE a layout, but you can design one, and i heard from one of my friend that you could just code it from scratch, he siad he used to do it a long time ago. so i am asking how i can do that

J to the izzosh
08-12-2006, 08:11 PM
Well, you will need to start by learning HTML - and preferably, CSS - if you haven't already. After that, it is a simple matter of appropriately cutting your layout image up in the GIMP, or any other raster image editor, and then using HTML with CSS to position those image sections and add other content to the page, such as text, links, other images, etc.

I believe Arwen was suggesting Photoshop (or ImageReady) as they contain what Adobe calls the slice tool which allows you to crop your image into sections in the program and have it automatically exported as separate images with the necessary HTML. But I'd recommend coding it yourself from scratch, as you were intending to, as it provides you greater control and flexibility.

Spit_Me_Out
08-13-2006, 01:43 AM
Well, you will need to start by learning HTML - and preferably, CSS - if you haven't already. After that, it is a simple matter of appropriately cutting your layout image up in the GIMP, or any other raster image editor, and then using HTML with CSS to position those image sections and add other content to the page, such as text, links, other images, etc.

I believe Arwen was suggesting Photoshop (or ImageReady) as they contain what Adobe calls the slice tool which allows you to crop your image into sections in the program and have it automatically exported as separate images with the necessary HTML. But I'd recommend coding it yourself from scratch, as you were intending to, as it provides you greater control and flexibility.

I know HTML and CSS.

I have just never coded a layout from scratch before. The first and only other layut i had was made with a free trial of dreamweaver. SO coding from scratch like his is a new thing. and i don't know where to start or let alone how to strt it.

Are there any tuts here that will explain to eme how exactly to do whatr i want to do?

General MJ
08-13-2006, 01:47 AM
search google for TextPad, and download it..then in the left scroll bar, select html tags. Double click blank page and there you go, you've started a webpage..but its better to learn how to do it from scratch so that you can do it anytime..if you dont want to go through all that trouble, then copy this into notepad or another textediter you have:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Generator" CONTENT="TextPad 4.6">
<META NAME="Author" CONTENT="?">
<META NAME="Keywords" CONTENT="?">
<META NAME="Description" CONTENT="?">
</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" BACKGROUND="?">

</BODY>
</HTML>


thats very basic..