miten luoda puhdas verkkosivujen asettelu Photoshopissa

luo puhdas sivuston Layout Photoshop-suunnittelu sivuston layout on enemmän kuin järjestää värikkäitä kuvia ja täyttämällä joitakin tekstiä tekstikehyksiä. Se on lähestymistapa, joka kertoo paljon asiakkaan liiketoiminnasta. Sivuston värit ja grafiikat määrittelevät liiketoiminnan luonteen, kun taas sivuston suunnittelun laadun ja helpon navigointivirran pitäisi sitoa käyttäjä organisaatioon ja tehdä hänestä potentiaalinen asiakas.

hyvännäköisen ja helposti saavutettavan verkkosivuston ulkoasun suunnittelu on pakollista jokaiselle wannabe-web-suunnittelijalle. Tämä opetusohjelma on tarkoitus viedä sinut läpi prosessin luoda sivuston layout yksinkertainen ja puhdas verkkosivuilla heti tyhjästä. Prosessin aikana, opit tärkeitä kohtia, jotka auttavat sinua edelleen saada enemmän tietoa web-suunnitteluun.

Kirjoita vaatimuksesi ennen verkkosivuston ulkoasun suunnittelua.

ennen kuin aloitat verkkosivuston ulkoasun suunnittelun, sinun tulisi tietää, miltä verkkosivustosi näyttää ja mitkä ovat ne aiheet, jotka sinun tulisi sisällyttää verkkosivustoon. On tärkeää tehdä luettelo sivuston layout elementtejä asiakkaan tarpeet hänen verkkosivuilla. Sen lisäksi, laatu hyvä suunnittelija on valmistella pilkata koko sivuston ennen kuin hän alkaa työstää lopullista mallia.

eri suunnittelu yritykset mukauttaa eri tasoilla ennalta suunnittelu strategioita, jotka voivat sisältää Lanka kehystys, prototyyppien, mockup, beta-versiot ja paljon muuta. Tässä opetusohjelmassa luomme malliversion ennen alkuperäisen mallin suunnittelun käynnistämistä. Käytän harmaan sävyjä, jotka mahdollistavat mallikappaleen tunnistamisen.

Canvas

vuotta aiemmin, kun käyttöjärjestelmiä oli hyvin vähän ja internetsivustoille pääsyä rajoittavia laitteita, sivun mitat oli kiinnitetty yhteen tai kahteen kokoon. Nyt tilanne on täysin toinen. Loppukäyttäjät käyttävät sivustoja eri kokoisilla pöytätietokoneilla, matkapuhelimilla, iPadeilla ja tableteilla. Ei ole mitään mahdollisuutta, että voit korjata web-sivun tietyn koon tässä monimuotoisessa tilanteessa. Mutta on olemassa joitakin alan standardikokoja sovelletaan jokaiseen laitteeseen. Löydät hitaasti suosikkikokosi, tai asiakkaasi voi ohjata sinut verkkosivustolle matkimaan kokoja.

tässä tapauksessa työstämme seuraavia ulottuvuuksia. Älä huoli korkeudesta, sillä se muuttuu ajan myötä. Mitä enemmän sisältöä lisäät sivustoosi, sitä enemmän korkeus on.

muista, että on tavallista vierittää sivua alaspäin pystysuunnassa, joten et saa korjata sivua tietylle korkeudelle, ellet halua käyttäjän vierittävän kotisivuasi Googlena. Mutta on välttämätöntä, ettei vieritä vaakasuoraan. Joten, rajoittaa leveys kohti alan standardeja ja älä saa luova kanssa vaakasuora vieritys.

Webissä resoluutio on rajoitettu 72: een. On korkeamman resoluution kuvia ja sivuja löytyy iPads ja muutamia tabletteja viime aikoina. Mutta se on harvinainen tilaisuus, ja se on parempi pysyä 72 ottaen huomioon internet nopeus ympäri maailmaa.

Valitse tiedostot Ctrl + A-komennolla ja piirrä oppaat yhtä lailla koko mallipohjassa. Verkkosivut olisi järjestettävä siististi, ja kaikki osat olisi järjestettävä johdonmukaisesti toisiinsa. Ja sivuston layout ohjeet auttavat sinua saamaan sen helposti.

valmistelkaa mallinne.

mallitiedoston sijoittaminen alkuperäiseen malliin auttaa säästämään runsaasti aikaa. Suunnittelu sivuston tulee niin helppoa, että päädyt loppuun puitteissa muutamassa minuutissa. Kuitenkin, mockup auttaa vain suunnitella kehyksiä. Täyttämällä elementtejä suunnittelun yksityiskohtia, tyyppi järjestely ja linjaus vie liikaa aikaa kuin piirustus sivuston asettelu.

värimaailma ja muut valinnat

seuraavaksi kehysten valmistumisen jälkeen on valittava värimaailma. Mutta on parempi saada värit valmiiksi ennen kuin aloitat työstää suunnittelua.

koko juttu tiivistyy viestiin, että laittakaa aseet valmiiksi ennen kuin aloitatte suunnittelun. Kaiken, mukaan lukien kuvakkeet, kuvat ja värivalinnat, pitäisi olla valmiina ennen kuin aloitat työskentelyn. Työn organisointi ja suunnittelu säästää enemmän aikaa ja keskittyy suunnitteluun esteettä välillä.

värien valinta voi olla suunnittelijan valinta, jos yritys on uusi eikä sillä ole aiemmin yritysidentiteettiä. Asiakkaat antavat käsityksen siitä, mitä sävyjä he haluavat logon tai taustan olevan joissakin tapauksissa. Kun kyseessä on olemassa olevia yrityksiä, joissa saatat joutua uudelleensuunnittelemaan koko sivuston, saatat joutua valitsemaan samat värit kohti asiakkaan tarpeisiin.

on olemassa lukuisia verkkosivustoja, joiden avulla voit valita arkistoista miljoonia väriteemoja. Kokeile seuraavia sivustoja nauttia laaja valikoima väriyhdistelmä.

väri.Adobe.kom

Colourlovers.com

tässä valitsin muutaman sinisen sävyn käytettäväksi verkkosivuille. Koko sivusto suunnitellaan seuraavan värimaailman. Älä unohda valita kolme tai neljä eri väriyhdistelmiä, koska emme tiedä, mitä väriä asiakas haluaa. Kun asiakas on viimeistellyt värimaailman, Tallenna sävyarvot ja varmista, että väreillä on tärkeä rooli organisaation jokaisessa vertikaalissa, erityisesti yrityksen identiteetissä.

suunnitteluprosessi

suunnittelijoita voi jatkaa monella tavalla. Ei ole olemassa kovia ja nopeita verkkosivuston asettelusääntöjä suunnitteluprosessin määrittelemiseksi tai seuraamiseksi; se on useimmiten prosessi, jonka suunnittelija valitsee mukavuuteensa.

jotkut suunnittelijat haluavat rakentaa koko palikat ja kehykset ja aloittaa yksityiskohtien työstämisen toisessa vaiheessa, jota seuraa tyyppi ja lopuksi linjaukset ja säädöt. Jotkut haluavat lopettaa sivun yhden osan kerralla ja viedä sen seuraavaan osaan. Seuraamme toista tyyliä.

päätämme verkkosivun seuraavissa vaiheissa

• Header & Footer
• mitä teemme
• palvelut
• lomake
• Uutiset
• Footer
• Footer

• header &alatunniste

  

  

  nyrkkisääntö otsakkeen tai bannerin mittojen määrittelemiseksi on jätetty luovuutesi varaan. Uusimpien trendien mukaan verkkosivustoille ilmestyy valtava kuva, joka peittää koko tietokoneen näytön. Tyylistä käytetään nimitystä Hero image, josta tuli viime aikoina varsin suosittu.

  tässä tapauksessa aloitimme 120 pikselin korkeusotsakkeella ja bannerin 550 pikselin korkeudella. Leveyden pitäisi vastata asiakirjan kokoa.

  

  

  yksivärisillä kuvioilla on tasainen ulkoasu, joka ei sovi yhteen isompien kehysten tai kuvien kanssa. Välttääkseni tasaisen ilmeen levitin gradienttipäällyskerroksen bannerin päälle. Se antaa banderollille syvyyttä, joka hitaasti muuttuu varjosta toiseen.

  

  

  seuraavaksi aloimme tuoda logoa ja sijoittaa sen otsakkeen vasempaan yläkulmaan ja toisen isomman logon bannerin keskelle. Voit myös tarkkailla sivuston asettelun vektorimuotoja oikeassa yläkulmassa, joita käytetään sosiaalisen median linkkien jakamiseen.

  

  

  tässä vaiheessa sain lisättyä tyypin otsakkeeseen & Banneriosa. Tekstiin on lisätty yrityksen nimi, brändiviesti linkkeineen ja palveluineen. Bannerissa voi myös tarkkailla läpinäkyvää nappia.

  Pelkkä teksti tai liian paljon tekstiä ilman erityispiirteitä pilaa verkkosivusi ulkoasun; sivu kyllästyttää käyttäjää pian, minkä vuoksi hän saattaa poistua sivustoltasi nopeasti. Tutustu vektorimuotoon, jonka lisäsin bannerin oikeassa yläkulmassa oleviin palveluihin. Tyyli on yksinkertainen, mutta se täyttää tyhjiön välttäen arkisen lookin.

  

  

  valitse tehtävään sopiva kuva. On miljoonia varastossa kuvia saatavilla verkossa, ja se ei vie liian kauan löytää kuvan, joka sopii vaatimukseesi.

  omalla kohdallani löysin laadukkaan kuvan, jonka uskon sopivan hyvin sivuilleni. Minulla ei ole liiketoiminnan teema verkkosivuilla, joten olen vapaa valitsemaan minkä tahansa kuvan, joka näyttää hyvältä banneri postitse.

  yritä ladata joitakin HD-kuvia alla olevista vapaista varastokuvasivustoista

  www..com.

  

  

  Blending is a art you should master to produce beautiful banners. Tässä sekoitin kolme kerrosta saavuttaakseni yllä olevassa kuvassa esitetyn vaikutuksen. Tässä on mitä tein

  • Aseta Kuvakerros sinisen väribannerin päälle
  • Aseta Gradienttipäällys kuvan yläpuolelle
  • Muuta kuvan sameutta 40 prosenttia ja vaihda sekoitustila erotukseksi.
  • Katso yllä olevan kuvan layers-paletista, miten kerrokset on pinottu toistensa päälle.

  

  

  This is how your Header & Banner will look as we just finished working it. Työstämme yhtä osaa kerralla, ja on aika siirtyä seuraavalle tasolle.

  

  

  mukauttaminen on ratkaisevaa tyypin kannalta; on käsitys siitä, miten sivuston pitäisi näyttää, ja teksti olisi kohdistettava ennen kuin aloitat sen. Tällä tasolla käytin kahta eri tekstikehystä, jotka molemmat oli suunnattu vasemmalle.

  

  

  seuraava askel on verkkosivun palveluosuuden suunnittelu. Suunnittelin harmaan sävyisen metallisen tähden esittelemään yrityksen eri palveluita. Tähtisymbolin käytön tarkoituksena on 5 tähden palvelut.

  

  

  kun on kyse tekstin yhdenmukaistamisesta, oppaat ovat parhaita ystäviäsi. Koherenssi tyypin ja esineiden sisällä voidaan saada hyödyntämällä hyvin valkoista tilaa ja yhtä suuria aukkoja suunnittelun elementtien välillä. Käytin monia sivuston asetteluohjeita nähdäkseni, että kaikkien kehyksessä olevien kohteiden tulisi säilyttää asianmukaiset aukot ja etäisyydet, jotka tuovat esiin reilusti valkoista tilaa.

  

  

  suunnittelumme seuraava vaihe on Lomakekentän luominen. Tässä tapauksessa työskentelen päinvastoin kuin bannerin suunnittelussa käytetty menetelmä. Asetamme kuvan kerroksen yksivärisen kerroksen alle ja levitämme gradienttikerroksen kahden kerroksen päälle paremman ulkonäön saavuttamiseksi. Sekoittumistilojen kanssa leikkiminen on aina oleellista isompien kuvien asettelussa.

  

  

  tämän sivuston kuvien valinnalla ei ole mitään siihen liittyvää erityistä teemaa. Uskon, että tämä kuva auttaa sivustoa näyttämään paremmalta.

  

  

  Aseta kuva värillisen taustakerroksen alle. Voit korjata kuvan täsmälleen koko värillinen kerros, käytä kerros rajauksella vaihtoehtoja.

  

  

  Katso yllä olevan kuvan layers-paletti. Yksivärinen sininen kerros on kuvan päällä, sekoitustila muunnetaan peittäväksi ja peittävyys vähenee 65 prosenttiin.

  

  

  käytin gradienttikarttaa kahden kerroksen päällä. Sekoitustila vaihtuu hueksi, ja opasiteetti pysyy samana.

  

  

  lomakelaatikko on valmis, mikä tuo meidät verkkosivujen suunnittelun neljännen tason loppuun.

  

  

  seuraava tasomme koostuu kahdesta yksinkertaisesta tekstikehyksestä. Se muistuttaa tasoa kaksi web-sivun, ja käytin kohdistettu kaksi laatikkoa samanlainen alkuun. Yhtenäisyyden säilyttäminen linjauksessa on hyvä tapa käyttää valkoista tilaa.

  

  

  kun pääsimme sivun loppuosaan, on aika tarkastella alatunnisteen mittasuhteita vielä kerran. Suunnittelija on suunnitella korkeus footer perustuu linkkejä hänen pitäisi käyttää siellä. Tässä tapauksessa annoin korkeus 170 pikseliä minun footer. Leveys pysyy samana kuin verkkosivuilla.

  

  

  Aseta linkit ja kuvat vaatimuksesi mukaan.

  tähän päätimme verkkosivujemme suunnitteluosuuden. Käyttämämme väriyhdistelmät ovat minimaalisia; käytämme muotoilussamme paljon valkoista tilaa ja lisäsimme yksinkertaista tekstiä minimifonteilla. Tarkoitus on suunnitella puhdas verkkosivu, jonka toivomme toteutuvan.

  Katso koko alla olevan sivun ulkoasu vielä kerran.

  

  
  5 osakkeet