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

Tvoříme šablonu blogu pro wordpress 1.

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

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

Wordpress je kvalitní všestranný redakční systém, pro který existuje velká hromada šablon. Máloco ovšem nahradí jedinečnost, a pokud jste rozhodnuti vytvořit si vlastní elegantní skin, tento článek je přesně pro vás.

Nejste spokojení s šablonami, které se vám nabízí, nebo je nechcete hledat s tím, že stejně nenajdete to, co máte v hlavě? Pak čtěte dál.

Přestože wordpress poskytuje možnost vytvořit na něm prakticky cokoliv (od portálu po fotogalerii), nejjednodušší je v něm vytvořit blog. Což jistě ti z vás, co wordpress znají, ví. Takže se zaměříme na tvorbu funkční šablony pro blog. Jelikož píšu funkční, tak bude do tohoto miniseriálu zahrnuto i kódování, se kterým bude asistovat Jaa©. Výsledkem tedy bude normální šablona, kterou bude možné bez problémů použít. Protože již máme funkční seriál o kódování, určitě si jej pročtěte, pokud si design chcete i nakódovat a nevíte jak na to.

Prohlédněte si konečný výsledek.

Základní rozvržení

Úplným základem bude rozvržení velikosti. Jak velký bude náš dokument je vcelku jedno, ovšem u velikosti grafiky si určete šířku 960. 1024×768 je stále poměrně využívané rozlišení, takže mějme ohledy. Vzhledem k tomu, že velikost dokumentu se nám může v průběhu tvorby měnit, doporučuji udělat jednu vrstvu jako pozadí namísto původního pozadí. S tím totiž nemůžete dělat nic, protože je zamčené, a když zvětšujete dokument, přebírá barvu pozadí. Mám lepší řešení, vytvořte Novou vrstvu výplně → Plná barva. Tím si zaručíte, že pozadí bude mít vždy stejnou barvu a navíc na něj můžete aplikovat i styly, narozdíl od původní zamčené vrstvy pozadí.

Základní dokument

Pro začátek se hodí nějaké úderné jméno.

Základní dokument

Tak tedy ne, úchylné jméno. Nyní si rozvrhneme, co bychom kde mohli mít. Blog určitě musí mít kromě zobrazovaných článků i archív a kategorie. Vyhledávání je také vhodné, vždy je lepší mít než nemít, ne každý je zkušený a umí používat google k tomu, aby vyhledával na vaší stránce (obsah přibývá, a najednou se vyhledávání hodí). Dále by se mohly hodit odkazy na twitter, rss, odebírání e-mailem a podobné věci. Stejně tak jako poslední komentáře vašich čtenářů a jako bonus přidáme seznam písniček, které posloucháte na last.fmJe zajímavé, že většina blogů má menu napravo, zatímco při tvorbě „seriózních“ webových prezentací se tomu povětšinou nejen zavatel, ale často i grafik vyhýbá jako čert kříži. Mě přijde vkusnější mít navigaci vpravo, a dost pochybuji, že by to někomu dělalo problémy, protože by asi musel být opravdu hloupý, když by nepochopil, že menu se přesunulo z leva doprava. Nu, některé zažité věci je občas těžké odstranit.

Základní rozvržení

Už se nám mihla jedna barva, takže dalším krokem je zvolit vhodné odstíny, které využijeme.

Základní dokument

Odstíny oranžové (#fe8407 a #f56401) se použijí pro menu a výrazné prvky, u kterých nechceme, aby je někdo přehlédl. Decentní modrou (#d8ebf2) využijeme na pozadí a tmavě modrou (#1d84aa) k nadpisům a podobným věcem (a pravděpodobně využijeme ještě další ostíny modré).

Na začátek je nejdůležitější si určit rozestupy jednotlivých prvků. Co opravdu nemám rád je, když někde uvidím design, jehož autor se nenamáhal s tím, aby udělal u prvků stejně velký prostor, jednou je tam 10 pixelů, jednou třeba 30. Protože máme jednotlivé prvky vybrané, víme co kde má být, můžeme se bez obav pustit do zarovnávání. Zároveň budeme přidávat seriózní detaily obsahu, protože předchozí rozmístění prvků byla skica i po obsahové stránce, u článku například chybí autor, datum, komentáře a další věci mimo něj. Začneme odměřováním velikostí, já si určil jako počátek 20 pixelů.

Vyměřování

Teď si odměříme 10 pixelů a posuneme tak všechny prvky pod každým nadpisem. Tohle je můj oblíbený krok, jak přidat na odlišení. Ono posunutí, v rámci mezí, působí zajímavěji a … to je vlastně vše. 10 pixelů těžko udělá velkou změnu, podle mě to vypadá lépe, když se obsah posune, a pokud si to nemyslíte, ponechte vše pěkně vyrovnané.10 pi­xelů je ideální, protože to není moc, jelikož pravý sloupec má na šířku 240 pixelů, z toho mu 20 ukousneme prvním odsazením, a musíme myslet na nějaký prostor pro jednotlivé položky.

Zarovnání prvků

Například kontakt je jedna z věcí, kterou na blogu obvykle postrádám. Teď se podívám, co by se dalo změnit u ukázkového článku. Původně jsem chtěl vytvořit návrh, kde bude článek zobrazen se vším všudy, ovšem pak jsem se rozhodl, že udělám hlavní stránku. Většina textu z článku půjde pryč a zůstane jenom perex. Co chybí je autor, datum, sekce, počet komentářů, případně štítky.

Skica se mění

Detailní provedení textů si necháme na později, ovšem v návrhu kombinuji povětšinou Arial (bezpatkové), Georgii (patkové, na menší texty) a doplňuji příležitostně Trebutchetem (menu). Dále vidíte, že nám přibylo pár odstínů modré, článek dostal určitou formu a rozhodl jsem se, že perex bude pouze u nejnovějšího článku. Ušetří se tím místo a přeci jen, perex můžete vynechat.Zpočátku jsem počítal s 20 pixely jako odstupem, nakonec jsem se rozhodl pro 40, jak již můžete vidět mezi hlavním a pravým sloupcem.

Jak jsme sladili prvky horizontálně, bylo by vhodné udělat to samé i vertikálně. Pozatím jsem se tomu nevěnoval a odsazení mezi různými texty nebo v pravém sloupci je vždy různé. Nyní se trochu odkloníme od tématu a povíme si ještě něco k barvám.

Velmi důležité je přemýšlet o návrhu, a mít alespoň přibližnou představu o tom, co chcete tvořit. Pokud si jen tak čmáráte, dopadne to nejspíš špatně. Snažím se vás nasměrovat k tomu, abyste při tvorbě přemýšleli, abyste se zamysleli nad tím, proč dělám zrovna tohle, když jiné věci chybí, atd. Můj postup je totiž ve skutečnosti poměrně vytržený od reality, kdy si většinu věcí navrhnu v hlavě, zejména to nejdůležitější, barevné provedení. Možná je to jenom můj problém, že tvořím trochu chaoticky a prakticky nikdy to neprobíhá tak pěkně postupně, jako zde vypisuji. Tu upravím něco, tam pozměním tohle. To, co jsem ještě nerealizoval je skutečnost, že pozadí bude světle modrou (a bude tam nějaký vzorek), podklad článků bílý, hovery, aktuální položka menu a další vhodné věci budou oranžovou, nadpisy jsou modře, a do toho budu používat polotónový vzorek. Myslím že bude vhodné začít pozadím, protože bez něj by mě během postupu design neustále zkresloval dojem, který má budit. Pokud jste dodrželi moji radu o jedné barvě na pozadí, je změna otázkou vteřiny.

Výběr barvy pozadí

Zvolil jsem o něco tmavší barvu než onu světle modrou, jelikož na ni budu aplikovat částečně průhledný vzorek, který už onu světle modrou mít bude. Možná to v budoucnu ještě trochu pozměním, ale zatím bude stačit takto. Pokračujeme tím, že nástrojem Elipsa (U) udělám kruh s průměrem tak 75–100 pixelů, aby to za něco stálo.

Kroužek

Teď si trochu pohrajeme se styly. Snížíme krytí výplně na 70–80% a nastavíme efektům krytí Maskou, vržený stín na 1 pixel, s maximálním rozsahem a krytím 15%, a nakonec vytažení, které nastavíme na vnitřní, 1 pixel a jako výplň přechod, který se bude skládat z různě kryté bílé barvy. Moje nastavení zaručí, že kruh bude na krajích střídavě silnější a střídavě bude slábnout.

Nastavení stylů

Nyní našemu vektoru přidejte masku (jinak by předchozí nastavení nemělo smysl.

Přidání masky vrstvy

Vezměte gumu, nastavení obyčejný kruhový štětec, který by měl mít tak 1.5 velikosti vektoru. Postačí nám upravit Tvar špičky stopy, nastavte úhel tak 45%, zaoblení 75% a tvrdost kolem 30% – prověďte jeden výpad proti masce našeho vektoru, a miřte na pravý dolní roh.

Výběr
Jak správně ugumovat vrstvu

Vrstvu zduplikujte, obraťte masku o 180% (obracet vrstvu by nemělo smysl, je to kruh) a posuňte jej podle obrázku (těžko se to popisuje slovy ) níže. Poté obojí zduplikujte a několikrát posuňte pod sebe. Pak vyberte celek a zduplikujte jej také, ovšem následně jej transformujte horizontálně a přesuňte tak, aby tvořil zrcadlový obraz. Ještě několikrát zopakujte a potom z připraveného materiálu udělejte výběr pro nový vzorek.

Tvorba vzorku

Ten nyní osadíme a podle libosti změníme jeho krytí (doporučuji tak 30% – původní vzorek je na pozadí příliš agresivní, má působit jemně a elegantně). Vše můžete ještě vylepšit tím, že na podkladovou vrstvu pozadí použijete přechod – samozřejmě ve velikosti jednotlivých kruhů, aby se s nimi opakoval, a ne jeden velký přechod – poté samozřejmě musíte nabrat přechod spolu s kruhy, když tvoříte vzorek.

Výběr vzorku

Při výběru si dejte dobrý pozor, aby vzorek někde nepřesahoval, a dávejte si záležet pixel od pixelu.

Pozadí máme vytvořené

Pozadí již máme, ale nyní si musíme poradit s tím, jak vhodně vyplnit bílý podklad. Pouhé vyplnění s tím, že pozadí bude po okrajích je už tak okoukané, že můžeme vzhledem k malým kontrastním rozdílům mezi pozadím a podkladem použít komplikovanějšího a neotřelejšího řešení.Pokud bychom měli pozadí výrazně kontrastnější barvou než je bílá, nebo výrazně barevnější, nemohli bychom tohle použít, protože by vstupy pozadí do obsahu příliš rušily.

Nyní díky bílému podkladu definitivně vytyčím místa, kde bude obsah a kde bude pozadí jako doplněk.

Položení základů

Nakonec jsem pro rozestupy zvolil 40 pixelů. Je to hodně, ale u návrhu blogu si to nepochybně mohu dovolit, design tím bude prostornější a vzdušnější (není nalepený na sebe). Jediná vyjímka je mezi prvním článek a přiloženým „archívem“ – zde je rozestup pouze 10 pixelů, a symbolizuje to, že obě části k sobě patří. Nyní vezmeme doteď poněkud chaotickou tvorbu pěkně odzhora dolů, vrátíme se tedy k hlavičce, a budeme pokračovat až k patě. Měli bychom začít vyhledáváním – dáme mu nějakou formu a vhodně jej umístíme. Úplně nahoře mimo jiné přidáme rámnec 3 pixelů bílou barvou.

Vyhledávání základ

Vezměte nástroj Zaoblený obdélník s poloměrem 10 (pokud jste ještě nečetli článek o zjednodušení práce u webdesignu, určitě to udělejte), bílou barvou a táhněte přes celou šířku pravého sloupce (260 pixelů) – nemusíte vpravo úplně přesně dotahovat, překryjeme jej tlačítkem hledat. To by mělo mít délku tak na úrovní textu hledat (s určitým odsazením), řekněme 60 pixelů i trochu víc. Tlačítku nastavíme přechod našich dvou oranžových barev, které jsem uváděl předtím, #f35e00 a #fe8407, se světlejší barvou navrchu.

Pokládání obdélníků

Teď nastylujeme kolonku vyhledávání, s bílou se přeci nespokojíme. Přidáme vnitřní stín, přechod a vytažení, které dáme vnitřkem, aby tvořilo takový pomyslný okraj. Barva přechodu je #d8ebf2 a bílá.

Nastavení stylů
Nastavení stylů
Nastavení stylů

Výsledkem je jemný přechod, ve stylu, který zrovna letí. Lepší, nemyslíte?

Výsledek

Se zaoblením vyhledávání jsem pojal vážně úmysl udělat design co nejvíc zaoblený. Dotkne se všeho. Napadlo mě, že bych vyhledávání mohl ještě trochu vylepšit podobným obloukem, který by vedl z bílého horního panelu.

Doplněk vyhledávání

Znovu zvolíme poloměr zaobleného obdélníku 20 bodů, nastavíme na přičíst od oblasti cesty (nebo podržte SHIFT) a vložíme jej na předpokládané místo.Nezapomeňte mít při tomto kroku vybranou původní vrstvu, jinak se vám nově přidaný obdélník nepřičte.

Vykrojení oblouku

Teď přišel čas provést starý rafanský trik, vzít nástroj pro přímý výběr, s ním vybrat levou polovinu nového tvaru a přesunout ji napravo pomocí libovolné transformace.

Vykrojení oblouku 2
Vykrojení oblouku 3

Spodní část buď vyberte a smažte, nebo použijte masku. Vršek za pomoci nástroje přímý výběr dosaďte na místo. Teď ještě přidáme malou lupu, která se k vyhledávání hodí.

Lupa

Vezměte přechod #00b4ff a černé, vrstvě nastavte 50% krytí a vytvarujte ji opět za pomoci tvarů – využijte elipsu a zaoblený obdélník – a s vyhledáváním jsme hotovi.

Lupa

Nyní je na řadě menu. Mezitím jsem bílý podklad oddělil a posunul níže, takže do menu vůbec nezasáhne. Přesný rozměr, kde odshora podklad začíná je 260 pixelů (opět, u blogu si to můžeme bez problémů dovolit). Odměřte odshora 175 pixelů a přes celou šířku vložte 4 pixely vysoký pruh, opět kombinující odstíny oranžové. Takové menu ovšem nějaký podklad potřebuje, čímž se dostáváme k poslední práci s pozadím, kterou budeme dělat. Pak už se budeme věnovat jen obsahu.

Přechod na pozadí

Vytvořte nový tvar přes celou hlavičku a menu, dejte mu bílý přechod s barvou od 100% po 0% (kompletně průhledné) a nastavte krytí 80% a krytí výplně 0% (aby byl vidět pouze přechod a nic pod ním nebylo).

Přechody na pozadí

Zespod udělejte další (zasahuje až do obsahu) a poté ještě přidejte jeden podklad menu (bez přechodu, bílý, krytí ovšem také 80% a výplň tentokrát 100%).Mezi horním a dolním přechodem u menu jsem nechal 1px mezeru, které se nedotýká ani výplň samotného menu – myslel jsem si, že to bude vhodný doplňek, nicméně poté jsem si mezeru vytvořil uměle a překryl jí tuto přirozenou.

Sytější barva pozadí

Možná jste to nezaznamenali, ale do menu jsem mezitím vložil mnohem živější a sytější modrou, a to samé jsem se rozhodl udělat i s pozadím. Původně jsme měli jako pozadí čistě bílou, na které byl nasazen vzorek.

Sytější barva pozadí

Výplň barvou ponecháme (bílá), ale přidáme ji překrytí barvou #d8ebf2 s 50% krytím.

Sytější barva pozadí, nyní se vzorkem

Nad ní je vrstva se vzorkem (krytí 25%, výplň není postatná), které jsem přidal překrytí barvou (Režim krytí: Barva) #a9e6ff (původně neměla tak sytou barvu).

Vybraná položka menu

Nezapoměl jsem na menu. Použijeme stejné metody jako na vyhledávání (ale tentokrát udělejte oblouček menší), a stejných barev jako má horní rámec menu. Nově vytvořenou položku k němu nebudeme přidávat, vznikne nám tím další lépe viditelný odlesk. Ještě vytvoříme jeden podklad menu a jsme s ním hotovi. Bude to na trochu podobné úrovni jako tvorba podkladu vyhledávání. Umístíme nový tvar 1px pod vrchní rám menu a 1px nad modrý rámeček, který nám vzniknul díky přechodům.

Tvorba podkladu menu
Hotové menu

Aplikujte styly podle obrázku výše a dostanete tento výsledek. Tím jsme s menu hotovi. Jako poslední maličkost pro tento díl upravíme slogan (užitečná věc, kde obvykle definujete, o čem píšete) a přidáme volby velikost písma.

Slogan

Sloganu dáme velikost 18px a typ písma Palatino Linotype, italic – je zvláštní, že se toto písmo nepoužívá víc. Posuneme ho o 50px od okraje, jelikož toto bude odstupňovaná velikost obsahu (stejně jako jsou rozestupy mezi sloupci 40 pixelů, tak obsahu bude odsunut + 10 pixelů jako přidaná hodnota, o které jsem mluvil na začátku). Protože tento text nebude jako obrázek, ale bude se normálně měnit, víc ho upravovat nebudeme a nedáme mu ani žádný exotický font.Palatino Linotype by měl měla mít většina z vás, je automaticky přidáván k Windows XP a vyšším + Mac OS jej také má. A pokud ne, použijte Georii.

Velikost písma

K tomu snad není co dodávat. Držte se předešlých postupů, podklad není stylovaný, a proč tuto možnost vůbec do blogu dávám? Někdy, když máte unavené oči, se zvětšení písma hodí. Stejně tak, ne všem může vyhovovat velikost písma, jakou zvolíte, a proto ocení možnost změny velikosti. Určitě to nebude nejpoužívanější funkce na vašem budoucím blogu, ale nic tím nezkazíte. Navíc mě nenapadlo nic jiného, co bych do hlavičky ještě mohl vložit.

V další části se zaměříme na dokončení designu, což se týká hlavně obsahu, pravého sloupce a přidání některých efektů do hlavičky. Přidání podstránek typu článek s komentáři a archív bude součástí dílů, kde se již bude kódovat.

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

  • #2
  • Matros
  • 2. February 2013 | 19:18
  • Skupina: Registrovaní Uživatelé

Dobrý deň. Chcel by som sa spýtať pri tom druhom kroku rozvržení stránky aké rozmery máte nastavené v PS.
Vopred Ďakujem za odpoveď.

  • #1
  • Neregistrovaný kolemjdoucí
  • 28. September 2011 | 21:23
  • Skupina: Neregistrovaní

Zdravím, super návod, jen jedna otázka, v jakém SW je design vytvářen?

Nahoru

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