Vytvoření návrhu webu pomocí Photoshopu

Pokud chcete vytvořit vlastní webovou stránku, pochopte, jak vytvořit web ve Photoshopu. Adobe Photoshop je grafický editor. Je možné kreslit výkresy a jejich jednotlivé prvky. To je poměrně dlouhý a komplikovaný proces. V průběhu let se webdesignéři učili navrhovat šablony a rozkládat na nich webové stránky. Ale jednoduché uspořádání může sbírat všechny osoby. Jsou zapotřebí pouze základní znalosti a fantazie Photoshopu.

Ve Photoshopu nakreslit jednoduchý design stránek i nováček

Od první chvíle je nepravděpodobné, že dostanete stránku jako designéři. Ale můžete čerpat atraktivní a nepříjemnou službu.

Málo o vytváření stránek

Dekódování některých termínů.

  • CSS (Cascading Style Sheets) a HTML (HyperText Markup Language) jsou počítačové jazyky používané k vytváření webových zdrojů. Pokud otevřete zdrojový kód libovolné stránky na Internetu, budou existovat značky HTML.
  • Rozvržení - rozvržení a instalace materiálů z rozvržení, přeměna na šablonu html. Záleží na tom, jak jsou objekty uspořádány, zda vypadají krásně v celkové kompozici, zda je vhodné číst text a podobně.
  • Vrstvy jsou součástí rozvržení. Společně tvoří velký obraz. Ale mohou být editovány a pohybovány odděleně od sebe.
  • Tělo je místem, kde se nachází obsah. Kolem ní může být pozadí.
  • Rám (Rám) - prvek stránky. Blok s informacemi, obrázkem, formou.

Make ohromující stránky od nuly může být pouze profesionální. K tomu musíte pochopit web design a znát HTML. Vzhledem k tomu, že hotový layout musí stále kompetentně ukládat.

Ale existuje více jednoduchých způsobů. Existují online služby a programy, které automaticky převádějí .psd (formát souboru Photoshop) na HTML a CSS. Stačí jen správně sestavit šablonu.

Chcete-li používat Photoshop není nutné být umělec a pochopit všechny možnosti programu. Ale pokud jste to poprvé spustili a nevíte, jak vložit text, nakreslit geometrický tvar, duplikovat vrstvu, změnit barvu nebo vybrat libovolnou oblast, měli byste začít s něčím jednodušším. Chcete-li vytvořit rozvržení ve Photoshopu, potřebujeme alespoň počáteční dovednosti v práci s nástrojem a pochopení základních funkcí (jak nakreslit čáru, dát průvodce, vybrat písmo a podobně).

Obecné informace o síťových službách jsou také užitečné. Stránky mohou být charakterizovány následujícími kritérii:

  • Jedna stránka. Všechny prvky, obsah, veškerý obsah zdroje jsou na jednom místě. Na jedné stránce. Chcete-li zobrazit obsah služby, neklikejte na odkazy nebo otevírejte nové karty. Současně může být místo samo o sobě libovolně velké. To se vejde do malé reklamní brožury, a obrovský 600-stránkový román.
  • Násobení. Proto obsahuje mnoho stránek. Mohou to být například „Domů“, „Fórum“, „Kniha návštěv“, „Odpovědi na často kladené otázky“, „Kontakty“. Pro každou z nich musíte udělat rozložení. Také potřebujete navigaci a mapu stránek: samostatnou sekci s odkazy na všechny části služby. Takže uživatel může rychle najít záložku, kterou potřebuje.
  • "Guma". Změní velikost v závislosti na rozlišení obrazovky. Roztáhnuté spolu s oknem prohlížeče. Musíme předem spočítat, jak budou stránky vypadat. Pokud se šířka 1300 zobrazí vše normálně, pak v 900 pixelech může část článku „jít“ za okraje rámečku, obrazy se nezastaví tak, jak by měly, a flash animace zavře vstupní formulář.
  • Opraveno Tělo webu nezmění velikost. Nejjednodušší a nejpraktičtější možností. Chcete-li, aby stránka vypadala pevně, a při rozšiřování okna na okrajích nebyl žádný „prázdný“ prostor, můžete vytvořit gumové pozadí.

Rozložení

Nejprve se rozhodněte, jaký design potřebujete. Nestačí prostě "představit si" a pak uspořádat ve Photoshopu. Musí to být jasný výhled. Nakreslete vzor na obyčejný papír. Není třeba překreslovat každý obrázek. Dostatečné schéma: několik obdélníků a kruhů, které běžně označují prvky webové stránky. Přemýšlejte o tom, jak budou umístěny snímky, kde je lepší dát logo, kam umístit informace pro návštěvníky.

Viz příklady stránek na Internetu. Myslíte si, které se vám líbí a proč. Ať už se jedná o pohodlné uspořádání rámů, příjemné barvy nebo zajímavý přístup k designu. Kopírovat design někoho jiného nestojí za to. Stačí z toho vyvodit inspiraci. Poté můžete zjistit, jak nakreslit web ve Photoshopu.

  • Vytvořit nový dokument (Soubor - Nový). Rozměry se volí výpočtem na malých monitorech nebo nízkém rozlišení: 1024 × 720 pixelů. Toto je šířka části "informace" a ne celý obraz. Pokud chcete stránku o velikosti 1100 pixelů, musíte vytvořit dokument o šířce 1300 pixelů. Délka, ve skutečnosti, není pevná - záleží na tom, kolik obsahu chcete umístit na zdroj. Toto jsou doporučení, nikoliv pravidla. Pokud chcete, můžete vytvořit velké rozložení.
  • Zapněte pravítko. Stiskněte klávesy Ctrl + R nebo přejděte do nabídky Zobrazit - Pravítka. Toto je měřicí stupnice. Objevuje se mimo obraz. Bez ní budete muset odhadnout velikost a vzdálenost „okem“, což nemá žádný vliv na konečný výsledek. Tuto funkci můžete konfigurovat v menu Úpravy - Nastavení - Jednotky měření a Pravítka. Je lepší změnit centimetry na pixel, aby bylo možné pracovat s jedním parametrem, a ne spočítat, kolik bodů na jeden palec.
  • Měli byste také aktivovat mřížku. Zobrazit - Zobrazit - Mřížka nebo Ctrl + E (můžete ji také vypnout). To je druh analogu notebooku v kleci. Ve Photoshopu se zobrazí vertikální a horizontální čáry. Na výkresu se neobjeví. Lze je vidět pouze při úpravách. Tato funkce je nutná pro rovnoměrné uspořádání prvků šablony. Někdo pohodlnější pracovat s mřížkou, někdo bez ní. Je nejlepší jej zapnout, pokud provádíte web poprvé
  • Chcete-li ji konfigurovat, přejděte na Upravit - Nastavení - Vodítka, Mřížka a Fragmenty. Zde si můžete vybrat velikost buněk, stejně jako barvu a typ čar (pevné, tečkované, z teček).

Příklad moderního designu stránek

  • Nainstalujte vodítka. Mezi nimi bude hlavní obsahový zdroj - pevné tělo webu. A za nimi - gumové pozadí. Chcete-li to provést, klepněte na tlačítko Zobrazit - Nový průvodce. V poli "Orientace" zaškrtněte "Vertikální". V poli "Pozice" zapište vzdálenost, při které bude objekt od levého okraje. Zaměřte se na stupnici pravítka.
  • Jsou potřeba dva vodítka - vpravo a vlevo od těla stránky. Vzdálenost mezi nimi by měla být maximálně 1003 pixelů pro displeje s rozlišením 1024 × 720. Můžete zadat jinou šířku. Velké zdroje jsou však nepohodlné sledovat na malých monitorech.
  • Proč 1003, ne 1024? Pokud web potřebuje posunout dolů ("svitek") dolů, prohlížeč bude mít svislý posuvník pro posouvání. Velikost tohoto posuvníku je přibližně 21 pixelů. Pokud to neberete v úvahu, objeví se vodorovný posuv. A návštěvník zdroje bude muset posunout stránku vlevo a vpravo, aby viděl všechny informace.
  • Tělo by mělo být ve středu plátna.

Jedná se o přípravné fáze práce. Jak vytvořit rozvržení ve Photoshopu závisí na vaší fantazii a chuti. Dále budou pouze obecná doporučení technického charakteru.

  • Za prvé, vaše rozvržení potřebuje pozadí. To může být děláno nezávisle nebo stažené ze sítě. Existuje mnoho zdrojů s volnými texturami. Nepokládejte na stránky obrázky, které podléhají autorskému právu. Neberte si světlé nebo kontrastní pozadí. Je lepší nepoužívat textury s velkým množstvím drobných detailů. Odvedou návštěvníka od těla stránky.
  • Pokud jednoduše otevřete výkres ve Photoshopu, bude na nové kartě a nebude přidán do rozvržení. Zvýrazněte celé pozadí. K tomu potřebujete klávesovou zkratku Ctrl + A nebo nástroj pro výběr (je umístěn v levém podokně). Zkopírujte ji a vložte do šablony.
  • Tato volba je k dispozici také v případě, že kliknete na tlačítko Upravit - Vložit.

  • Nová vrstva se zobrazí v seznamu vpravo dole. Kliknutím na něj pravým tlačítkem myši zobrazíte možné akce. V menu "Možnosti vrstvy" můžete změnit jeho název. V "Nastavení překrytí" jsou základní nastavení obrazu. Můžete to udělat záře, reliéf, lesk, tah, gradient. Pokud vyberete možnost, změny se okamžitě zobrazí ve Photoshopu. K dispozici je sada hotových stylů. Takže ze standardní struktury jsou vytvořena originální designová řešení. A nečerpejte nic navíc.
  • Tlačítko "Filtry" se nachází v panelu nabídek. Najdete zde různé imitace (pastel, akvarel, tužky), styling, textury, náčrty, zvýraznění, rozostření.
  • Můžete si vybrat prosté pozadí. Barva závisí na vašich osobních preferencích. Je však lepší, aby to nebylo černé nebo jedovaté. Vhodné ložní prádlo a měkké tóny nebo transparentní studená (například světle šedá, světle modrá).
  • Po texturách můžete sbírat stránky samotné. Zde máte svobodu vytvářet.
  • Chcete-li přidat nějaký tvar (řádek, čtverec, ovál), klepněte na odpovídající tlačítko vpravo. Bude mít vzhled a název objektu, který je aktuálně vybrán pro kreslení. Například „Ellipse Tool“, „Polygon Tool“. Ve Photoshopu je počet tvarů omezen. Lze je však nalézt na internetu, stáhnout a nainstalovat pomocí nabídky Edit - Set Management. V poli Typ určete, kterou kolekci objektů načítáte.
  • V různých verzích programu se tato čísla nazývají různými způsoby. Buď tlačítkem ve tvaru malého černého trojúhelníku (vpravo), nebo ikonou ozubeného kola, nebo položkou „Tvar tečky“ (pod lištou nabídek). Objekty lze kombinovat, seskupovat, skládat z nich.
  • Chcete-li vytvořit textový rámeček, klepněte na tlačítko ve tvaru velkého písmene "T". Pak vyberte místo, kde by měly být umístěny znaky, klikněte zde a zadejte, co potřebujete.
  • Každý prvek je lepší dát na samostatnou vrstvu. Takže bude pohodlnější pohybovat se a editovat, aniž by se „dotýkali“ celého webu. Chcete-li tento objekt přidat, přejděte na položku Vrstvy - Nový.

  • Chcete-li promítnout obraz do předem vybrané oblasti, nejprve jej vyberte a poté otevřete Upravit - Vložit jinak. K dispozici budou volby „Vložit místo“ a „Vložit mimo“.
  • Část jednoho obrázku můžete přenést do nové vrstvy. Chcete-li to provést, vyberte jej, klepněte na něj pravým tlačítkem myši a vyberte možnost "Vyjmout na novou vrstvu".
  • S tvary, titulky a obrázky jsou k dispozici stejné možnosti jako na pozadí: efekty, filtry a tak dále.
  • Ve Photoshopu stále existuje mnoho nástrojů pro kreslení: kartáče, pera, tužky.

Kvalitní zdroj můžete vytvořit i z jednoduchých geometrických objektů.

Existují zdroje s volným rozvržením. Načtěte je do Photoshopu a upravte podle potřeby. Je to jednodušší a rychlejší než kreslení od nuly.

Jak změnit rozvržení do souboru html?

Přišel jste na to, jak vytvořit web ve Photoshopu, a navrhl svůj první layout. Co dál? Koneckonců, to nemůže jen nahrát na hostování.

To může být dáno coder, který bude dělat vysoce kvalitní html-šablony. Ale je tu další možnost. Pomocí služeb převést soubor PSD do HTML a CSS.

  • Psd2Html Converter. Placená online služba. Rychle převést Photoshop formát na webovou stránku šablony. S tímto zdrojem, a to i z nekvalitního rozložení, můžete vytvořit slušné stránky.
  • HTML Panda.
  • PSDCenter
  • 40 Označení dolaru.

Konstruktory

Rozvržení lze také shromažďovat na speciálních místech. Obvykle existuje jasné a intuitivní rozhraní. Jednoduše sestavíte šablonu z různých částí. Některé prvky jsou nejlépe kresleny ve Photoshopu. Takže dostanete originální design. Navzdory tomu, že byl vytvořen na konstruktoru.

Ve Photoshopu nejen kreslení. Sbírá rozložení stránek. Ve většině případů to dělají mistři. Ale jednoduchá šablona může udělat jakoukoliv osobu. Je potřeba pouze základní znalost Photoshopu.