Tutorial: Tag dit minimalistiske webdesign fra Photoshop til HTML

Opfølgning fra en nylig tutorial om oprettelse af et minimalistisk webstedsdesign ved hjælp af Photoshop, jeg vil demonstrere, hvordan man tager dette design fra Photoshop til HTML som svar på TR-medlem dougrieds anmodning. Dette er det første segment af tre dele, som vil føre dig gennem processen, trin for trin. PSD-filen bruges som køreplan til oprettelse af en HTML-skabelonfil og det tilhørende typografiark, der passer til udseendet og følelsen af ​​den originale PSD. PSD fungerer som en "smart" wireframe, da den indeholder de signaler, vi vil bruge til at opbygge fundamentet og stylingen med CSS, CSS3 og flere HTML5-elementer. Alle nødvendige filer til denne demonstration er inkluderet i download (zip-fil).

Før vi kommer i gang, her er de to dele af den originale tutorial:

  • Tutorial: Opret et minimalistisk webdesignlayout ved hjælp af Photoshop
  • Tutorial: Føj finish til minimalistisk webdesign ved hjælp af Photoshop

Adskillelse af elementerne i den originale PSD-fil

Først skal vi fjerne komprimeringen af ​​downloadfilen til et arbejdssted og derefter åbne PSD-filen (Minimalist_Template_Final.psd) i Photoshop som vist i figur A nedenfor. Nu kan vi starte med at dissekere baggrundsbillederne. (PSD-filen spiller også dobbeltbetjening som vores wireframe, når vi begynder at oprette vores stilarter og kode til HTML.)

Vi ønsker at organisere vores layout på en sådan måde, at det kan sættes i definerede sektioner, såsom rækker, kolonner, blokke eller fliser, så de kan gengives ved hjælp af kodning og styling. Teksten og billederne i PSD-layoutet tilføjes oven på baggrundslagene og kan let placeres med styling og kode.

Figur A

I Photoshop opretter vi flere individuelle billeder af hovedindholdet og baggrundsafsnittet, der starter med at adskille overskriftssektionen fra kroppen og derefter sidefodssektionen. Kropsbaggrunden vil være en separat beholder, og vi vil til sidst oprette sektioner med HTML5-tags i kodningen for at dele det hele sammen igen. Teksten og billederne i PSD-layoutet tilføjes lag oven på baggrundslagene og kan let erstattes med styling og HTML-kode. Det er baggrundselementerne, der skal separeres, og i dette første afsnit kopierer vi "Baggrund" -laget med gradienten og gemmer det som en separat gif-fil med navnet baggrund.gif .

Fjern derefter markeringen af ​​alle de andre lag i PSD-filen og lader "baggrund" -laget være synligt.

Gem derefter filen i dit webbillede-bibliotek (web / billeder) ved at vælge Gem til web & enheder ... som baggrund.gif .

Screen capture i figur B viser valg af baggrundslag.

Figur B

Dernæst opretter vi et separat billede til webnavnet og underrubrikken. For at bevare den gennemsigtige baggrund af tekstafsnittene vil vi:

  • Gør "Webstedsnavnet" synligt, og sørg for, at alle andre lag er skjult.
  • Brug beskæringsværktøjet (C) til at omgiver overskrifterne og acceptere det vandrette valg, og gem derefter billedet i dit webbillede-bibliotek ved hjælp af markeringen Gem til web og enheder ... som headername.gif . Se figur C og D nedenfor.
  • Sørg for at "Trin tilbage" (Alt + Ctrl + Z) for at få PSD-filen tilbage til sin oprindelige tilstand.

Fig

Figur D

Dernæst beskæres det fremhævede billede som en separat gif.

  • Gør laget "bg" og "Image Bg" synligt, og sørg for, at alle andre lag er skjult.
  • Brug beskæringsværktøjet (C) til at omgiver de to baggrundsbilledlag og accepter markeringen, gem derefter billedet i dit webbillede-bibliotek (web \ billeder) ved at bruge Gem til web & enheder ... -valget som feature.gif . Se figur E og figur F nedenfor.
  • Sørg for at vende PSD tilbage til sin oprindelige tilstand ved at bruge "Trin tilbage" (Alt + Ctrl + Z).

Figur E

Figur F

Inkluderet i den originale downloadfil er yderligere to PSD-billedfiler til ikonet "Tilsluttet" og "Socialt". Jeg har konverteret de to originale PSD-filer til gifs og gemt dem for din bekvemmelighed, og de er i webbilleder-biblioteket (web \ images) som Connected_Icons.gif og Social_Icons.gif. Disse to billeder vises begge i figur G nedenfor for reference skyld.

Figur G

Nu hvor vi har de vigtigste stykker af PSD opdelt i specifikke sektioner, er det tid til at begynde at oprette nogle HTML-kode og derefter typografierne baseret på wireframe-layout. Nedenfor er den grundlæggende HTML-kode for at komme i gang med en oversigt inden for tags for dokumentet, og den gemmes som webdokumentindeks.html.

Header Stuff går ind her

Venstre kolonne

Højre søjle

Venstre artikel

Right Feature Article

Footer Stuff går ind her

Dernæst vil vi begynde at tilføje stilarterne for at bringe koden i live, når vi omdanner PSD-layoutfil til et fungerende webdokument. Vi starter med nogle grundlæggende stilarter bare for at få overskriften, sidefoden, sektioner og artikler defineret, og vi justerer nogle af dem, når vi bevæger os igennem selvstudiet. Stilarterne vises nedenfor og gemmes som dokumentet styles.css . Den faste, røde kant på 1 pixel er en midlertidig stil for dette trin til at vise containerseparationer, som du vil se vist nedenfor.

 / * CSS Styles * / 
 krop { 
 background-color: # b9c7c7; 
 } 
 #header { 
 kant: 1px massiv rød; 
 } 
 #footer { 
 kant: 1px massiv rød; 
 } 
 .container { 
 bredde: 1020px; 
 min-højde: 1020px; 
 margin: 0 auto; 
 kant: 1px massiv rød; 
 } 
 .footcon { 
 bredde: 1020px; 
 margin: 0 auto; 
 kant: 1px massiv rød; 
 min-højde: 120px; 
 } 
 #right_column { 
 margin-top: 50px; 
 flyde: venstre; 
 top: 0; 
 højre: 0; 
 bredde: 610px; 
 min-højde: 700 pixel; 
 overflow: auto; 
 padding-venstre: 5px; 
 padding-højre: 5px; 
 } 
 #left_sidebar { 
 margin-top: 10px; 
 margin-left: 50px; 
 flyde: venstre; 
 top: 0; 
 tilbage: 0; 
 bredde: 200 pixel; 
 min-højde: 750px; 
 overflow: auto; 
 padding-venstre: 5px; 
 padding-højre: 5px; 
 } 
 #left_feature { 
 margin-top: 50px; 
 margin-højre: 5px; 
 flyde: venstre; 
 min-højde: 250px; 
 overflow: auto; 
 bredde: 280 pixels; 
 } 
 #right_feature { 
 margin-top: 50px; 
 margin-left: 5px; 
 flyde: højre; 
 min-højde: 250px; 
 overflow: auto; 
 bredde: 280 pixels; 
 } 
Figur H viser, hvordan vores index.html gengives som vist i Chrome 17.09:

Figur H

Lad os nu tilføje gradientbilledet til vores "container" -afdeling for baggrunden ved at tilføje disse to linjer til vores ".container" -stil:

 baggrund-billede: url (images / background.gif); 
 baggrund-repeat: no-repeat; 
Figur I viser den resulterende ændring gengivet i Chrome 17.09:

Figur I

Opdateringen er subtil, men gradienten er nu synlig bag funktionsbilledet.

Dette afslutter den første del af selvstudiet. Jeg vil samle op i det næste segment med at tilføje flere stilarter til de resterende billeder, oprette en gradientstilstand til sidefodsområdet og tilføje indholdsteksten og linke til navigationen og andre funktioner.

© Copyright 2020 | mobilegn.com