Jak Nakreslit šablonu Pro Web

Obsah:

Jak Nakreslit šablonu Pro Web
Jak Nakreslit šablonu Pro Web

Video: Jak Nakreslit šablonu Pro Web

Video: Jak Nakreslit šablonu Pro Web
Video: | KRESLENÍ #2 | - Jak nakreslit milou lišku pro začátečníky. 2024, Smět
Anonim

Na webu je obrovské množství šablon webových stránek, ale mají jednu nevýhodu - nejsou jedinečné. Pokud vlastník webu nechce, aby se design jeho webu opakoval jinde, může si objednat šablonu od profesionálního designéra nebo se pokusit ji vytvořit sám.

Jak nakreslit šablonu pro web
Jak nakreslit šablonu pro web

Je to nutné

program Adobe Photoshop

Instrukce

Krok 1

Vytvoření vlastní šablony není tak obtížný úkol, jak by se na první pohled mohlo zdát. K práci potřebujete Adobe Photoshop - samozřejmě musíte mít alespoň základní znalost práce s ním. Ale než spustíte program a začnete vytvářet, musíte si předem promyslet budoucí design. Nejpohodlnějším způsobem je nejprve se seznámit s nejméně stovkou hotových šablon, vyhodnotit jejich výhody a nevýhody. Věnujte pozornost úspěšným řešením určitých designových prvků. To neznamená, že je budete kopírovat, ale je celkem rozumné brát jako základ některá krásná a pohodlná řešení.

Krok 2

Na základě analýzy šablon jiných lidí a vaší vlastní kreativity byste měli získat představu o tom, jak bude váš web vypadat. Nejlepší je udělat hrubé náčrtky budoucího designu s barevnými tužkami na obyčejných listech A4. S Photoshopem byste měli začít pracovat až poté, co budete mít jasnou představu o tom, co přesně budete kreslit.

Krok 3

Spusťte Photoshop, vytvořte nový projekt 1200x1600, nastavte průhledné pozadí. Zapněte nástroj Pravítko, pokud ještě není zapnutý, stiskněte kombinaci kláves Ctrl + R. Povolit přichytávání: Zobrazit - Přichytávání.

Krok 4

Nyní musíme rozdělit šablonu s vodítky, která budou zobrazovat hranice jejích prvků - strany, sloupy atd. Chcete například rozdělit šablonu tak, aby vlevo byl úzký sloupec, napravo od šablony široký sloupec vpravo a v horní části místo pro záhlaví. To znamená, že potřebujete tři svislé čáry (levý okraj šablony, pravý a čára mezi nimi) a vodorovnou čáru se spodním okrajem záhlaví. Chcete-li nastavit svislou čáru, posuňte kurzor na levé pravítko na levé straně, stiskněte V a podržte klávesu a přetáhněte čáru na požadované místo. Totéž proveďte s dalšími dvěma svislými čarami. Horizontální jsou postaveny stejným způsobem, používá se pouze horní pravítko.

Krok 5

Najděte pozadí šablony, měl by to být malý opakující se vzor. Otevřete jej ve Photoshopu, vyberte, zkopírujte. Poté vložte do šablony tolikrát, kolikrát je třeba ji vyplnit pozadím. Vložit se provádí takto: „Upravit“- „Vložit“a poté přetáhnout oblast pozadí na požadované místo. Je ještě rychlejší vložit obrázek pomocí příkazu Ctrl + V. Přidejte pozadí záhlaví webu stejným způsobem. K vytvoření pozadí můžete použít různé přechodové výplně.

Krok 6

Pomocí nástroje Tužka nakreslete hranice šablony se zaměřením na již nakreslené čáry (tj. Na jejich horní část). Dostali jste základ nejjednodušší šablony, nyní ji musíte doplnit o potřebné podrobnosti - navigační tlačítka, řádky nabídek, různé prvky zdobení atd. Další informace o tom, jak vytvářet tlačítka a další prvky, najdete v příslušných článcích o práci s aplikací Adobe Photoshop.

Krok 7

Šablona je vytvořena, nyní ji musíte rozřezat na kousky a vložit je na stránku html. K řezání použijte nástroj Slice. Chcete-li jej najít, klepněte pravým tlačítkem na nástroj Rám a v nabídce, která se otevře, zvolte Výřez. Nyní můžete šablonu podle potřeby vnořit a uložit: „Soubor“- „Uložit pro web“. V okně, které se otevře, vyberte typ souboru: HTML a obrázky, zadejte název souboru: index.htm a uložte jej. Budete mít soubor index.htm a složku obrázků s nakrájenými obrázky.

Doporučuje: