Opplæring: Ta det minimalistiske webdesignet ditt fra Photoshop til HTML

Etter å ha fulgt opp fra en fersk opplæring om å lage et minimalistisk nettdesign ved bruk av Photoshop, skal jeg demonstrere hvordan jeg kan ta det designet fra Photoshop til HTML som svar på TR-medlem dougrieds forespørsel. Dette er det første segmentet av tre deler, som vil ta deg gjennom prosessen, steg for steg. PSD-filen vil bli brukt som et veikart for å lage en HTML-malfil og det tilhørende stilarket som passer til utseendet og følelsen av den originale PSD-en. PSD fungerer som en "smart" trådramme, ettersom den inneholder ledetrådene vi vil bruke til å bygge grunnlaget og styling med CSS, CSS3 og flere HTML5-elementer. Alle filer som trengs for denne demonstrasjonen er inkludert i nedlastingen (zip-fil).

Før vi kommer i gang, er her de to delene av den opprinnelige opplæringen:

  • Opplæring: Lag et minimalistisk nettdesignoppsett ved hjelp av Photoshop
  • Opplæring: Legg siste hånd på minimalistisk webdesign ved hjelp av Photoshop

Separere elementene i den originale PSD-filen

Først må vi fjerne komprimeringen av nedlastingsfilen til et arbeidssted, og deretter åpne PSD-filen (Minimalist_Template_Final.psd) i Photoshop som vist i figur A nedenfor. Nå kan vi starte med å dissekere bakgrunnsbildene. (PSD-filen vil også spille dobbel plikt som vår trådramme når vi begynner å lage stiler og kode for HTML.)

Vi ønsker å organisere oppsettet vårt på en slik måte at det kan settes inn i definerte seksjoner som rader, kolonner, blokker eller fliser slik at de kan gjengis ved hjelp av koding og styling. Teksten og bildene i PSD-oppsettet kommer til å bli lagt oppå bakgrunnen og kan plasseres enkelt med styling og kode.

Figur A

I Photoshop vil vi lage flere individuelle bilder av hovedinnholdet og bakgrunnsseksjonen som begynner med å skille topptekstseksjonen fra kroppen, og deretter bunntekstdelen. Kroppsbakgrunnen vil være en egen beholder, og vi vil til slutt lage seksjoner med HTML5-koder i kodingen for å brette det hele sammen. Teksten og bildene i PSD-oppsettet legges lag på toppen av bakgrunnslagene og kan enkelt erstattes med styling og HTML-kode. Det er bakgrunnselementene som må skilles, og i denne første delen kopierer vi "Bakgrunn" -laget med gradienten og lagrer det som en egen gif-fil som heter background.gif .

Fjern deretter merket av alle de andre lagene i PSD-filen, slik at "Bakgrunn" -laget er synlig.

Lagre filen deretter i webbildekatalogen din (web / bilder) ved å velge Lagre for web og enheter ... som bakgrunn.gif .

Skjermbildet i figur B viser valg av bakgrunnslag.

Figur B

Deretter oppretter vi et eget bilde for nettnavnet og underoverskriften. For å bevare den gjennomskinnelige bakgrunnen for tekstdelene vil vi:

  • Gjør "nettstedets navn" synlig og sørg for at alle andre lag er skjult.
  • Bruk beskjæringsverktøyet (C) for å omgi overskriftene og godta det horisontale valget, og lagre deretter bildet i katalogen for webbilder ved å bruke alternativet Lagre for web og enheter ... som headername.gif . Se figur C og D nedenfor.
  • Forsikre deg om at "Trinn bakover" (Alt + Ctrl + Z) for å få PSD-filen tilbake til sin opprinnelige tilstand.

Figur C

Figur D

Deretter beskjæres det omtalte bildet og lagres som et eget gif.

  • Gjør laget "bg" og "Image Bg" synlig, og sørg for at alle andre lag er skjult.
  • Bruk beskjæringsverktøyet (C) for å omgi de to bakgrunnsbildelagene og godta valget, og lagre deretter bildet i katalogen for webbilder (web \ bilder) ved å velge Lagre for web og enheter ... som funksjon.gif . Se figur E og figur F nedenfor.
  • Sørg for å returnere PSD til sin opprinnelige tilstand ved å bruke "Trinn bakover" (Alt + Ctrl + Z).

Figur E

Figur F

Inkludert i den originale nedlastingsfilen er ytterligere to PSD-bildefiler for ikonet "Tilkoblet" og "Sosialt". Jeg har konvertert de to originale PSD-filene til gifs og lagret dem for enkelhets skyld, og de er i webbildekatalogen (web \ bilder) som Connected_Icons.gif og Social_Icons.gif. Disse to bildene er begge vist i figur G nedenfor for referanse skyld.

Figur G

Nå som vi har de viktigste delene av PSD fordelt på spesifikke seksjoner, er det på tide å begynne å lage HTML-kode og deretter stilene, basert på wireframe-oppsettet. Nedenfor er den grunnleggende HTML-koden for å komme i gang med en disposisjon innenfor kodene til dokumentet, og den lagres som webdokumentindeks.html.

Header Stuff går inn her

Venstre kolonne

Høyre kolonne

Left Feature Article

Right Feature Article

Bunntekstmateriell går inn her

Deretter vil vi begynne å legge til stiler for å gjenopprette koden når vi transformerer PSD-layoutfilen til et fungerende webdokument. Vi vil starte med noen grunnleggende stiler bare for å få definert topptekst, bunntekst, seksjoner og artikler, og vi vil finjustere noen av dem når vi går gjennom opplæringen. Stilene vises nedenfor og lagres som dokumentet styles.css . Den solide røde kanten på 1 pixel er en midlertidig stil for dette trinnet for å vise containerseparasjoner, som du vil se vises nedenfor.

 / * CSS-stiler * / 
 kropp { 
 background-color: # b9c7c7; 
 } 
 #Overskrift { 
 kant: 1px solid rød; 
 } 
 #footer { 
 kant: 1px solid rød; 
 } 
 .beholder { 
 bredde: 1020px; 
 min-høyde: 1020px; 
 margin: 0 auto; 
 kant: 1px solid rød; 
 } 
 .footcon { 
 bredde: 1020px; 
 margin: 0 auto; 
 kant: 1px solid rød; 
 min-høyde: 120 x; 
 } 
 #right_column { 
 margin-top: 50 piksler; 
 float: venstre; 
 topp: 0; 
 høyre: 0; 
 bredde: 610px; 
 min-høyde: 700 piksler; 
 flow: auto; 
 padding-venstre: 5 px; 
 padding-right: 5px; 
 } 
 #left_sidebar { 
 margin-top: 10px; 
 margin-venstre: 50 piksler; 
 float: venstre; 
 topp: 0; 
 venstre: 0; 
 bredde: 200px; 
 min-høyde: 750px; 
 flow: auto; 
 padding-venstre: 5 px; 
 padding-right: 5px; 
 } 
 #left_feature { 
 margin-top: 50 piksler; 
 margin-right: 5px; 
 float: venstre; 
 min-høyde: 250 px; 
 flow: auto; 
 bredde: 280 piksler; 
 } 
 #right_feature { 
 margin-top: 50 piksler; 
 margin-venstre: 5 px; 
 float: right; 
 min-høyde: 250 px; 
 flow: auto; 
 bredde: 280 piksler; 
 } 
Figur H viser hvordan index.html gjengis som vist i Chrome 17.09:

Figur H

La oss nå legge til gradientbildet i "container" -delen for bakgrunnen ved å legge disse to linjene til vår ".container" -stil:

 background-image: url (images / background.gif); 
 background-repeat: no-repeat; 
Figur I viser den resulterende endringen, gjengitt i Chrome 17.09:

Figur I

Oppdateringen er subtil, men gradienten er nå synlig bak funksjonsbildet.

Dette avslutter den første delen av opplæringen. Jeg vil plukke opp i neste segment med å legge inn flere stiler for de gjenværende bildene, lage en gradientstil for bunntekstområdet, og legge inn innholdsteksten og koble til navigasjonen og andre funksjoner.

© Copyright 2020 | mobilegn.com