Výukový program: Jak rozložit webovou stránku pomocí aplikace Adobe Photoshop

MODELOVÝ FOTOSHOP

Existuje obrovská škála nástrojů pro návrh webových stránek a práci zcela jednoduchým a funkčním způsobem bez zadávání nebo dotýkání se kódu. Je jich nespočet, navrhovaných aplikacemi (Adobe Dreamweaver je příklad) nebo přímo online platformami, jako je Wix. Pro webového designéra je však znalost ručních postupů nezbytná. HTML5 a CSS jsou základními pilíři rozložení webových stránek a vstupních stránek.

Avšak častěji, než byste čekali, se budete muset obrátit na aplikace jako Indesign nebo Adobe Photoshop jako doplněk vaší práce s rozvržením a dokonalé dokončení. Dnes uvidíme v tomto rozsáhlém tutoriálu, jak můžeme rozložit webovou stránku pomocí Adobe Photoshopu. V této první části zůstaneme v práci, která bude vyvinuta z Photoshopu, i když v budoucích instalacích uvidíme, jak můžeme tuto práci použít již přímo v HTML kódu, aby byla funkční.

Počínaje designem našeho drátového modelu

Pro začátek s rozvržením a designem webové stránky je nesmírně důležité, abychom začali definováním základních prvků, to je kostra. Tato struktura bude sloužit jako podpora pro uložení veškerého obsahu (ať už textového nebo multimediálního). Definováním každé z částí, které tvoří naši stránku, budeme schopni na nich pracovat s úplnou přesností a poskytnout vizuální design, který bude co nejúspěšnější.

Je velmi důležité, abychom vzali v úvahu rozměry, které náš web bude mít, pokud bude mít v krabici nebo v plné šířce. Orámovaná webová stránka bude uvnitř malého kontejneru, a proto se kolem ní objeví mezera. Naopak celý web obsadí celou obrazovku zařízení, které stránku reprodukuje. Výběr mezi jedním nebo druhým způsobem odpovídá pouze na stylistické otázky a bude také záviset na potřebách projektu, na kterém pracujeme. V tomto příkladu budeme pracovat v krabicovém režimu, takže nezabere celý prostor poskytovaný prohlížečem.

 

Drátový model-1

Chcete-li vytvořit náš drátový model, první věcí, kterou musíme udělat, je vstoupit do aplikace Adobe Photoshop a zahrnout rozměry, které chceme, aby naše stránka měla. V tomto příkladu bude naše stránka široká 1280 pixelů. Problém s velikostí se však může lišit v závislosti na konečném cíli nebo zařízení, na kterém chceme naši stránku reprodukovat. Není pochyb o tom, že aby byl webový design funkční a efektivní, musí být citlivý a musí se přizpůsobit všem zařízením na trhu. V tomto případě však budeme pracovat na vytvoření prototypu, který budeme reprodukovat na stolním počítači. I přesto bude responzivní problém, kterému se budeme věnovat později, prozatím zde je hierarchie rozměrů obrazovky, na které se bude v tomto příkladu pracovat. Pamatujte, že v tomto případě provedeme rozložení vstupní stránky v aplikaci Adobe Photoshop a poté ji migrujeme do formátu HTML5 A CSS3. Cílem této malé praxe je převést design vytvořený ve Photoshopu na použitelný a interaktivní webový design, který reaguje na pohyby uživatele.

Měření pro mobilní telefony

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

Měření tablet

iPad pro všechny modely i iPad Mini: 1024 x 768

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

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

Měření pro stolní počítače

Malé obrazovky (používané například v netbookech): 1024 x 600

Střední obrazovky: 1280 x 720/1280 x 800

Velké obrazovky: šířka větší než 1400 pixelů, například 1400 x 900 nebo 1600 x 1200.

 

drátová vedení

Chcete-li začít distribuovat prvky a přiřazovat sekce v rámci naší webové makety, je velmi důležité vzít v úvahu proporce, abychom zajistili čitelné a melodické provedení. Bude nezbytné, abyste využili možnosti pravidel a průvodců, které najdete v horní nabídce Zobrazit. Abychom mohli pracovat proporcionálně a přesně, je nejlepší pracovat procenty. Klikneme na nabídku zobrazení a poté na možnost «Nový průvodce» a vybereme způsob rozdělení. V tomto případě uděláme čtyři svislé divize na 25% a vezmeme je jako referenci k umístění našich obrázků do zápatí a obrázku našeho loga do záhlaví.

Drátový model-1a

Existuje kód pro označení každé z oblastí, které budou zabírat naši Modelka a funkce, kterou každý z nich bude mít. Například pro označení oblasti, kterou bude obrázek zabírat, vytvoříme obdélníky s druhem kříže. Abychom naznačili, že chceme do určité oblasti zahrnout videa, vložíme do našeho kontejneru symbol přehrávání. V tomto prvním příkladu budeme pracovat pouze s obrázky, v horním snímku můžete vidět oblast, kterou logotipo z našeho webu.

Drátový model - finále

To by byl konečný výsledek našeho wireframe. Jak vidíme, je rozdělen na záhlaví složené z obrázku, ve kterém bude logo nalezeno a které bude sloužit jako odkaz na domovskou stránku doprovázený dvěma kartami, vyhledávačem a čtyřmi tlačítky ve vyhledávacím poli. Kromě toho jsme již v těle zahrnuli postranní panel složený z dělícího pruhu a řady kategorií, které kategorizují typ obsahu, který bude na našem webu. Další část s číslováním, která zahrnuje položky, které budou na našem webu existovat, a nakonec seznam s nejreprezentativnějšími metaznačkami nebo štítky na našem webu.

V oblasti obsahu, která bude definována částí, která bude zahrnovat spravovatelný obsah, najdeme obsah našich článků. V tomto případě strouhanka nebo strouhanka (což označuje organickou strukturu našeho webu, nadpis článku, metadata, odstavec jako text, do kterého je zahrnut obrázek.

Jako zápatí jsme zahrnuli čtyři obrázky, které budou sloužit jako odkaz na další oblasti naší stránky. Zde můžeme zahrnout loga nebo jiné zajímavé sekce. I když ve skutečnosti se tato oblast bude chovat spíše jako před nohou, protože samotná zápatí půjde s politikou používání, právním oznámením a autorskými právy trochu dále.

Jakmile definujeme základní strukturu nebo kostru naší stránky, budeme muset přejít na další úroveň. To se bude skládat ze správného designu každé z oblastí našeho webu. Jinými slovy začneme „vyplňovat“ každou z těchto oblastí obsahem, který bude nakonec vložen na náš web. Doporučuje se, abychom nezačali navrhovat tyto prvky před prací na drátovém modelu, protože je velmi pravděpodobné, že pokud to provedeme v tomto pořadí, později budeme muset upravit jejich proporce. Riskujeme narušení našich obrazů a musí předělat design každého z prvků, což se stane buď ztrátou času, nebo výsledkem nižší kvality.

V tomto případě bude design našeho webu extrémně jednoduchý. Budeme používat předpisy pro materiálový design, protože pro ilustraci této praxe použijeme logo Google. Musím objasnit, že účelem tohoto tutoriálu je ilustrovat technické znalosti, takže estetický výsledek je v tomto případě irelevantní. Jak vidíte, postupně jsme vyplňovali prostor všemi oblastmi, které jsme dříve určili v našem schématu. Na poslední chvíli jsme však provedli malou úpravu. Jak jste si možná všimli, podstatně jsme zmenšili velikost našeho loga a do oblasti dolního záhlaví jsme zahrnuli dělící čáru, která dokonale navazuje na horní nabídku. V tomto případě jsme použili tlačítka a materiály z banky zdrojů. Jako designéři si je můžeme navrhnout sami (obzvláště tato možnost se doporučuje, pokud chceme, aby představovala velmi podobné tonikum, jaké představuje image značky nebo logo).

Web

Je důležité mít na paměti, že pro vyložení tohoto příkladu budeme pracovat na dvou různých úrovních. Na jedné straně budeme pracovat na objektech a na druhé straně vzhled webových stránek. To znamená na jedné straně kostru našeho webu a na druhé straně ve všech plovoucí prvky, které tato kostra bude podporovat. Všimnete si, že existují oblasti, které se vůbec nebudou vznášet, například oblast, kterou zabírá náš postranní panel, přednastavení nebo dělicí lišta, která odděluje záhlaví od těla.

Web2

Struktury 1, 2, 3 a 4 budou součástí pozadí naší webové stránky, takže ve skutečnosti nebude nutné exportovat jako takové z Adobe Photoshopu, i když to dokážeme, není to nutné. Pokud jde o Ploché barvy (jedna ze základních vlastností plochého a materiálového designu je lze perfektně aplikovat prostřednictvím kódu pomocí šablony stylů CSS). Zbytek prvků však musí být uložen pro pozdější vložení do našeho kódu HTML. V tomto malém diagramu jsme také reprodukovali oblasti, které patří do pozadí stránky, abychom měli jasnou představu o tom, jaký bude konečný vzhled našeho webu.

Jak si budete moci uvědomit, účelem vytvoření tohoto schématu v Adobe Photoshopu je získání skutečné dimenze každého prvku a vyjasnění uspořádání a struktury každého prvku. Textový obsah samozřejmě v této fázi procesu nemá místo, protože musí být dodáno z našeho editoru kódů. Musíme také poukázat na to, že v této praxi budeme pracovat s tlačítky a statickými prvky, i když obecně se obvykle používají z frameworků jako Bootstrap nebo přímo z Jquery.

Jakmile jsme vytvořili každý z prvků, které budou tvořit naši webovou stránku, je čas začít je exportovat a ukládat do složky obrázků umístěné uvnitř složky projektu HTML. Je důležité si zvyknout na export z vašeho drátového modelu, protože je velmi pravděpodobné, že budete muset upravit některé z původních prvků na základě konfigurace kostry. (Například v tomto případě jsme změnili velikost původních tlačítek, loga a většiny prvků, které jsou součástí kompozice, včetně obrázků v dolní oblasti).

Je důležité, abychom se naučili ukládat libovolné položky samostatně, abychom je ukládali s rozměry, které mají, a to přesným způsobem. Jakákoli chyba, i když minimální, může ovlivnit všechny prvky, které jsou součástí vaší webové stránky. Mějte na paměti, že budou spolu souviset a musí mít perfektní rozměry, aby je bylo možné zadávat z HTML na finálním webu. V tomto případě budeme muset samostatně vyjmout a uložit následující prvky:

  • Naše logo.
  • Všechna tlačítka (ta, která jsou součástí hlavního menu a ostatní).
  • Všechny obrázky.

Můžeme to udělat mnoha způsoby a možná najdete alternativu, která je pro vás efektivnější. Pokud ale tento typ rozvržení provádíte poprvé, doporučuji vám postupovat podle následujících tipů.

  • Nejprve musíte přejít do složky, kde je umístěn soubor PSD obsahující náš drátový model, a duplikovat jej tolikrát, kolikrát budete exportovat prvky. V tomto případě jsme z originálu vytvořili 12 kopií a uložili jsme je do stejné složky. Dále přejmenujete každou z kopií a každé z nich přiřadíte název prvku, který obsahuje. Našich 12 kopií bude přejmenováno: Logo, tlačítko nabídky 1, tlačítko nabídky 2, panel vyhledávání, horní tlačítko 1, horní tlačítko 2, horní tlačítko 3 a horní tlačítko 4. Zbývající čtyři budou přejmenovány jako: Obrázek 1, Obrázek 2, Obrázek 3 a obrázek 4.
  • Jakmile to uděláte, otevřeme soubor s názvem loga.
  • Půjdeme do naší palety vrstev a vyhledáme vrstvu, která obsahuje naše logo. Pak stiskneme Ctrl / Cmd zatímco klikneme na miniaturu uvedené vrstvy. Tímto způsobem bude logo vybráno automaticky.
  • Dalším krokem bude říct Photoshopu, že chceme, aby to logo přesně vystřihlo. K tomu budeme muset pouze volat nástroj pro oříznutí pomocí klávesy nebo příkazu C.
  • Jakmile to uděláme, klikneme na tlačítko Enter pro potvrzení řezu.
  • Nyní přejdeme do horní nabídky Soubor a klikneme na Uložit jak. Vybereme název, který v tomto případě bude «Logo» a přiřadíme formát PNGza soubor, který na webu nabízí nejvyšší kvalitu.
  • Opakujeme postup se všemi kopiemi a prvky. Když jste ořízli, ujistěte se, že ostatní vrstvy v naší paletě jsou neviditelný nebo odstraněny. Tímto způsobem můžeme uložit každý prvek s průhledným pozadím.

Tlačítko 1

V tomto případě vybíráme naše tlačítko nabídky 2 z palety vrstev. Na snímku obrazovky vidíte, jak byly automaticky vybrány limity našeho tlačítka.

tlačítko2

Jakmile vybereme nástroj oříznutí z klávesy C, naše plátno se zmenší pouze na rozměry našeho tlačítka.

tlačítko uložení

Nyní je čas uložit jeden po druhém všechny prvky, které jsou součástí našeho webu, a zahrnout je do složky obrázků, kterou později použijeme. Budeme volat z našeho kódu a budeme pokračovat v našem rozložení, ale od nynějška z našeho editoru kódu.

Přestože existuje mnoho nástrojů a alternativ k rozvržení webové stránky, díky nimž je proces zcela intuitivní, je velmi důležité, abychom se to naučili manuál. Tímto způsobem se naučíme, jaké jsou základy návrhu webové stránky.

Shrnutí:

  1. Navrhněte struktura věnujte zvláštní pozornost obsahu, který chcete přenášet, a částem, které na svém webu musíte vytvořit.
  2. Pracujte na své kostře nebo wireframe z aplikace Adobe Photoshop označující, ve kterých oblastech se obsah objeví, a jejich formát.
  3. Začněte spoléhat na opatření a značky, které jste dříve vyvinuli diseñar povrch webu. Zahrnuje všechny prvky (plovoucí i pevné). Nezapomeňte zahrnout odpovídající tlačítka, logo a obrázky.
  4. Vystřihněte jeden po druhém všechny prvky, které jsou součástí projektu. Ujistěte se, že mají správná opatření a že vám později nebudou dělat problémy.
  5. Uložte všechny prvky ve formátu PNG ve složce obrázků uvnitř složky projektu HTML.
  6. Pamatujte, že tento projekt bude mít výstup do webového okna, takže je velmi důležité vzít v úvahu barevný režim a použít RGB.
  7. Než se pustíte do práce, nechte se inspirovat dalšími webovými stránkami, které obdivujete, a nezapomeňte o tom diskutovat se členy svého týmu. V případě, že se jedná o projekt pro klienta, zkuste se držet instrukce tak daleko, jak je to jen možné.

 


Obsah článku se řídí našimi zásadami redakční etika. Chcete-li nahlásit chybu, klikněte zde.

2 komentářů, nechte svůj

Zanechte svůj komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

*

*

  1. Odpovědný za údaje: Miguel Ángel Gatón
  2. Účel údajů: Ovládací SPAM, správa komentářů.
  3. Legitimace: Váš souhlas
  4. Sdělování údajů: Údaje nebudou sděleny třetím osobám, s výjimkou zákonných povinností.
  5. Úložiště dat: Databáze hostovaná společností Occentus Networks (EU)
  6. Práva: Vaše údaje můžete kdykoli omezit, obnovit a odstranit.

  1.   Pirátský král pirátů řekl

    hahahahahaha a na konci toho všeho přejdete na tlačítko Start, vypnete zařízení a přejdete ke zkurvenému profesionálovi, který vám udělá web, který není zasraný hovno;)

  2.   Ronny řekl

    Výukový program mě dobře ocení, ale možná v dalším to zpřesníte, stále začínám s tímto designem, a když vidím obrázky s konečným výsledkem, existují některé kroky, které nevím, jak to udělat. Děkuji.