Tvorba layoutu webových stránek
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Tvorba layoutu webových stránekTvorba layoutu webových stránek

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

Tvorba layoutu webových stránek

Google       Google       17. 11. 2007       49 342×

V tomto tutoriálu si ukážeme, jak ve Photoshopu vytvořit jednoduché, ale i přesto dobře vypadající webové stránky. Pomocí 11 jednoduchých kroků vás postupně provedu procesem tvorby velmi jednoduché stránky, která může být ve výsledku použita třeba pro osobní prezentaci.

Reklama
Reklama

Tento tutoriál je určen především pro vás, kteří začínáte tvořit design webových stránek ve Photoshopu.

Tak se do toho můžeme dát. Po dokončení tutoriálu bychom měli mít podobný výsledek jako na obrázku níže. Jistá podobnost s designem Programujte.com je zcela náhodná ;-).

Krok 1

Vytvoříme si nový dokument o rozměrech 800×600.

Krok 2

Vytvoříme novou vrstvu. Pomocí obdélníkového výběru vybereme obdélník uprostřed a plechovkou (Paint Bucket Tool) ho vyplníme bílou barvou (#ffffff). Zrušíme výběr (nástrojem obdélníkového výběru klikneme někam do volného prostoru v dokumentu).

Krok3

Použijeme styl Vnější záře (v menu Vrstva\Styl vrstvy\Vnější záře) a nastavíme parametry podle obrázku.

Krok 4

Zkopírujeme vrstvy (Ctrl + J) a přepneme se do módu pro samotnou editaci objektu (Ctrl + T). V něm klikneme na obdélník pravým tlačítkem myši a v menu na funkci Otočit. Potom obdélník natočíme podle naší představy.

Klikneme na nástroj výběru a potvrdíme editaci volbou Použít.

Vrstvu znovu zkopírujeme a provedeme stejnou editaci jako na začátku kroku, akorát ho otočíme na druhou stranu.

Krok 5

Vrstvu1 posuneme úplně nahoru, aby byla vidět jako první.

Pomocí nástroje Plechovka obarvíme první obdélník oranžovou barvou (#e3893f).

Krok 6

Pro navrácení barev do základního tvaru (černá a bílá) stiskneme klávesu „D“, následně použijeme klávesu „X“, aby se nám prohodilo pořadí barev a jako základní barvu jsme mohli použít bílou. Potom klikněte na poslední vrstvu Pozadí.

Vybereme nástroj obdélníku a „natáhneme“ obdélník dole, jako menu.

Krok 7

Použijeme funkci Vržený stín (v menu Vrstva\Styl vrstvy\Vržený stín) a parametry nastavíme stejně jako na obrázku níže.

Krok 8

Vybereme nástroj Textu a vložíme si do stránky nějaký text. Nejlépe asi bílé barvy.

Krok 9

A nyní se vrhneme na tvorbu textu v záhlaví stránky. Pomocí textového nástroje si vytvoříme velký název naší stránky ve stejné barvě jako hlavní oranžová stránka (#e3893f). Pořadí celé textové vrstvy zvolíme tak, aby alespoň jeden bílý obdélník zakrýval část textu.

Krok 10

Pokud máme vybranou textovou vrstvu, provedeme Vytažení (v menu Vrstva\Styl Vrstvy\Vytažení) a aplikujeme styl Vnější záře s parametry, jaké vidíme na obrázcích.

Krok 11

Dole, kde je umístěn obdélník pro menu, vytvoříme textové pole s jednotlivými nabídkami a barvu menu nastavíme na šedivou (#5d5c5c).

A základ stránek máme vytvořen. Teď už můžeme zkoušet různé úpravy designu.

Kdybyste měli nějaký problém nebo jakoukoliv otázku, směřujte ji, prosím, do komentářů pod článkem. Budu se snažit na veškeré dotazy poctivě odpovědět.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
Autor tvoří grafiku ve Photoshopu a Illustratoru. Vyvíjí iOS/mac aplikace v Objective-C a webové aplikace v php a ruby.

Nové články

Obrázek ke článku Rádi sledujete obsah streamovacích služeb? Dejte si pozor na pirátské verze Mandaloriana a Netflixu

Rádi sledujete obsah streamovacích služeb? Dejte si pozor na pirátské verze Mandaloriana a Netflixu

Streamovací služby a jejich obsah se v uplynulých měsících těšily velkému zájmu uživatelů, kteří se při pobytu v karanténě chtěli zabavit sledováním filmů a seriálů. Toho bleskově zneužili hackeři, kteří pod názvy oblíbených streamovacích platforem a jejich obsahu maskovali škodlivé soubory. Nejčastěji používali jako návnadu Netflix a seriál The Mandalorian. 

Reklama
Reklama
Obrázek ke článku Bionické ruce mění lidem životy. Konference INSPO ukázala nejnovější technologie

Bionické ruce mění lidem životy. Konference INSPO ukázala nejnovější technologie

Bionické myoprotézy rukou jsou ukázkou pokroku, který udělaly za posledních dvacet let technologie pro lidi se zdravotním postižením. Dnešní protézy, které fungují na principu snímání svalových vzorců, umožňují uživatelům operovat s křehkými předměty či provádět úkony složité na kooperaci různých částí těla – ať už jde o hru na hudební nástroje, zavazování tkaniček, nebo třeba pití ze skleničky. Na 20. ročníku konference INSPO se budou zájemci moci naživo seznámit nejen s takzvanou myorukou, ale rovněž s jedním z jejích uživatelů. 

Obrázek ke článku Využití .htaccess na malém webu

Využití .htaccess na malém webu

V dnešní době existuje spoustu cms, které mnohdy ale vůbec nepotřebujeme a stačila by nám pouze základní funkčnost k úpravě url, přesměrování. K tomuto účelu je ideální .htaccess soubor, který nám se všemi těmato úpravami umí pomoct.

Obrázek ke článku Češi tlačí obce do otevřené komunikace – Mobilní Rozhlas si loni pořídilo dalších 171 měst a obcí

Češi tlačí obce do otevřené komunikace – Mobilní Rozhlas si loni pořídilo dalších 171 měst a obcí

Obyvatelé Česka se mnohem více zapojují do veřejného dění. Umožňují jim to přímo samosprávy, které stále častěji využívají nástroje takzvané chytré komunikace a participace. Dokládají to data za rok 2019 ekosystému Mobilní Rozhlas, lídra v oblasti chytré obecní komunikace. Zapojilo se do něj 171 nových měst a obcí, zaregistrovalo celkem 100 tisíc občanů a místní samosprávy jeho prostřednictvím rozeslaly třikrát více adresných zpráv než v roce 2018

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý