Výukový program: Ako rozložiť webovú stránku pomocou aplikácie Adobe Photoshop

MODELOVÝ FOTOSHOP

Existuje obrovská škála nástrojov na navrhovanie webových stránok a prácu úplne jednoduchým a funkčným spôsobom bez zadávania alebo dotyku kódu. Je ich nespočetné množstvo, ktoré navrhujú aplikácie (Adobe Dreamweaver (napríklad) alebo priamo online platformami, ako je Wix. Pre webdizajnéra je však znalosť manuálnych postupov nevyhnutná. HTML5 a CSS sú základnými piliermi rozloženia webových stránok a vstupných stránok.

Avšak častejšie, ako by ste čakali, sa budete musieť obrátiť na aplikácie ako Indesign alebo Adobe Photoshop aby doplnili vašu prácu s usporiadaním a poskytli im dokonalú povrchovú úpravu. Dnes uvidíme v tomto rozsiahlom výučbe, ako môžeme rozložiť webovú stránku pomocou programu Adobe Photoshop. V tejto prvej časti zostaneme pri práci, ktorá bude vyvinutá z Photoshopu, aj keď v ďalších častiach uvidíme, ako môžeme túto prácu aplikovať už priamo v kóde HTML, aby bola funkčná.

Počnúc návrhom nášho drôtového modelu

Ak chcete začať s rozložením a dizajnom webovej stránky, je nesmierne dôležité, aby sme začali definíciou, aké budú základné prvky, to je kostra. Táto štruktúra bude slúžiť ako podpora pre uchovanie celého obsahu (textového alebo multimediálneho). Definovaním každej z častí, ktoré tvoria našu stránku, budeme schopní na nich pracovať s úplnou presnosťou a poskytnúť čo najpresnejší vizuálny dizajn.

Je veľmi dôležité, aby sme zohľadnili rozmery, ktoré bude mať naša webová stránka, ak bude mať a krabicové alebo na celú šírku. Krabicová webová stránka bude vo vnútri malého kontajnera, a preto sa okolo nej objaví medzera. Naopak, celý web bude zaberať celú obrazovku zariadenia, ktoré stránku reprodukuje. Výber jedného alebo druhého spôsobu zodpovedá iba štylistickým otázkam a bude závisieť aj od potrieb projektu, na ktorom pracujeme. V tomto príklade budeme pracovať v krabicovom režime, aby nezaberal všetok priestor poskytovaný prehliadačom.

Drôtový model-1

Aby sme vytvorili náš drôtový model, prvá vec, ktorú musíme urobiť, je vstúpiť do aplikácie Adobe Photoshop a zahrnúť rozmery, ktoré chceme, aby mala naša stránka. V tomto príklade bude naša stránka široká 1280 XNUMX pixelov. Problém s veľkosťou sa však môže líšiť v závislosti od konečného cieľa alebo zariadenia, na ktorom chceme našu stránku reprodukovať. Niet pochýb o tom, že aby bol webový dizajn funkčný a efektívny, musí byť citlivý a musí sa prispôsobiť všetkým zariadeniam na trhu. V tomto prípade však budeme pracovať na vytvorení prototypu, ktorý budeme reprodukovať na stolnom počítači. Aj napriek tomu bude responzívnou otázkou, ktorej sa budeme venovať neskôr, v tomto príklade zatiaľ k dispozícii hierarchia rozmerov obrazovky. Majte na pamäti, že v tomto prípade urobíme rozloženie vstupnej stránky v programe Adobe Photoshop a potom ju migrujeme do formátu HTML5 A CSS3. Cieľom tejto malej praxe je previesť dizajn vytvorený vo Photoshope na použiteľný a interaktívny webový design, ktorý reaguje na pohyby používateľa.

Merania pre mobilné telefóny

iPhone 4 a 4S: 320 x 480

iPhone 5 a 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

Merania tabliet

Všetky modely iPadu, ako aj iPad Mini: 1024 x 768

Galaxy Tab 2 a 3 (7.0 palca): 600 x 1024

Galaxy Tab 2 a 3 (10.1 palca): 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

Merania pre stolové počítače

Malé obrazovky (používané napríklad v netbookoch): 1024 x 600

Stredné obrazovky: 1280 x 720/1280 x 800

Veľké obrazovky: šírka viac ako 1400 pixelov, napríklad 1400 x 900 alebo 1600 x 1200.

drôtené vodidlá

Ak chcete začať distribuovať prvky a priraďovať sekcie v rámci našej webovej makety, je veľmi dôležité, aby sme vzali do úvahy proporcie, aby sme zaistili čitateľný a melodický záver. Bude nevyhnutné, aby ste využili možnosti pravidiel a sprievodcov, ktoré nájdete v hornom menu Zobraziť. Aby sme pracovali proporčne a presne, je najlepšie, aby sme pracovali percentuálne. Klikneme na ponuku zobrazenia a potom na možnosť «Nový sprievodca», aby sme zvolili spôsob rozdelenia. V tomto prípade urobíme štyri zvislé rozdelenia na 25% a vezmeme ich ako referenciu, aby sme umiestnili naše obrázky do päty a obrázok nášho loga do hlavičky.

Drôtový model-1a

Existuje kód na označenie každej z oblastí, ktoré budú obsadzovať našu Model a funkciu, ktorú každý z nich bude mať. Napríklad na označenie oblasti, ktorú bude obrázok zaberať, vytvoríme obdĺžniky s akýmsi krížom. Aby sme naznačili, že chceme zahrnúť videá do určitej oblasti, vložíme do nášho kontajnera symbol prehrávania. V tomto prvom príklade budeme pracovať iba s obrázkami, v hornom snímaní vidíte oblasť, ktorá bude zaberať logo z našej webovej stránky.

Drôtový model - finále

To by bol konečný výsledok nášho wireframe. Ako vidíme, je rozdelený na hlavičku zloženú z obrázka, na ktorom sa logo bude nachádzať a ktorý bude slúžiť ako odkaz na domovskú stránku doplnený dvoma kartami, vyhľadávacím nástrojom a štyrmi tlačidlami na vyhľadávacom poli. Okrem toho sme už do tela zahrnuli bočný panel zložený z deliacej lišty a série kategórií, ktoré kategorizujú typ obsahu, ktorý bude na našom webe. Ďalšia časť s číslovaním, ktorá obsahuje záznamy, ktoré budú existovať na našom webe, a nakoniec zoznam s najreprezentatívnejšími metaznačkami na našom webe.

V oblasti obsahu, ktorá bude definovaná časťou, ktorá bude obsahovať samostatne spravovateľný obsah, nájdeme obsah našich článkov. V tomto prípade strúhanka alebo strúhanka (ktorá označuje organickú štruktúru našej webovej stránky, názov článku, metadáta, odsek ako text, do ktorého je zahrnutý obrázok.

Ako pätu sme zahrnuli štyri obrázky, ktoré budú slúžiť ako odkaz na ďalšie oblasti našej stránky. Sem môžeme zahrnúť logá alebo iné zaujímavé sekcie. Aj keď v skutočnosti sa bude táto oblasť správať viac prednožka, pretože samotná päta pôjde o niečo ďalej s politikou používania, právnym oznámením a autorskými právami.

Keď definujeme základnú štruktúru alebo kostru našej stránky, budeme musieť prejsť na ďalšiu úroveň. Bude to spočívať v správnom dizajne každej z oblastí našej webovej stránky. Inými slovami, začneme každú z týchto oblastí „vypĺňať“ obsahom, ktorý bude nakoniec vložený na našu webovú stránku. Odporúča sa, aby sme tieto prvky nenavrhli pred prácou na drôtovom modeli, pretože je veľmi pravdepodobné, že ak to urobíme v tomto poradí, budeme musieť neskôr upraviť ich proporcie. Riskujeme skreslenie našich obrázkov a musí prerobiť dizajn každého z prvkov, čo sa stane buď stratou času, alebo výsledkom s nižšou kvalitou.

V takom prípade bude dizajn našej webovej stránky mimoriadne jednoduchý. Použijeme nariadenia o materiálovom dizajne, pretože na ilustráciu tohto postupu použijeme logo Google. Musím objasniť, že účelom tohto tutoriálu je ilustrovať technické znalosti, takže estetický výsledok je v tomto prípade irelevantný. Ako vidíte, postupne sme zapĺňali priestor všetkými oblasťami, ktoré sme predtým určili v našej schéme. Na poslednú chvíľu sme však urobili malú úpravu. Ako ste si mohli všimnúť, výrazne sme zmenšili veľkosť nášho loga a do dolnej oblasti záhlavia sme zahrnuli deliacu čiaru, ktorá sa dokonale spája s hornou ponukou. V tomto prípade sme použili tlačidlá a materiály z banky zdrojov. Ako dizajnéri si ich môžeme navrhnúť sami (obzvlášť táto možnosť sa odporúča, ak chceme, aby predstavovala veľmi podobné tonikum ako tonikum prezentované obrázkom značky alebo logom).

web

Je dôležité mať na pamäti, že pri vysvetlení tohto príkladu budeme pracovať na dvoch rôznych úrovniach. Na jednej strane budeme pracovať na objektoch a na druhej strane vzhľad webovej stránky. To znamená na jednej strane v kostre nášho webu a na druhej strane vo všetkých plávajúce prvky, ktoré táto kostra podporí. Uvedomíte si, že existujú oblasti, ktoré sa nebudú vznášať vôbec, napríklad oblasť, ktorú zaberie náš bočný panel, predchodca alebo deliaca lišta, ktorá oddeľuje hlavičku od tela.

web2

Stavby 1, 2, 3 a 4 budú súčasťou pozadia našej webovej stránky, takže v skutočnosti nebude potrebné, aby sme exportovali ako také z programu Adobe Photoshop, hoci to dokážeme, nie je to potrebné. Pokiaľ ide o Ploché farby (jedna zo základných vlastností plochého a materiálového dizajnu je možné ich perfektne aplikovať prostredníctvom kódu pomocou šablóny štýlov CSS). Zvyšok prvkov však musí byť uložený pre neskoršie vloženie do nášho kódu HTML. V tomto malom diagrame sme tiež reprodukovali oblasti, ktoré patria do pozadia stránky, aby sme mali jasnú predstavu o tom, aký bude konečný vzhľad nášho webu.

Ako si budete môcť uvedomiť, účelom vytvorenia tejto schémy v programe Adobe Photoshop je získať skutočný rozmer každého prvku a objasniť usporiadanie a štruktúru každého prvku. Textový obsah samozrejme nemá v tejto fáze procesu miesto, pretože musí byť dodáva od nášho editora kódov. Musíme tiež poukázať na to, že v tejto praxi budeme pracovať s tlačidlami a statickými prvkami, aj keď tie sa zvyčajne aplikujú z rámcov ako Bootstrap alebo priamo z Jquery.

Keď sme vytvorili každý z prvkov, ktoré tvoria našu webovú stránku, je čas začať ich exportovať a ukladať do priečinka s obrázkami umiestneného vo vnútri priečinka projektu HTML. Je dôležité, aby ste si zvykli na export z vášho drôtového modelu, pretože je veľmi pravdepodobné, že budete musieť upraviť niektoré pôvodné prvky na základe konfigurácie kostry. (Napríklad v tomto prípade sme zmenili veľkosť pôvodných tlačidiel, loga a väčšiny prvkov, ktoré sú súčasťou kompozície, vrátane obrázkov v dolnej oblasti).

Je dôležité, aby sme sa naučili ukladať ľubovoľné položky nezávisle, aby sme ich ukladali s rozmermi, ktoré majú, a to presným spôsobom. Akákoľvek chyba, nech už je akákoľvek malá, môže ovplyvniť všetky prvky, ktoré sú súčasťou vašej webovej stránky. Majte na pamäti, že budú navzájom súvisieť a musia mať perfektné rozmery, aby ich bolo možné zadávať z kódu HTML vo finálnom webe. V takom prípade budeme musieť nezávisle vystrihnúť a uložiť nasledujúce prvky:

  • Naše logo.
  • Všetky tlačidlá (tie, ktoré sú súčasťou hlavnej ponuky a ostatné).
  • Všetky obrázky.

Dokážeme to mnohými spôsobmi a možno nájdete alternatívu, ktorá je pre vás efektívnejšia. Ale ak je to prvýkrát, čo sa chystáte vytvoriť tento typ rozloženia, odporúčam vám postupovať podľa nasledujúcich tipov.

  • Najskôr musíte prejsť do priečinka, kde sa nachádza súbor PSD, ktorý obsahuje náš drôtový model, a duplikovať ho toľkokrát, koľko prvkov sa chystáte exportovať. V tomto prípade sme vytvorili 12 kópií z originálu a uložili sme ich do rovnakého priečinka. Ďalej každú z kópií premenujete a každej z nich priradíte názov prvku, ktorý obsahuje. Našich 12 kópií bude premenovaných: Logo, tlačidlo ponuky 1, tlačidlo ponuky 2, lišta vyhľadávania, horné tlačidlo 1, horné tlačidlo 2, horné tlačidlo 3 a horné tlačidlo 4. Zvyšné štyri budú premenované ako: Obrázok 1, Obrázok 2, Obrázok 3 a obrázok 4.
  • Po dokončení otvoríme súbor s názvom loga.
  • Prejdeme do našej palety vrstiev a nájdeme vrstvu, ktorá obsahuje naše logo. Potom stlačíme Ctrl / Cmd zatiaľ čo klikneme na miniatúru uvedenej vrstvy. Týmto spôsobom bude logo vybrané automaticky.
  • Ďalším krokom bude povedať aplikácii Photoshop, že chceme, aby logo presne vystrihla. Na tento účel budeme musieť zavolať nástroj na orezanie iba pomocou klávesu alebo príkazu C.
  • Keď to urobíme, klikneme na naše tlačidlo Enter a potvrdíme tak strih.
  • Teraz prejdeme do hornej ponuky Súbor a klikneme na tlačidlo Uložiť ako. Vyberieme názov, ktorý v tomto prípade bude «Logo» a priradíme mu formát PNG, za súbor, ktorý ponúka na webe najvyššiu kvalitu.
  • Postup zopakujeme so všetkými kópiami a prvkami. Po orezaní skontrolujte, či sú to zvyšné vrstvy v našej palete neviditeľný alebo vylúčené. Týmto spôsobom môžeme každý prvok uložiť s priehľadným pozadím.

Button1

V takom prípade vyberáme naše tlačidlo ponuky 2 z palety vrstiev. Na snímke obrazovky môžete vidieť, ako sa automaticky vybrali limity nášho tlačidla.

tlačidlo2

Keď vyberieme nástroj na orezanie z klávesu C, naše plátno sa zmenší iba na rozmery nášho tlačidla.

uložiť tlačidlo

Teraz je čas uložiť jeden po druhom všetky prvky, ktoré sú súčasťou našej webovej stránky, a zahrnúť ich do priečinka s obrázkami a ktoré neskôr použijeme. Budeme volať z nášho kódu a budeme pokračovať v našom rozložení, ale odteraz z nášho editora kódu.

Aj keď existuje veľa nástrojov a alternatív k rozloženiu webovej stránky, vďaka ktorým je proces úplne intuitívny, je veľmi dôležité, aby sme sa to naučili robiť Manuálny. Týmto spôsobom sa dozvieme, aké sú základy návrhu webovej stránky.

Zhrnutie:

  1. Navrhnite štruktúra venujte osobitnú pozornosť obsahu, ktorý chcete prenášať, a sekciám, ktoré musíte na svojom webe vytvoriť.
  2. Pracujte na svojej kostre resp wireframe z Adobe Photoshopu s uvedením, v ktorých oblastiach sa obsah objaví, a ich formát.
  3. Spoliehať sa na opatrenia a značky, ktoré ste predtým vyvinuli, začnite dizajn povrchu webu. Zahŕňa všetky prvky (plávajúce aj pevné). Nezabudnite zahrnúť príslušné tlačidlá, logo a obrázky.
  4. Vystrihnite jeden po druhom všetky prvky, ktoré sú súčasťou projektu. Zaistite, aby mali správne opatrenia a aby vám neskôr nespôsobovali problémy.
  5. Uložte všetky prvky vo formáte PNG v priečinku s obrázkami vo vnútri priečinka s projektom HTML.
  6. Majte na pamäti, že tento projekt bude mať výstup do webového okna, takže je veľmi dôležité vziať do úvahy farebný režim a použiť RGB.
  7. Skôr ako sa pustíte do podnikania, nechajte sa inšpirovať ďalšími webovými stránkami, ktoré obdivujete, a nezabudnite o tom diskutovať so svojimi členmi tímu. V prípade, že ide o projekt pre klienta, snažte sa držať briefing čo najďalej ako je to možné.

2 komentáre, nechajte svoj

Zanechajte svoj komentár

Vaša e-mailová adresa nebude zverejnená. Povinné položky sú označené *

*

*

  1. Zodpovedný za údaje: Miguel Ángel Gatón
  2. Účel údajov: Kontrolný SPAM, správa komentárov.
  3. Legitimácia: Váš súhlas
  4. Oznamovanie údajov: Údaje nebudú poskytnuté tretím stranám, iba ak to vyplýva zo zákona.
  5. Ukladanie dát: Databáza hostená spoločnosťou Occentus Networks (EU)
  6. Práva: Svoje údaje môžete kedykoľvek obmedziť, obnoviť a vymazať.

  1.   Pirátsky kráľ pirátov dijo

    hahahahahahaha a na konci toho všetkého prejdete na štartovacie tlačidlo, vypnete zariadenie a pôjdete ku kurevskému profesionálovi, ktorý vám spraví web, ktorý nie je kurva hovno;)

  2.   Ronny dijo

    Tutoriál ma dobre chváli, ale možno v ďalšom urobíte podrobnejšie, stále začínam s týmto dizajnom a keď vidím obrázky s konečným výsledkom, sú niektoré kroky, ktoré neviem urobiť. Ďakujem.