Pamoka: kaip išdėstyti tinklalapį naudojant „Adobe Photoshop“

Yra daugybė įrankių, skirtų kurti tinklalapius ir dirbti visiškai paprastai ir funkcionaliai, neįvedant ir neliečiant kodo. Jų yra nesuskaičiuojama daugybė, kurias siūlo paraiškos (Adobe Dreamweaver yra pavyzdys) arba tiesiogiai internetinėse platformose, tokiose kaip „Wix“. Tačiau žiniatinklio dizaineriui žinoti rankines procedūras yra būtina. HTML5 ir CSS yra pagrindiniai svetainių ir nukreipimo puslapių išdėstymo ramsčiai.

Tačiau dažniau nei galite tikėtis, turėsite kreiptis į tokias programas kaip „Indesign“ arba Adobe Photoshop papildyti maketavimo darbus ir suteikti jiems tobulą apdailą. Šiandien šioje išsamioje pamokoje pamatysime, kaip mes galime išdėstyti tinklalapį naudodami „Adobe Photoshop“. Šioje pirmojoje dalyje mes apsistosime darbe, kurį reikės sukurti iš „Photoshop“, nors būsimose dalyse pamatysime, kaip galime pritaikyti šį darbą jau tiesiogiai HTML kode, kad jis būtų funkcionalus.

Pradedant nuo mūsų vielinio rėmo dizaino

Pirmiausia, pradedant tinklalapio išdėstymu ir dizainu, nepaprastai svarbu pradėti nuo to, kokie bus pagrindiniai elementai, tai yra griaučiai. Ši struktūra pasitarnaus visam turiniui (tekstiniam ar daugialypės terpės) laikyti. Apibrėždami kiekvieną iš mūsų puslapį sudarančių skyrių, mes galime juos tiksliai apdoroti ir pateikti kuo tikslesnį vizualinį dizainą.

Labai svarbu atsižvelgti į aspektus, kuriuos turės mūsų svetainė, jei ji turės dėžutėje arba viso pločio. Dėžutėje pateikiamas tinklalapis bus mažame inde, todėl aplink jį atsiras tarpas. Priešingai, visas internetas užims visą puslapį atkartojančio įrenginio ekraną. Pasirinkimas tarp vieno ar kito būdo atsako tik į stilistinius klausimus ir taip pat priklausys nuo projekto, kuriame dirbame, poreikių. Šiame pavyzdyje dirbsime su dėžutės režimu, todėl jis neužims visos naršyklės suteiktos vietos.

Norėdami sukurti savo laidinį rėmą, pirmiausia turime įeiti į „Adobe Photoshop“ programą ir įtraukti matmenis, kurių norime turėti savo puslapyje. Šiame pavyzdyje mūsų puslapis bus 1280 taškų pločio. Tačiau dydžio problema gali skirtis atsižvelgiant į galutinę paskirties vietą ar įrenginį, kuriame norime atkurti savo puslapį. Neabejotina, kad norint, kad interneto dizainas būtų funkcionalus ir efektyvus, jis turi būti reaguojantis ir jis turi prisitaikyti prie visų rinkoje esančių įrenginių. Tačiau šiuo atveju mes stengsimės sukurti prototipą, kurį atkursime staliniame kompiuteryje. Nepaisant to, reaguojanti problema bus aptarta vėliau, kol kas čia pateikiama ekrano matmenų hierarchija, su kuria reikia dirbti šiame pavyzdyje. Atminkite, kad šiuo atveju mes sukursime nukreipimo puslapio maketą „Adobe Photoshop“ ir tada perkelsime jį į HTML5 IR CSS3. Šios nedidelės praktikos tikslas yra „Photoshop“ sukurtą dizainą paversti tinkamu naudoti ir interaktyviu interneto dizainu, reaguojančiu į vartotojo judesius.

Mobiliųjų telefonų matavimai

„iPhone 4“ ir „4S“: 320 x 480

„iPhone 5“ ir „5S“: 320 x 568

„iPhone 6“: 375 x 667

„iPhone 6+“: 414 x 736

„Nexus 4“: 384 x 598

„Nexus 5“: 360 x 598

„Galaxy S3“, „S4“, „S5“: 360 x 640

„HTC One“: 360 x 640

Tablečių matavimai

visi „iPad“ modeliai ir „iPad Mini“: 1024 x 768

„Galaxy Tab 2“ ir „3“ (7.0 colių): 600 x 1024

„Galaxy Tab 2“ ir „3“ (10.1 colių): 800 x 1280

„Nexus 7“: 603 x 966

„Nexus 10“: 800 x 1280

„Microsoft Surface W8 RT“: 768 x 1366

„Microsoft Surface W8 Pro“: 720 x 1280

Stalinių kompiuterių matavimai

Maži ekranai (naudojami, pavyzdžiui, netbookuose): 1024 x 600

Vidutiniai ekranai: 1280 x 720/1280 x 800

Dideli ekranai: plotis didesnis nei 1400 pikselių, pvz., 1400 x 900 arba 1600 x 1200.

Norėdami pradėti platinti elementus ir skirstyti skiltis mūsų internetiniame makete, labai svarbu atsižvelgti į proporcijas, kad būtų užtikrinta aiški ir melodinga apdaila. Bus svarbu naudoti taisyklių ir vadovų parinktis, kurias galite rasti viršutiniame meniu Rodinys. Norint dirbti proporcingai ir tiksliai, geriausia, kad dirbtume iš procentų. Norėdami pasirinkti skirstymo būdą, spustelėsime rodinio meniu, tada parinktį «Naujas vadovas». Tokiu atveju mes padarysime keturis vertikalius padalijimus 25 proc. Dydžiu ir juos laikysime nuoroda, kad savo atvaizdus padėtume poraštėje, o logotipo antraštėje.

Yra kodas, nurodantis kiekvieną iš mūsų užimančių sričių modelis ir funkciją, kurią turės kiekvienas iš jų. Pavyzdžiui, norėdami nurodyti plotą, kurį užims vaizdas, sukursime stačiakampius su tam tikru kryžiumi. Norėdami nurodyti, kad norime įtraukti vaizdo įrašus į tam tikrą sritį, į konteinerį įtrauksime grojimo simbolį. Šiame pirmame pavyzdyje mes dirbsime tik su vaizdais, viršutiniame užfiksavime galite pamatyti sritį, kurią logotipas iš mūsų svetainės.

Tai būtų galutinis mūsų rezultatas Wireframe. Kaip matome, ji yra padalinta į antraštę, susidedančią iš paveikslėlio, kuriame bus logotipas ir kuris bus nuoroda į pagrindinį puslapį, kurį lydės du skirtukai, paieškos sistema ir keturi mygtukai paieškos laukelyje. Be to, jau turėdami kūną, mes įtraukėme šoninę juostą, susidedančią iš skiriamosios juostos ir daugybės kategorijų, kurios suskirsto į kategorijas mūsų turinio tipą. Kitas skyrius su numeracija, į kurią įeina įrašai, kurie bus mūsų svetainėje, ir galiausiai sąrašas su reprezentatyviausiomis metažymėmis mūsų svetainėje.

Turinio srityje, kurią apibrėžs skyrius, kuriame bus savarankiškai valdomas turinys, rasime savo straipsnių turinį. Šiuo atveju džiūvėsėliai arba duonos trupiniai (kurie nurodo organišką mūsų svetainės struktūrą, straipsnio antraštę, metaduomenis, pastraipą kaip teksto rinkinį, į kurį įtrauktas vaizdas.

Kaip poraštę įtraukėme keturis vaizdus, ​​kurie bus nuoroda į kitas mūsų puslapio sritis. Čia galime įtraukti logotipus ar kitus įdomius skyrius. Nors iš tikrųjų ši sritis elgsis panašiau priekinis ratukas, nes pati poraštė bus šiek tiek žemesnė su naudojimo politika, teisiniu pranešimu ir autorių teisėmis.

Apibrėžę pagrindinę savo puslapio struktūrą ar griaučius, turėsime pereiti į kitą lygį. Tai sudarys tinkamas kiekvienos mūsų svetainės srities dizainas. Kitaip tariant, mes pradėsime „užpildyti“ kiekvieną iš šių sričių turiniu, kuris pagaliau bus įterptas į mūsų svetainę. Prieš pradėdami dirbti su vieliniu rėmu, šių elementų nerekomenduojame kurti, nes labai tikėtina, kad jei tai darysime tokia tvarka, vėliau turėsime pakeisti jų proporcijas. Mes rizikuojame iškraipyti savo vaizdus ir perdaryti kiekvieno elemento dizainą, kuris taps laiko švaistymu arba prastesnės kokybės rezultatu.

Šiuo atveju mūsų svetainės dizainas bus itin paprastas. Mes naudosime medžiagos dizaino priesakai, nes mes ketiname naudoti „Google“ logotipą, kad parodytume šią praktiką. Turiu paaiškinti, kad šios pamokos tikslas yra iliustruoti technines žinias, todėl estetinis rezultatas šiuo atveju nėra svarbus. Kaip matote, po truputį užpildėme erdvę visomis sritimis, kurias anksčiau nustatėme savo schemoje. Tačiau paskutinę minutę atlikome nedidelę modifikaciją. Kaip pastebėjote, mes žymiai sumažinome savo logotipo dydį ir apatinės antraštės srityje įtraukėme skiriamąją liniją, kuri puikiai susijungia su viršutiniu meniu. Šiuo atveju mes panaudojome išteklių banko mygtukus ir medžiagas. Kaip dizaineriai, mes galime juos patys kurti (ypač ši parinktis yra rekomenduojama, jei norime, kad ji pateiktų labai panašų toniką, kokį pateikia prekės ženklo įvaizdis ar logotipas).

Svarbu nepamiršti, kad norėdami pateikti šį pavyzdį, mes dirbsime dviem skirtingais lygiais. Viena vertus, dirbsime su objektais, kita vertus - su svetainės išvaizda. Tai yra, viena vertus, mūsų svetainės karkasas ir, kita vertus, apskritai plūduriuojančius elementus, kuriuos palaikys šis skeletas. Pastebėsite, kad yra sričių, kurios apskritai nebus plūduriuojančios, pvz., Plotas, kurį užims mūsų šoninė juosta, priekinis ratukas arba skiriamoji juosta, skirianti antraštę nuo kūno.

1, 2, 3 ir 4 konstrukcijos bus fonas mūsų tinklalapio, todėl iš tikrųjų nereikės eksportuoti kaip iš „Adobe Photoshop“, nors mes galime tai padaryti, tai nėra būtina. Kai kalbama apie Plokščios spalvos (viena iš esminių plokščio dizaino ir medžiagos dizaino savybių, jas galima puikiai pritaikyti naudojant kodą naudojant CSS stiliaus lapą). Tačiau likę elementai turi būti išsaugoti, kad juos vėliau būtų galima įterpti į HTML kodą. Šioje mažoje diagramoje mes taip pat atkartojome sritis, priklausančias puslapio fonui, kad galėtume aiškiai įsivaizduoti, kokia bus galutinė mūsų svetainės išvaizda.

Kaip galėsite suprasti, „Adobe Photoshop“ kuriant šią schemą siekiama gauti tikrąją kiekvieno elemento dimensiją ir paaiškinti kiekvieno elemento išdėstymą ir struktūrą. Žinoma, šiame proceso etape tekstiniam turiniui nėra vietos, nes jis turi būti tiekiamas iš mūsų kodo redaktoriaus. Taip pat turime atkreipti dėmesį į tai, kad šioje praktikoje dirbsime su mygtukais ir statiniais elementais, nors paprastai jie paprastai naudojami iš tokių sistemų kaip „Bootstrap“ arba tiesiai iš „Jquery“.

Kai sukursime kiekvieną iš mūsų tinklalapį sudarančių elementų, laikas pradėti juos eksportuoti ir išsaugoti vaizdų aplanke, esančiame HTML projekto aplanke. Svarbu, kad įpratote eksportuoti iš savo vielinio rėmo, nes labai tikėtina, kad kai kuriuos pradinius elementus reikės modifikuoti atsižvelgiant į griaučių konfigūraciją. (Pavyzdžiui, šiuo atveju mes pakeitėme originalių mygtukų dydį, logotipą ir daugumą elementų, kurie yra kompozicijos dalis, įskaitant vaizdus apatinėje srityje).

Svarbu, kad išmoktume savarankiškai išsaugoti bet kokį daiktą, kad tiksliai ir tiksliai išsaugotumėte juos turimais matmenimis. Bet kokia klaida, nors ir minimali, gali paveikti visus jūsų tinklalapio elementus. Atminkite, kad jie bus tarpusavyje susiję ir turi turėti puikius matmenis, kad juos būtų galima įvesti iš HTML galutiniame žiniatinklyje. Tokiu atveju turėsime savarankiškai iškirpti ir išsaugoti šiuos elementus:

• Mūsų logotipas.
• Visi mygtukai (tie, kurie yra pagrindinio meniu dalis, ir likusi dalis).
• Visi vaizdai.

Mes galime tai padaryti įvairiais būdais ir galbūt rasite sau efektyvesnę alternatyvą. Tačiau jei tokio tipo maketą ruošiatės pirmą kartą, rekomenduoju vadovautis šiais patarimais.

• Pirmiausia turite eiti į aplanką, kuriame yra PSD failas, kuriame yra mūsų vielos rėmas, ir nukopijuoti jį tiek kartų, kiek elementų, kuriuos ketinate eksportuoti. Šiuo atveju mes sukūrėme 12 originalo kopijų ir išsaugojome jas tame pačiame aplanke. Tada jūs pervadinsite visas kopijas ir kiekvienai iš jų priskirsite joje esančio elemento pavadinimą. Mūsų 12 egzempliorių bus pervadinta: logotipas, meniu mygtukas 1, meniu mygtukas 2, paieškos juosta, viršutinis mygtukas 1, viršutinis mygtukas 2, viršutinis mygtukas 3 ir viršutinis mygtukas 4. Likę keturi bus pervadinti taip: 1 paveikslėlis, 2 vaizdas, 3 ir 4 paveikslai.
• Tai padarę, atidarysime failą su logotipo pavadinimu.
• Eisime į savo sluoksnių paletę ir surasime sluoksnį, kuriame yra mūsų logotipas. Tada paspausime „Ctrl“ / „Cmd“ kol spustelėsime minėto sluoksnio miniatiūrą. Tokiu būdu logotipas bus pasirinktas automatiškai.
• Kitas žingsnis bus pasakyti „Photoshop“, kad mes norime, kad jis tiksliai iškirptų tą logotipą. Tam mums tereikės iškviesti apkarpymo įrankį tik iš rakto ar komandos C.
• Tai padarę, mes spustelėsime mygtuką „Enter“, kad patvirtintume pjūvį.
• Dabar eisime į viršutinį meniu „Failas“ ir spustelėkite „Išsaugoti kaip“. Mes pasirinksime pavadinimą, kuris šiuo atveju bus «Logo», ir mes paskirsime formatą PNG, kad failas siūlo aukščiausią kokybę internete.
• Mes pakartosime procesą su visomis kopijomis ir elementais. Kai apkarpysite, įsitikinkite, kad likę mūsų paletės sluoksniai yra nematomas arba pašalinti. Tokiu būdu galime išsaugoti kiekvieną elementą su skaidriu fonu.

Šiuo atveju mes pasirenkame 2 meniu mygtuką iš sluoksnių paletės. Ekrano kopijoje galite pamatyti, kaip automatiškai pasirinktos mūsų mygtuko ribos.

Kai pasirenkame apkarpymo įrankį iš C klavišo, mūsų drobė sumažinama tik iki mygtuko matmenų.

Dabar yra laikas po vieną išsaugoti visus elementus, kurie yra mūsų svetainės dalis, ir įtraukti juos į vaizdų aplanką, kuriuos naudosime vėliau. Skambinsime naudodami savo kodą ir tęsime išdėstymą, bet nuo šiol naudosime kodo redaktorių.

Nors yra daugybė tinklalapio išdėstymo įrankių ir alternatyvų, kurie daro procesą visiškai intuityvų, labai svarbu, kad mes išmoktume tai vadovas. Tokiu būdu sužinosime, kokie yra pagrindiniai tinklalapio dizaino pagrindai.

Santrauka:

1. Suprojektuokite estructura svetainės, ypatingą dėmesį skiriant turiniui, kurį norite perduoti, ir skyriams, kuriuos turite sukurti savo svetainėje.
2. Dirbkite prie savo griaučių ar Wireframe iš „Adobe Photoshop“, nurodydamas, kuriose srityse turinys bus rodomas, ir jų formatą.
3. Pradėkite pasikliauti anksčiau sukurtomis priemonėmis ir prekės ženklais dizainas tinklo paviršiaus. Apima visus elementus (tiek plaukiojančius, tiek fiksuotus). Nepamirškite įtraukti atitinkamų mygtukų, logotipo ir vaizdų.
4. Iškirpkite po vieną visus elementus, kurie yra projekto dalis. Įsitikinkite, kad jie turi tinkamas priemones ir kad vėliau jie jums nekels problemų.
5. Išsaugokite visus elementus formatu PNG vaizdų aplanke, esančiame projekto aplanke HTML.
6. Atminkite, kad šis projektas turės išvestį į interneto langą, todėl labai svarbu atsižvelgti į spalvų režimą ir pritaikyti RGB.
7. Įkvėpkite kitų tinklalapių, kuriais žavitės prieš pradėdami dirbti, ir nepamirškite apie tai aptarti su savo komandos nariais. Jei tai kliento projektas, pabandykite laikytis projekto instruktažas taip toli kaip įmanoma.