in this Photoshop web design tutorial, we are going to design a smashing, clean, and professional website layout in Photoshop. Asettelu teemme tässä opetusohjelma voidaan käyttää henkilökohtaisen tai yrityksen verkkosivuilla suunnittelu. Tämä muotoilu on melko käyttäjäystävällinen, joten sen pitäisi olla suuri sivustosi maineelle.
päivitys: Tämä on ensimmäinen osa kaksiosainen sarja, joka opettaa sinulle, miten luoda layout Photoshop, ja sitten, miten muuntaa sen standardien mukainen (X)HTML web design.
the ”Clean and Professional Web Design” Series
- Part 1: Create a Clean and Professional Web Design in Photoshop
- Part 2: Coding a Clean and Professional Web Design
Final Preview
Katso layout that we ’ ll be creating in this tutorial. Näet kuvan lopullisen esikatselun alla tai klikkaa tästä saadaksesi täysikokoisen version. 
valmista Photoshop-dokumentti
1 Luo uusi asiakirja Photoshopissa (Ctrl/Cmd + n) käyttäen seuraavan kuvan asetuksia.
aseta yksiköiden ja viivoittimien asetukset
2 Varmista, että työskentelet pikseliyksiköissä, joka on web-suunnittelun Vakioyksikkö.
määritä seuraavat asetukset Viivaimillesi asetusikkunasta (Ctrl / Cmd + K); Napsauta yksiköt & Viivaimet ja varmista, että kaikki on asetettu alla olevan kuvan mukaisesti. 
lisää oppaita sisältöalueen nimeämiseksi
3 Aktivoi Photoshop-Viivaimet näkymästä > Viivaimet.
Vaihda hallitsijoiden näkyvyys painamalla ”Ctrl / Cmd + R”.
avaa myös infotaulu ikkunasta > Info (pikanäppäin: F8).
infotaulu antaa hyödyllistä tietoa riippuen valitusta työkalusta.
painamalla ”M”, valitse suorakulmainen teline työkalu ja luo 120px leveä laatikko kankaan vasemmasta kulmasta. Voit säätää kokoa katsomalla Info-paneeliin valintaa tehdessäsi.
Napsauta nyt vasenta viivoitinta ja vedä opasta markiisin valinnan oikealle puolelle, kuten alla olevasta kuvasta näkyy. 
4 Siirrä tätä valintaa kankaan oikealle reunalle. Määritä toinen opas valinnan vasemmalle puolelle.
kankaasi nyt pitäisi näyttää tältä: 
logon luominen
5 Nyt luomme logon verkkosivuillemme.
logosta tulee hyvin yksinkertainen ja sillä on värigradienttiefekti. Luo uusi ryhmä (kerros > Uusi > ryhmä) ja anna sille nimi ”logo”.
6 Valitse vaakasuuntainen työkalu (t) ja kirjoita ”SMASHING” (tai verkkosivustosi nimi) isoilla kirjaimilla.
7 aseta sitten Merkistöpaneelissa fontti Arialiksi, tyyli lihavoiduksi ja koko 42pt: ksi. Aseta myös anti-aliasing menetelmä vaihtoehto terävä ja käytä väriä #101112.
voit myös asettaa nämä asetukset Valintarivillä, kun Tyyppityökalu on aktiivinen työkalu. 
8 kaksoisnapsauta avataksesi tason Tyyli-valintaikkunan. Valitse Gradient Overlay, Napsauta Gradient Editor ja käytä asetuksia alla esitetyllä tavalla.
9 Aseta ”SMASHING” – tyyppinen kerros 35px: n etäisyydelle ylhäältä ja 0px: n etäisyydelle vasemmasta ohjeesta. Voit tehdä tämän tarkasti käyttämällä Move Tool (V) ja nuolinäppäimillä. Kahdenna tämän tyyppinen kerros (kerros > Kahdenna kerros).
siirrä monistettu taso aivan ”SMASHING” – sanan viereen ja muokkaa tekstiä muotoon ”Dzine”. Toista vaiheet 6, 7, 8, mutta käytä eri gradienttivärejä (Vasen Väri stop: #b27625, oikea väri stop: #e5ad27) sanalle ”Dzine”.
10 Valitse Vaakatyyppityökalu (t) ja lisää Tunnisterivi logon alle seuraavilla asetuksilla. 
11 lopullisen logon tulisi näyttää alla olevan kuvan kaltaiselta.
aktivoidaksesi / deaktivoidaksesi ohjaimet, siirry kohtaan Näytä > Näytä > ruudukko tai käytä pikanäppäintä Ctrl / Cmd + ; 
navigointipalkin luominen
12 Luo uusi ryhmä ja anna sille nimi ”navigointi”, sen tulisi olla ”logo” – ryhmän yläpuolella. Vedä opas ylhäältä hallitsija, 150px yläreunan alapuolella kankaalle. Valitse suorakulmio työkalu (U) ja piirtää vaakasuora viiva 4PX korkeus #e3ab27, koko kankaalle.
13 Lisää navigointilinkit 12px-korkuisina tästä vaakasuorasta viivasta ja 20px vasemman oppaan oikealle puolelle.
valitse pyöristetty suorakulmio työkalu (U) ja piirrä laatikko, jonka koko on 72px X 35px. Siirrä tämä taso tekstilinkkien alle ja nimeä taso ”hover”.
suorista alhaalta pyöristetyt kulmat Convert Point-työkalulla. Siirrä epätasaisten reunojen sivut alle 8PX-marginaalilla, jotta reunat ovat yhtä suuret kuin muut sisäreunat alareunassa.
kaksoisnapsauta ”hover” – tasoa avataksesi tason Tyyli-valintaikkunan ja lisätäksesi liukuvärit (vasen värinpysäytys: #e5ad27, oikea värinpysäytys: #b27625). Valitse Vaakatyyppityökalu (t), valitse teksti ”Koti” ja vaihda väri #ffffff (valkoinen). 
”soita meille”-osion luominen
14 seuraavaksi luomme ”soita meille” – osion suunnittelumme oikeaan yläosaan (logon vastakkaiselle puolelle).
lataa tämä puhelimen kuvake ja aseta tämä lähelle oikeaa opasta. Nimeä tämä taso ”puhelin kuvake”. Valitse vaakasuuntainen työkalu (T).
Lisää puhelinnumero puhelimen kuvakkeesta vasemmalle käyttäen kirjasinta Arial, jonka koko on 20pt ja väri #292929.
lisää puhelinnumeron alle aiheeseen liittyvää tekstiä lihavoidulla kirjasimella Arial, jonka koko on 11pt ja väri #595959. 
luodaan otsikko
15 nyt olemme menossa luoda otsikko osio. Luo uusi ryhmä ja nimeä se ”header”.
16 valitse Suorakulmiotyökalu (U) ja luo suorakulmion muoto, jonka koko on 1200px X 440px.
Aseta tämä suorakulmio 1px: n etäisyydelle navigointipalkin alapuolelle ja anna tälle tasolle nimi ”header bg”. Kaksoisnapsauta ”header bg” – tasoa, Valitse Gradienttipäällyskerroksen tyyli ja käytä näitä kahta väriä Gradienttieditorissa (Vasen Väri stop: #2e2226, oikea väri stop: #7a7556).
katso alla olevasta kuvasta suorakulmion sijainti ja värit yksityiskohtaisesti. 
17 luo suorakulmion työkalusta (U) toinen suorakulmio, jonka koko on 960px by 360px.
aseta tämä suorakulmio etäisyydelle 40px ”header bg” – kerroksen yläosasta ja 0px vasemmasta ohjeesta. Nimeä tämä taso ”otsikkosäiliö”. Esikatsele alla, mitä olemme tehneet tähän asti suunnittelun kanssa.
”featured project” – osion luominen
18 seuraavaksi luomme projektiosion. Luo uusi ryhmä otsikkoryhmän sisään ja anna sille nimi ”fp”. Valitse suorakulmio työkalu (U)ja luo suorakulmio, jonka koko on 630px by 340px etäisyydellä 10px ylä-ja vasemmasta otsikkosäiliön.
anna tälle kerrokselle #000000-väri ja anna sille nimi ”fp container”. 
19 Avaa kuva Photoshopissa ja aseta se tähän suositeltavaksi projektiksi. Siirry kohtaan Valitse > kaikki (Ctrl/Cmd + A) ja muokkaa sitten > Kopioi (Ctrl / Cmd + C).
Come back to the our web design.
Luo uusi taso ”fp container” – tason yläpuolelle ja siirry kohtaan Muokkaa > Liitä (Ctrl/Cmd + V) liittääksesi projektikuvasi. Nimeä tämä taso uudelleen muotoon ”fp image”. Napsauta hiiren kakkospainikkeella ”FP image”-tasoa ja valitse Create Clipping Mask.
nyt kuva näkyy vain suorakulmion sisällä (”fp container”).
tee muutoksia niin, että esillä oleva projektikuvasi on samanlainen kuin alla oleva. 
20 siirry kohtaan Muokkaa > muunnos > asteikko (Ctrl/Cmd + T). Valitse Valintariviltä pyörimislaatikko ja tyyppi -4 ja paina enter kahdesti säätääksesi kulmaa.
pysy samalla kerroksella (”FP-kuva”) ja valitse tämän kerroksen sekoitustavaksi luminositeetti. 
21 seuraavaksi luomme projektin kuvalle otsikko-ja kuvauspalkin. Valitse Suorakulmiotyökalu (U) ja luo suorakulmion muoto, jonka koko on 630px by 90px, käyttäen väriä #161718.
vaihda tämän tason peittävyys 90%: iin ja anna sille nimi ”title bg”. Aseta tämä suorakulmio alla olevan kuvan mukaisesti. 
22 luo toinen suorakulmio, jonka koko on 630px by 1px käyttäen väriä #9c9c9c ja nimeä se ”title horizontal line”.
aseta tämä suorakulmio ”title bg” – kerroksen sisällön yläreunaan.
23 Lisää otsikko ja kuvaus kohdassa 21 luotuun suorakulmioon käyttäen seuraavia otsikko-ja kuvausasetuksia.
nimeen:
- fontti: Arial, väri: #ffffff, koko: 25pt ja anti-aliasing method option: Sharp
kuvaukseen:
- fontti: Arial, väri: #a4a4a4, koko: 12pt ja antialiasointimenetelmä: Ei ole
luominen ”pikalainaus” – osiolle
24 luo toinen ryhmä otsikkoryhmän sisälle ja anna sille nimi”pikalainaus”. Valitse suorakulmio työkalu (U) ja luo suorakulmio, jonka koko on 300px by 340px. Aseta tämä suorakulmio etäisyydellä 10px oikealla esillä projektin osa ja nimi se ”qq container”.
25 kopioimme Kerrostyylin toisesta aiemmassa vaiheessa luomastamme kerroksesta.
mene ”navigation”-ryhmän sisälle, napsauta hiiren kakkospainikkeella ”hover”-tasoa, valitse Copy Layer-tyyli, palaa ”qq container” – kerrokseen, napsauta hiiren kakkospainikkeella ja valitse Paste Layer-Tyyli. Meillä on sama kerros Tyyli ”hover” kerros meidän ”QQ kontti” nyt. 
26 valitse vaakasuuntainen työkalu (T).
Kirjoita ” Quick Quote ”” qq Containerin ” sisälle 20px: n etäisyydelle sisältävän laatikon yläreunasta ja Vasemmasta reunasta. Aseta kirjasinperhe Trebuchet MS: ksi (tai haluamasi web-turvallinen fontti) valkoisella värillä (#ffffff) ja anti-aliasing method-valinnalla teräväksi. Käytämme pyöristettyä suorakulmiota (U)luodaksemme kolme lomaketta.
valitse pyöristetty suorakulmio työkalu (U) ja aseta säde 3PX. Luo sitten kaksi pyöristettyä suorakulmiota, joiden koko on 260px by 35px käyttäen valkoista väriä (#ffffff). Sitten nimeä muoto kerrokset ”field1” ja ”field2” vastaavasti.
luo kolmas pyöristetty suorakulmio, jonka koko on 260px X 75px, valkoisella värillä (#ffffff) ja anna sille nimi ”field3”. Valitse Vaakatyyppityökalu (t) ja luo tarrat jokaiseen lomakekenttään. 
27 valitse pyöristetty suorakulmio työkalu (U) ja luo 80px laatikko 35px: llä ja nimeä se ”lähetä btn”.
28 kaksoisnapsauta tasoa avataksesi Layer Styles-ikkunan ja rasti gradientti Overlay-valintaruutu vasemmalta.
Napsauta Gradienttieditoria ja vaihda gradientin väriä alla esitetyllä tavalla. 
29 valitse horisontaalinen tyyppi työkalu (T) ja kirjoita ”lähetä” käyttäen fonttia Arial, tyyli lihavoitu ja koko 13pt. Valitse molemmat kerrokset Tasopaneelissa (”submit btn ”ja”Submit text”).
30 valitse Siirrä työkalu (V) työkalupalkista ja valitse Aseta pystysuorat keskukset ja aseta vaakasuorat keskukset Asetuspalkista.
(Vaihtoehtoisesti voit saada saman tuloksen menemällä kerrokseen > Align > Vertical Centers ja kerrokseen > Align > Horizontal Centers). 
pääsisältöalueen luominen
31 Luo uusi ryhmä ja anna sille nimi ”sisältö”. Valitse suorakulmio työkalu (U).
luo suorakulmio, jonka koko on 300px, 175px ja anna sille nimi ”c01”. Aseta tämä kerros 30px otsikon alle ja 0px vasemmasta oppaasta. Kaksoisnapsauta tasoa ja käytä seuraavan kuvan asetuksia.
32 aiomme lisätä sisältöä tähän ruutuun nyt. Valitse horisontaalinen tyyppi työkalu (T) ja lisää teksti, ”noin SmashingDzine”. Tee valinta ”tietoja” sana käyttäen horisontaalinen tyyppi työkalu (T), ja sitten muuttaa sen väriä #b47825.
tee sitten valinta ”Smashing” – sanasta ja vaihda sen jälkeen väri muotoon #2f2f2f. lisää pieni kuvaus ja linkkiteksti otsikon alle. Otsikossa, kuvauksessa ja linkkitekstissä käytettiin seuraavia vaihtoehtoja.
(voit säätää näitä vaihtoehtoja tarpeen mukaan). 
for the Title:
- fontti: Trebuchet MS, tyyli: normaali, koko: 24pt, antialiasointimenetelmä: Sharp
kuvaukseen:
- fontti: Arial, tyyli: normaali, koko: 12pt, antialiasointimenetelmä: Ei mitään, väri: #767676
Linkkitekstille:
- fontti: Arial, tyyli: lihavoitu, koko: 13pt, antialiasointimenetelmä: Ei yhtään, väri: #252525, alleviivaus
33 lisäämme neliskulmaisen laatikon kuvauksen viereen nyt. Valitse suorakulmio työkalu (U) ja väri #ffffff, pidä Shift-näppäintä säilyttää mittasuhteet ja luoda neliön koko 88px 88px. Siirrä tätä neliötä 10px: n etäisyydellä suorakulmion vasemmalta puolelta (”c01”).
nimeä tämä taso ”reunukseksi”. Kaksoisnapsauta tasoa avataksesi tason Tyyli-ikkunan ja lisää Tahtikerroksen tyyli seuraavilla asetuksilla: 
34 luo toinen laatikko koko 82px 82px ja aseta se keskelle ”border” kerros. Nimeä tämä kerros ”laatikko” ja muuta tämän neliön väri #d5d5d5.
Valitse kaikki kerrokset tässä ryhmässä (”sisältö ”ryhmä), siirry kohtaan taso > Uusi > ryhmä kerroksista (Ctrl/Cmd + G) ja nimeä uusi ryhmä”tietoja”. 
Huomautus: Sisällä oleva harmaa neliömäinen laatikko on kuvan paikkateline ja sen voi korvata millä tahansa valitsemallasi kuvalla.
35 kopioi ”tietoja”-ryhmä (Napsauta ryhmää hiiren kakkospainikkeella ja valitse Kopioi ryhmä) ja anna sille nimi ”palvelut”. Napsauta hiiren kakkospainikkeella” palvelut ”- ryhmää ja valitse Kopioi ryhmä uudelleen ja nimeä se”portfolio”.
meillä on nyt kolme ryhmää (”about”,” services ”ja”portfolio”). Siirrä viimeinen ryhmä (”portfolio”) oikeaan oppaaseen kuten alla. 
36 Valitse kaikki kolme ryhmää Tasopaneelista ja siirry sitten kerrokseen > Jaa > vaakasuorat keskukset, jotta ne voidaan avartaa tasapuolisesti.
Klikkaa tästä nähdäksesi seuraavan kuvan täysikokoisen kuvan. 
37 muuta ”palvelut” – ryhmän (keskellä) ja ”portfolio” – ryhmän (oikealla) otsikoita alla esitetyllä tavalla. (Voit muuttaa näitä otsikoita vaatimuksesi mukaan.) 
alatunnisteen luominen
38 Luo uusi ryhmä ja nimeä se ”alatunnisteeksi”.
valitse suorakulmio työkalu (U) ja luo suorakulmio, jonka koko on 1200px X 100px, design-asettelumme alareunaan. Nimeä tämä taso ”alatunniste bg”. Käytä samaa Gradienttipäällystyyliä kuin” header bg ”-taso napsauttamalla hiiren kakkospainikkeella” header bg ” – tasoa ja valitsemalla Kopioi kerroksen Tyyli.
palaa alatunnisteryhmään, napsauta hiiren kakkospainikkeella ”alatunniste bg”-tasoa ja valitse Paste Layer-Tyyli. 
39valitse Vaakatyyppityökalu (T) ja lisää tekijänoikeusteksti ja alatunnisteen linkkiteksti vasemmalle käyttäen kirjasinta Arial, koko 12pt ja harmaa väri (#dddddd). 
40 aiomme lisätä sähköpostin tilaus osio oikealla.
Luo uusi ryhmä ”footer” – ryhmän sisälle ja anna sille nimi ”subscribe”. Valitse pyöristetty suorakulmio työkalu (U) ja luo suorakulmio 85px by 35px. Nimeä tämä taso ”tilaa btn”.
41 toista vaihe 26 lomakekenttien ja nimikkeiden lisäämiseksi.
42 valitse Vaakatyyppityökalu (T) ja kirjoita ”tilaa” kirjasimella Arial, tyyli lihavoitu ja koko 13 PT.
valitse molemmat tasot (”subscribe btn ”ja”Subscribe text”).
43 toista vaihe 28 tilaa-painikkeen luomiseksi.
44 valitse pyöristetty suorakulmio työkalu (U) ja aseta säde 3PX. Luo pyöristetty suorakulmio koko 210px by 35px käyttäen valkoista väriä (#ffffff) ja nimi tämä muoto kerros ”sähköpostikenttä”. Lisää tekstirivi ”sähköpostikentän” yläpuolelle.
lopputulos
OK, that ’ s it and we are done. Tässä on lopputulos.
klikkaa alla olevaa kuvaa nähdäksesi täysikokoisen asettelun. Kiitos Seuraa yhdessä minun opetusohjelma. Toivon, että te kaikki nautitte ja opitte jotain uutta tästä opetusohjelmasta.
jätä kommenttisi ystävällisesti alle ja kerro ajatuksesi ja mielipiteesi, haluaisin kuulla ne. Voit myös jakaa tämän suunnittelun opetusohjelman ystävillesi, jos luulet, että se voisi olla hyödyllistä heille!
Lataa lähdetiedosto
voit ladata tämän opetusohjelman Photoshop-tiedoston (PSD) alla olevasta linkistä ZIP-arkistona.
- clean-professional-weblayout (ZIP, 2,4 MB)
Yhteenveto
jos päätät käyttää tätä mallia, muista optimoida kuvat latausajan lyhentämiseksi. Tämä päätös pitäisi olla suuri pieniä sivustoja, kuten yksi Golfkenttä, koska se on yksinkertainen, helppokäyttöinen ja käyttäjäystävällinen.
aiheeseen liittyvää sisältöä
- Kuinka luoda puhdas Blogisuunnittelu Photoshopilla
- koodaamalla puhdas Web 2.0 Style Web Design from Photoshop
- Create a Slick and Minimalist Web Layout in Photoshop
about the Author
Waheed Akhtar is a freelance web designer from Dubai, UAE. Hän on perustaja ja toimittaja Boost Inspiration, jossa hän esittelee erilaisia luovia resursseja digitaalisen taiteen, graafinen suunnittelu, kuvitus, Valokuvaus ja typografia inspiraatiota. Hänet tavoittaa Twitterin tai Facebookinkin kautta.