Slik konverterer PSD Maler til HTML i CSS
PSD eller Photoshop Document er en bestemt fil format for bilder og grafikk som er opprettet i Adobe Photoshop programmet. Photoshop er ofte brukt av web-designere til å lage mock ups av nettsted design. Når et design er fullført, PSD malen brukes på nettsiden ved hjelp av HTML og CSS. CSS, eller Cascading Style Sheets, inneholder kode dikterer den generelle stilen av et nettsted. Det er ofte webutvikler oppgave å konvertere PSD malen til CSS og HTML for å kunne vise site design på nettet.
Bruksanvisning
1 Åpne PSD fil i Photoshop.
2 Klikk på "øye" -ikonet på hvert lag i Lag-vinduet unntak av bakgrunnen for å gjøre bare bakgrunns synlig. Velg "Lagre for Web og enheter", og lagre det som en JPG-fil.
3 Åpne en ny fil i Notepad, og skriv inn følgende CSS-kode for bakgrunnen:
kropp {
bakgrunn: URL ( 'mybackground.jpg');
}
Erstatt "mybackground.jpg" med navnet på bakgrunnsbildet.
4 Velg "Analyse" og "Ruler Tool" fra Photoshop hovedmeny, og bruke dette til å skrive ned størrelsene på de ulike delene av websiden, som header, bunntekst, hovedinnhold og sidefelt. Legg også merke ned justering og farger av hvert element.
5 Definer de ulike delene av Web layout i CSS ved hjelp av informasjon som er samlet i trinn fire. For eksempel, CSS for en grå farget venstre sidebar, er 300 piksler i bredden definert som:
sidebar {
float: left;
width: 900px;
height: 300px;
background-color: #ccc;
}
Fullfør dette for alle andre deler som header, innhold og bunntekst.
6 Bestem skrifttyper som brukes i PSD malen. Dobbeltklikk på teksten laget i lag-boksen. Teksten verktøylinjen vises viser hva slags font som brukes og størrelsen på skriften.
7 Legg skriftstiler i CSS. For eksempel, hvis Arial fet med en skriftstørrelse på 20px brukes til overskrifter, skriv inn følgende CSS:
h1 {
font-family: Arial;
font-size: 20px;
color: black;
font-weight: bold;
}
8 Lagre CSS-fil.
9 Åpne en ny fil i Notepad, og lage din HTML-fil. Legg inn CSS-filen ved hjelp av følgende kode:
<Head>
<Link href = "style.css" rel = "stylesheet" type = "text / css">
</ Head>
Erstatt "style.css" med navnet på din CSS-fil.
10 Skriv inn alt innholdet for kroppen å bruke de forskjellige klasser og velgere du definert i CSS-filen. For eksempel:
<Body>
<Div id = "header"> <h1> My Website </ h1> </ div>
<Div id = "container">
<Div id = "Maincontent"> Enter innhold her </ div>
<Div id = "sidebar"> Sidebar innhold </ div>
<Div>
<Gjorde id = "footer"> Footer innhold </ div>
</ Body>
11 Lagre HTML-fil i samme mappe der CSS-filen er plassert.
12 Vis nettstedet i en nettleser og sammenligne den med PSD malen. Gjør de nødvendige justeringer for å gjøre de to identiske.