Jste tu poprvé? - Skrýt (musíte být přihlášeni)

Tvoříme šablonu blogu pro wordpress 2.

  • napsallefiath
  • sekcePhotoshop
  • kategorieWebdesign
  • verze programuCS3
  • znalostiAutor předpokládá, že máte pročteny minimálně základy v Photoshopu.

2. 6. 2009 v 0:00 0 Tvoříme šablonu blogu pro wordpress 2.

V tomto díle dokončíme grafický návrh a příště se pustíme do kódování.

Připomeneme si, kde jsme minule skončili, a jak náš finální produkt má vypadat. Sem jsme se minule dostali:

Kde jsme minule skončili
A kde skončíme

A toto nám zbývá. Jak vidíte, není toho málo, převážně obsah, protože hlavičku a menu již máme prakticky hotové. Jako první zvelebíme hlavní článek a součást archívu, protože to je to, proč lidé na náš blog chodí a co je zajímá. První co uděláme je náhrada původních hranatých kusů pěkně zakulacenými částmi. Zaoblení v sobě nese určitou hravost, nevážnost a pro šablony, cílené na mladší věkovou skupinu, je přímo ideální. Vybereme zaoblený obdélník s poloměrem 20 bodů

Kde jsme minule skončili

Protože to není ono, a je to trochu jednotvárné, tak tento tvar pomocí stylů vylepšíme (a následný kodér nás bude proklínat, případně si budeme říkat, co jsme to udělali za blbost, pokud kódujeme sami). Přidejte vnitřní stín s barvou 60c8e6, krytím 15% a velikostí 35 bodů. Vzdálenost a vyseknutí ponechte na nule. Poté to doplníte 3px vytažením bílou barvou dovnitř. Tuto techniku jemného stínování jsme obměněně použili již předtím, osobně ji mám velmi rád, protože jednoduchou barvu krásně vylepší a přitom nijak agresivně.Podobná vylepšení může být poměrně obtížné nakódovat, protože tyto věci často zasahují do textu a je těžké do sebe vše správně složit, jelkož html se chová trochu jinak, než vrstvy v Photoshopu.

Stínování
Výsledek stínování

Je třeba správně posunout a rozmístit obsahový text, jelikož to jsme předtím zanedbali. Vezmeme tyto opovrhované chudinky a nadpis posuneme ve stylu odsazení 40 pixelů nahoru a ze strany.

Obsazení nadpisu

K nadpisu vložíme černou řádku pro oddělení od obsahu, 3 pixely vysokou a 10 pixelů pod nadpis. Do budoucna jsem však počítal s tím, že naproti nadpisu budou rovnou informace o autorovi a datum, takže tomu přizpůsobíme i oddělovací řádek. Vezmeme barvu c5d0d4 a vyplníme menší část vpravo v místě, kde plánujeme přidat text.

Podkladový řádek

Tím bychom mohli posunout autora a datum – následují příkladu rozumného nadpisu, který pochopil, že nahoře se mu povede lépe. Jako písmo jsem zvolil Georgii (patkové), jako kontrast k bezpatkovému Arialu, kterým je tvořen nadpis. Kdo neví, co je patkové/bezpatkové písmo, nechť prozkoumá naší tutopedii. Písmu dáme barvu 8f9ba0, kromě jména autora, tomu 52646b a styl italický (zešikmené).

Přidání textu

Posuneme také text, a přidáme mu proklad (výška řádku) 18 pixelů. Je ideální jej dát o něco větší než je automatika (na velikost 12 bodů asi 15 bodů proložení), protože písmo na sebe není tak natěsnané. Nesmíte to ale přehnat, aby mezi řádky nebyly rovnou mezery jako řádka samotná – což je druhý extrém oproti přílišnému natěsnání. Řiďte se tím, že písmo má mít určitou volnost, a používejte o trochu větší rozměry.

Přidání textu

Nyní nám zbývá odkaz „pokračuj na článek“, komentáře, kategorie a případně ještě nějaký doplněk. Původně jsem si vlevo představoval „číst celý článek“, nicméně poté jsem dospěl k názoru, že lepší bude, když bude vše podstatné vpravo. Zda je to úplně správně nebo ne ponechám na vás, může to kontrastovat vůči nadpisu, které je umístěn zleva. Zase panel je ale vpravo, menu je ovšem vlevo. Tak bychom se mohli přít nějakou dobu, takže to necháme tak, že mi to přišlo vhodnější. Říkejme tomu instinkt. Odsadíme text doprava, zmenšíme velikost na 13 pixelů a změníme barvy – text dáme bílou a oranžovou nasadíme na pozadí. Použijeme zaoblený obdélník se stejným přechodem jako v menu (viz minulý článek). To samé uděláme s komentáři, tam ovšem postačí zvýraznění čísla – přechod barev od 00b4ff k 3fbde1 – světle modré, zářivé. Písmo je vhodnější poté ztmavit, aby bylo lépe čitelné.

Spodní část článku

Kategorii jsem přestěhoval doleva, protože vpravo by to už zabíralo příliš místa. A přišlo mi vhodné doplnit štítky, což je taková poměrně užitečná věc (ale ne nezbytná). Dbejte na to, že když umisťujete text, měl by být vodorovně na stejné úrovni jako text na druhé straně objektu, tedy vstupní text „Číst celý článek“. Nyní už bychom mohli být spokojeni, ale ještě můžeme přidat pár doplňků – jako například oranžový oblouček podobného stylu jako velikost písma, jenom ho uděláte vodorovně (viz postup v minulém článku). Zvýrazněný modrý prvek uděláme několika transformacemi obloučků, pojďme se podívat zblízka.

Doplňování textu

Začneme zaobleným obdélníkem s poloměrem 10 bodů a výškou 40 (na šířku minimálně 20, aby se oblouky plnně vytáhly). Poté chytíme jeden z růžků (levý horní) a transformujeme jej vpravo podle obrázku níže. Totéž uděláme i s dolním (dejte pozor, abyste se přesně trefili, ať tam nemáte nepřesnosti – málokdo to pozná, ale správný designér by měl být pedant na pixel :) ) a takto jednoduše si vytvoříme objekt, který by se jinak tvořil poměrně těžko, aby byl přesný. Toto posouvání můžete použít v mnoha různých případech a ušetřit si tím práci.

Změna tvaru
Možnosti úprav

Vytvoření podoby dalších článků nebude problém, vnitřní odsazení dáte opět 40 pixelů, nadpisy necháte stejné, pouze dáte menší velikost, u prvního článku se to dá pochopit, ale u více nadpisů, navíc poměrně blízko sebe, je to příliš. Taková ideální velikost by mohla být 18 pixelů. Jinak nic měnit nebudeme, a dáme rozestupy mezi jednotlivými nadpisy 50 pixelů (můžete si všimnout mé chybky, kdy jsem si nedal pozor na to, že doplňkové informace jako autor jsou vlastně výš než samotný nadpis a přesto odsazuji podle nadpisu). Dolů patří odkaz na další články, barvou f97204 a vhodně odsazený tak, aby byl vidět odstup, ale nebylo to příliš daleko. Celý blok s články umístíme 10 pixelů pod první článek, aby bylo vidět, že tyto dvě věci spolu souvisejí (ono to bude vidět i tak, nicméně si vymýšlím důvod, proč porušit pravidlo stejných odsazení 40 pixelů).

Vytváření archívu

Každý správný blog ale nezůstane jen u monologu a vyléváním autorova srdíčka – k blogu neodmyslitelně patří komentáře, a kdo tvrdí že ne, je srab. To vám potvrdí každý, kdo má koule na to, se podstavit davu a hrdinně se poprat s protivníky (účastnit se diskuze), ze které stejně všichni vyjdou redardovaní (a komentáře poté zakážeme). Komentáře bychom mohli natlačit do pravého sloupce, my jim však dáme více prostoru, asi jako starším článkům. Začneme nadpisem, kterému dáme zářivou a veselou modrou 00b4ff a velikost 18 pixelů jako v předchozím případě. Teď si budeme hrát s barvami a kontrastem mezi textem. U komentářů nepochybně budete chtít vidět k jakému článku člověk komentář napsal, poté vás může zajímat přezdívka/jméno komentátora a jako doplněk datum. Jelikož samotný komentář může být poměrně dlouhý, nebudeme ho uvádět (mohli bychom vložit úryvek, a stejně tak vás nic neomezuje abyste si navrhli komentáře s celým textem, jak chcete). Zároveň si k tomu rovnou přidáme spodní rámeček, stejné barvy jako u článků pod autorem, protože nepůjde o jeden velký nápis černou barvou a také velikosti mezi rámečky budou menší, proto zvolíme méně kontrastní barvu.

Komentáře

Takže teď přijde takové kouzlení s barvami. Poměrně důležité je jméno přispěvatele, které ponecháme černou a ještě vytáhneme (tučné). „K článku“ bude mít kontrast mnohem nižší, barva 8f9ba0. Samotný název článku bude větší, 13 pixelů a s barvou 1d84aa – špinavější modrá, a datum 52646b – šedomodrá. Celému panelu dáme normální odstup 40 pixelů, nepatří k článkům, takže odstup bude normální.

Komentáře jsou hotové

Nyní se budeme věnovat pravému sloupci. Stejně jako předtím vložíme na pozadí zaoblený obdélník (zde použijeme jenom jeden, nebudeme položky oddělovat) a upravéme jej. Posuneme si nadpisy (40 pixelů jako obvykle), kterým přidáme barvu 00b4ff – použitou u komentářů a necháme jako základní velikost 18 pixelů. Stejnou barvou jsem přidal malý oddělovač u vnitřních položek.

Vylepšování pravého sloupce
Oddělovač

Aby nebylo vše stejné, Kategorii a Archív oddělíme tím, že text dáme bílou a modrou použijeme na pozadí. Poloměr zaoblení bude 10 pixelů a stejnou techniku na obloučky jako minule. V otázce odsazení jsem zůstal u toho, že odsazení odměřuji od textu a ne pozadí. Možná vám bude případat lepší odsazení podle pozadí, to nechávám na vás.

Podklad nadpisů

Dokončíme dodatečné služby pro návštěvníky. Co poslouchám může být pěkná funkce, zvlášť v propojení s last.fm – použijeme obrázkový způsob a samotný název bude vidět, když člověk posune myš na obrázek, jelikož samotná kombinace obrázku a textu by asi byla dost neskladná. To je jednoduchá věc, u které nepotřebuje snad nikdo návod, takže se zaměříme na tvorbu ikonek, kterou by alespoň zhruba měl zvládat každý webdesignér. V našem případě však půjde o opravdu jednoduché příklady. Twitter ikonku navrhneme perem, a pokud se na kreslení z hlavy necítíte, můžete si na internetu najít základní ikonku twitteru a kreslit podle ní (preferuji vlastní ikonky, pokud na to je čas).

Kresba ikonky

K základu přidáme pár doplňků jako je překrytí několika přechody (z toho důvodu základ necháme jednobarevný a neupravujeme, a přechody jej překryjeme a přiřadíme je pomocí ořezové masky. Postačí nám jeden velký přechod přes celého ptáčka a jeden menší na horní křídlo (to abychom je odlišili).

Tvorba ikonky twitteru
Výsledná podoba ikonky

A nyní tvorba klasické RSS ikonky. Tento znak je natolik zažitý, že si s ním vystačíme a nemusíme vytvářet nějaké věci jako RSS zvířátka a další zbytečnosti. Vybereme si Nástroj jiný tvar a asi nám neuškodí, když si nahrajeme všechny tvary. A zajímá nás malý terčík, který ze strany ustřihneme. Jako barvu zvolíme f35f02.

Výběr základu pro RSS znak

Po vložení zmenšíme středový bod přibližně na úroveň velikosti dalších pruhů a přidáme mu masku – nejprve zabereme pravou horní čtvrtinu spolu se středovým bodem (dejte pozor, abyste ho neseřízli) a poté použijeme transformaci přes perspektivu a ještě tento výběr trochu zúžíme (můžete vidět, že ta ikonka je ve výsledku trochu vykrojená ze stran, nechtěl jsem ji dokonale rovnou).

Dokončení ikonky RSS

Poslední ikonka bude nejsnažší, opět vybereme předpřipravený vzor pro obálku, v normálním poměru stran je trochu rozpláclá, takže nemusíme při roztahování držet SHIFT, určíme si to jak chceme. Přiřadíme jí nějaký šedý přechod, aby byla barevně jiná než předchozí ikonky a protože by takto byla trochu zbytečně hrubá, překryjeme ji ještě zaobleným obdélníkem. Já si dal poloměr 10 bodů, možná by stačilo méně, nicméně máme v celém designu obloučky, takže nebudeme troškařit. Překrývajícímu obdélníku dáme nastavení „Průsečík oblastí tvarů“ a máme hotovo.

Výběr ikonky e-mailu
Dokončení ikonky e-mailu

Teď máme obsah téměř hotový a ještě se pustíme do patičky. Zde už nebudu nic moc probírat krok po kroku, protože vám a vašim schopnostem důvěřuji, takže ji jenom rychle proběhneme. Rozmístění textu je otázkou chvíle, jako font jsem použil Verdanu (pro patičky ji rád používám, přestože v celém návrhu je Arial). Odkaz pro rychlý přesun nahoru má velikost 18 pixelů, tučné a barvu 1d84aa. Napravo budou nějaké informace, které si vyplní provozovatel blogu, a vlevo jsou nějaké nezbytnosti, na které máme jako autoři právo a pokud si je někdo, kdo bude v budoucnu šablonu využívat, smaže, je to hnusný odporník. Když už, tak texty vlevo mají snížený kontrast, takže nejsou tolik vidět.

Tvorba patičky

Na pozadí vložíme obdélník s bílým přechodem (z plného krytí do plné průhlednosti), podobně jako v hlavičce, jenom obráceně, a nad text Nahoru vložíme oddělovací pruh, s malým obloučkem, který dobře znáte.

Přechod v patičce

Jako třešinku na dortu přidáme doplňky a vylepšíme hlavičku. Použijeme techniku polotónu, díky které pomocí Alfa kanálů vytvoříme vkusné doplňky. Nejprve si ukážeme jak na to a poté vám dám pár příkladů, jak tuto techniku uplatnit v praxi. Hodně záleží na tom, jaký typ polotónu chcete používat, pokud přes masku, můžete používat složitější tvary, a to bude můj případ, takže pro tento případ si opatříme Vlnkové štětce, abychom nemuseli nějak složitě vytvářet podklady. Vytvoříme si nový dokument 600×600, na kterém budeme testovat polotóny, a uděláme tah jedním ze štětců (do nové vrstvy, aby neměl pozadí).

Tvorba polotónového doplňku

Štětec vybereme a v menu z pravého tlačítka zvolíme Vytvořit pracovní cestu.

Vytvoření alfa kanálu

Přejdeme do panelu kanály a vybereme nově vytvořený alfa kanál. Nyní můžeme aplikovat polotónový filtr.

Aplikace polotónu
Aplikace polotónu

Uděláme výběr alfa kanálu a přesuneme se zpět do vrstev. Zde vybereme původní vrstvu a aplikujeme na ni masku.

Výsledný polotón

Je více způsobů a dosahuje se jimi i jiných výsledků (pokud polotónový filtr necháte působit rovnou na vrstvu a ne na vytvořený kanál), ale ty zde nebudeme potřebovat. Masky z alfa kanálů můžete i invertovat a dosahovat jiných výsledků, níže je pro ukázku pár nahodilých efektů (a jeden z nich je použit v hlavičce blogu).

Různé druhy

Předvedeme si jednoduchou aplikaci a vložení do designu. Vyberte pozadí prvního článku, vytvořte z výběru alfa kanál jako na příkladu výše, na něj aplikujte polotónový filtr, udělejte výběr alfa kanálu a ten vložte do nové vrstvy (bílou barvou). Pro efekt, abyste dobře viděli, jsem jej vybarvil červenou.

Tvorba polotónu v designu

Poté ugumujeme vrstvu po stranách a necháme pouze vršek (vykrojením obdélníkového tvaru, použijte jako masku – poté jej můžete posunout jako já), a máme tento výsledek.

Oříznutí polotónu
Polotón v designu

Tím máme téměř hotovo, zbývá přidat nějaký zajímavý prvek do hlavičky. U polotónu jsme ještě všechnu minici nevystříleli, použijeme jej znovu a zároveň zkusíme vylepšit písmo.

Příprava hlavičky

Písmo vybarvíme 00b4ff a dáme krytí 80% – k tomu rovnou do hlavičky zapojíme jeden z vytvořených polotónových štětců. Ten štětec ovšem poutá zbytečně mnoho pozornosti, takže si pomůžeme tím, že ho přesuneme pod vrstvu přechodu. Jak si jistě pamatujete, do hlavičky jsme vložili bílý přechod, který nám takto vrstvu překryje a zmírní.

Změna pozadí

Nyní několikrát zduplikujeme text a každé písmeno trochu posuneme přes nabídku znaky (exotický název posun účaří) – takže písmena různě posuneme nahoru a dolů, jako na obrázku níže, kde jsem původní písmo zneviditelnil.

Posun písma

Pak písmu přiřadíme vytažení se stejným přechodem jako v menu, a krytí obsahu 0. To ještě jednou se sníženým krytím zduplikujeme a trochu posuneme od původního písma.

Další vrstvy písma
Písmo je hotovo

Jako finální doplněk, další jednoduchou cestou, uděláme masku původního písma, vybereme některé části a ty trochu ugumujeme, takže dostaneme takto opotřebený vzhled. Ten doplníme několika tahy štětci (postačí nějaké základní kruhové, které trochu rozmažete) a máme hotovo.

Dokončení hlavičky

A jsme hotovi. Vytvořili jsme si sice jen návrh hlavní stránky a do fungující šablony je ještě třeba navrhnout podobu celého článku spolu s připojenými komentáři (na hlavní straně jsme si udělali pouze výpis) a archív článků (zde by se dal použít ten, který jsme si vytvořili, takže ušetříme čas), nicméně to už nechám na vaší tvořivosti. Já se teď uklidím do ústraní a další tvorbou vás bude provázet Jaa©, který se zaměří na kódování k funkční šabloně a já možná občas zasáhnu.

Hotový výsledek

Petr Široký Profil na fóru / Osobní stránky / Twitter Webdesignér povoláním, kritik přesvědčením, šašek duší, to vše zde najdete. Tutoriarts jsou poslední 3 roky můj největší osobní projekt. Kromě toho se zkouším věnovat jiným menším webovým projektům, živím se jako nezávislý webový designér a snažím se více hledět do budoucnosti, aby tyto stránky vzkvétaly.

Zdrojový soubor : Není k dispozici

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi