Photoshopdesign omzetten in code

We gaan vertrekken van een design, gemaakt in Photoshop, en die omzetten in valid xHTML en CSS. Ik werk met Photoshop en Dreamweaver in deze tutorial, maar om die te volgen heb je enkel Photoshop nodig. De code schrijven kan je ook in kladblok of dergelijke.
We gaan hier niet gebruik maken van de slicetool van Photoshop, want wat we zelf doen, doen we beter!

Het design

Om een design om te kunnen zetten naar Photoshop moet je natuurlijk een design hebben. Doorheen deze tutorial zullen we dit gebruiken:

Dit design is gemaakt door Davey. Op bovenstaande aflevering zie je het design in Photoshop, met alle nodige layers.

Start

We zullen eraan beginnen. In Dreamweaver maak ik 2 files: index.htm en acflevoland.css. De mappenstructuur is die gemaakt door Davey en ziet er als volgt uit: index.htm staat in de root, en de cssfile staat in /design/normaal/css.
In Dreamweaver heeft de hmtl-file al wat standaardcode, en dat ziet er zo uit:

Ik heb al een titel ingesteld, want Google eens op “Untitled Document” en zie waarom je dat moet doen .
Nu is het de bedoeling dat HTML en CSS gekoppeld worden: , wordt dus in de head geplaatst (ik doe dat standaard onder de metatags en boven de titel, maar die positie doet er niet echt toe.

Ook in de CSS zullen we al de eerste code schrijven, en dat ziet er als volgt uit:

*{
border:0;
margin:0;
padding:0;
}

Dit om de standaard-verschillen tussen iedere browser weg te werken. Als je wat we tot nu toe hebben al eens zou bekijken in de browser zou je enkel een wit scherm zien. Daar gaan we nu verandering in brengen!

Gelaagd werken

Omdat Photoshop-files gelayerd zijn heb ik altijd de neiging om die lagenstructuur (ongeveer) over te brengen op de HTML. Dit kan je natuurlijk niet persistent doorvoeren, maar het geeft toch een beetje houvast.

Onderaan beginnen…

We beginnen met de achtergrond, en we hebben geluk: deze heeft een standaardkleur, die bekijken we dus met de pipettool
in Photoshop. De achtergrondkleur is #cecece. We voegen dit toe op de body, als volgt:

body{
background-color:#cecece;
}

Als je nu de browserversie opent zie je al de grijze achtergrond.

…en opwerken

Daarop zullen we nu naar boven toe werken. We maken dus een soort van basis div-structuur. Als je kijkt naar het design kan je daarin ruwweg onderscheiden:

• De header;
• Het horizontale menu;
• Het verticale menu;
• De content;
• De rechter-sidebar met nieuwsitems;
• De footer;

Dit alles zit nog eens in een container. We zullen de structuur zo opmaken:

Zoals je ziet bevat iedere div content, dit omdat lege divs niet altijd goed meewerken. Nu gaan we terug over naar de css. We beginnen met het opmaken van de container. Die meten we in Photoshop om de breedte te weten, met de ruler-tool. De container is 1085 pixels breed. Hij heeft een witte achtergrond en is gecentreerd, dat voegen we dus ook toe aan de csscode:

#container{
width:1085px;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
}

De header

De header-afbeelding snijden we uit:

1. De afbeelding selecteren met de Rectangular Marquee Tool
2. Edit >> Copy Merged (Ctrl + Shift + C);
3. Plakken in een nieuw document;
4. Save For Web (Ctrl + Alt + Shift + S) > header.jpg;

We voegen deze afbeelding toe aan de header div. De juiste breedte en hoogte van de div meten we weer met de ruler-tool.

#header{
width:1085px;
height:112px;
background-image:url(../images/header.jpg);
background-repeat:no-repeat;
background-position:center;
}

Het horizontale menu

De HTML-structuur van het horizontale menu ziet er als volgt uit:

De CSS:

#menu_horizontaal{
width:1076px;
height:30px;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
background-image:url(../images/horizontaalmenu.jpg)
}

#menu_horizontaal ul li{
display:block;
float:left;
height:29px;
padding-left:17px;
padding-right:17px;
}

#menu_horizontaal a{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#666666;
text-decoration:none;
font-size:11px;
margin-top:9px;
}

#menu_horizontaal ul li:hover{
display:block;
float:left;
background-image:url(../images/menu_horizontaal_hover.png);
}

De nodige uitleg past hier wel bij. Ook bij het menu telt het principe van gebruik van lagen. Ik ben gestart met een menubalk, de div #menu_horizontaal. Die heeft de juiste afmetingen en positionering (nagemeten met de ruler-tool).
De achtergrondafbeelding was een gradiënt, in Photoshop gemaakt doormiddel van de layerstyle “Gradiënt Overlay”. Voor we die afbeelding dus konden maken moest er in Photoshop een laag worden gemaakt van de layerstyle. Dat door je door “Create Layer” aan te klikken:

Daarna kan je heel gemakkelijk de afbeelding kopiëren (je zet alle andere layers op “invisible”, neemt de One Column Vertical Marquee tool, kopieert de gradiënt, en plakt die in een nieuwe afbeelding. Saven als “horizontaalmenu.jpg”.
De rest is ongeveer standaard CSS. De hover is een transpante-overlay-afbeelding. Die moet dus gesaved worden als PNG (1px op 1px is genoeg, want je kan die herhalen).

En verder

Hierbovenaan hebben we alles gezien wat we moeten kunnen om de site om te zetten naar code. Het is dus eigenlijk een kwestie van iedere afbeelding netjes uit te knippen en toe te voegen aan de website.
Laag per laag naar boven werken.

Misschien is het nog even handig om te zeggen dat voor de meeste afbeeldingen het gebruik van een JPEG-afbeelding volstaat, maar dat er voor afbeeldingen met transparantie PNG nodig is.

Afgewerkt

@charset "utf-8";
/* CSS Document */

/* Algemene elementen */

*{
border:0;
margin:0;
padding:0;
}

body{
background-color:#cecece;
}

/* ID-elementen */

#container{
width:1085px;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
}

#header{
width:1085px;
height:112px;
background-image:url(../images/header.jpg);
background-repeat:no-repeat;
background-position:center;
}

/* Horizontaal menu*/

#menu_horizontaal{
width:1076px;
height:30px;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
background-image:url(../images/horizontaalmenu.jpg)
}

#menu_horizontaal ul li{
display:block;
float:left;
height:29px;
padding-left:17px;
padding-right:17px;
}

#menu_horizontaal a{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#666666;
text-decoration:none;
font-size:11px;
}

#menu_horizontaal ul li:hover{
display:block;
float:left;
background-image:url(../images/menu_horizontaal_hover.png);
}

/* Verticaal menu */

#menu_verticaal{
width:197px;
float:left;
margin-left:5px;
background-image:url(../images/verticaalmenu.jpg);
background-repeat:repeat-y;
padding-left:5px;
}

#menu_verticaal ul li{
height:17px;
padding-top:3px;
padding-bottom:3px;
margin-top:11px;
margin-left:20px;
}

.blauw{
list-style-image:url(../images/liblauw.png);
}

.grijs{
list-style-image:url(../images/ligrijs.png);
}

.grijs:hover{
list-style-image:url(../images/liblauw.png);
}

.blauw:hover{
list-style-image:url(../images/ligrijs.png);
}

#menu_verticaal a{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#666666;
text-decoration:none;
font-size:11px;
padding-left:25px;
margin-left:-25px;
}

#menu_verticaal a:hover{
background-image:url(../images/menu_horizontaal_hover.png);
display:block;
width:173px;
height:17px;
}

/* Content */

#content{
width:445px;
float:left;
background-color:#FFFFFF;
background-image:url(../images/contentgradient.jpg);
background-repeat:repeat-x;
padding:7px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
}

#content img{
margin-top:5px;
margin-bottom:5px;
margin-right:5px;
float: left;
}

#content p{
margin-bottom:5px;
}

/* Sidebar */

#sidebar{
float:left;
margin-left:5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
}

#sidebar div{
height:170px;
width:400px;
margin-bottom:5px;
background-image:url(../images/kreukel.png);
background-position:center bottom;
background-repeat:no-repeat;
padding:5px;
}

#sidebar h2{
font-size:18px;
text-transform:uppercase;
padding-bottom:20px;
}

#sidebar img{
float:left;
padding-right:5px;
}

.blauwitem{
background-color:#8fcdf8;
}

.grijsitem{
background-color:#cecece;
}

#archief{
font-size:18px;
text-transform:uppercase;
color:#8fcdf8;
text-decoration:none;
font-weight:bold;
text-align:center;
}

/* Footer */

#footer{
clear:both;
width:1085px;
height:15px;
background-color:#b3b5b5;
background-position:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
text-transform:uppercase;
text-align:center;
}

/*Copyright*/

#copyright{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#666666;
text-align:right;
padding-top:1px;
padding-right:5px;
margin-top:3px;
background-color:#FFFFFF;
width:1080px;
}

#copyright a{
color:#8fcdf8;
}

En hier kan je een voorbeeld bekijken.

Dit Artikel

Dit artikel is geschreven door Mattijs De Smedt, en mag niet gekopieerd of gepubliceerd worden zonder toestemming van de auteur. Het design is gemaakt door Davey.

Of bekijk een van deze handige posts die je ook interessant vind

	[TUTORIAL]Introductie tot ActionScript Een goede start om AS 3.0 te leren