Tutorials - grafika pro každého , tutoriály , grafická komunita , portál

Intermezzo - 5. část seriálu

Napsal: lefiath4.1.2008 Líbí se vám článek? Podpořte nás!

---

Přestávka pro nabrání sil mezi grafikou a kódováním stránek, informace o jiných zdrojích a podrobný postup, jak na rozřezávání připraveného designu v Photoshopu.

Obtížnost: Není určena -

Psáno pro verzi programu: Není určena

---

Poté co jste se minule statečně poprali s tvorbou hlavičky pro web, dnešní díl bude jen takovým uvolněním od předchozího pekelně dlouhého dílu. Povíme si něco o tom, z kterých stránek byste mohli nejlépe něco načerpat a kde nejlépe nabrat vědomosti o html a css, pokud bych náhodou já selhal v druhé polovině článku se budeme věnovat rozřezávání, jelikož mě překvapil zájem, který zrovna o tohle měli lidé v komentářích, takže máte to mít.

Takže čím bychom mohli začít? Třeba ve shánění nástrojů, s kterými kódování webu dobře zvládneme.

Sháňka nástrojů

Předně musíme mít něco, v čem samotný kód napíšeme. Tady existují dvě hlavní možnosti a v nich tisícovky programů, ve kterých můžete psát. Tyto kategorie jsou 1. Wysiwyg editory (v překladu co vidíš, to dostaneš, tedy vlastně pracujete rovnou s tím, co uvidíte v prohlížeči, což ovšem berte s rezervou, hlavně také protože většina prohlížečů má jiná pravidla zobrazování. Druhá kategorie je si psát kód ručně – je pracnější se to naučit, ale potom pro vás nic nebude nemožné – tedy na hranice narazíte až tehdy, kdy nebude stačit technologie, ale budete moct dělat věci o kterých by se vám při wysiwyg psaní ani nestilo. Tedy jak můžete vidět, wysiwyg je pro lidi, kteří se kódovat učit nechtějí anebo nemají čas. Ale to nebude náš případ, protože z vlastní zkušenosti mohu říct, že naučit se kódovat ručně se vyplatí. Se správným nástrojem a těmi správnými vědomostmi se to dá zvládnout rychle, ale hlavní je třeba pochopit, jak to funguje. Takže o to se budu pokoušet v dalších článcích, naučit vás ne tak úplně jednoduché html a css, se kterým spíš budou potíže. Alespoň to zkusíme, protože zde mezi grafiky se spíš najdou lidé co kódovat neumí než že si neumí vytvořit grafiku :) navíc při ručním psaní se naučíte psát html správně, tedy vlastně podle různých pravidel pravopisu, pokud se to tak dá nazvat. Když to za sebe necháte dělat program, můžete splakat nad výsledkem, kupříkladu ve wysiwyg editoru web přizpůsobit pro různé prohlížeče, aby se zobrazoval stejně, může být očistec.

Pro vaši zábavu a poučení si nejdřív řekneme, v čem stránky nedělat. Absolutně se vyhněte „lákavým“ nabídkám, jako je například image ready, který vám může vyplivnout web rovnou jako kód. Zní to fajn, v photoshopu to vytvořím, pak přepnu do image ready a vyleze kód. Jenže to, co z něj vyleze, je naprosto nepoužitelná odpornost – respektive ano, dá se to použít, ale je to asi jako kdybyste mluvili v česku napůl česky, napůl ugrofinsky. Pokud vás kód nezajímá a nechcete se ho učit, tak po programu chtivě sáhněte, zařadíte se mezi prasata, co vytvářejí weby, u kterých ani nechápou, co ty obrázky drží pohromadě.

Dále je tu oblíbená „samostatná kategorie zkázy“

pokud máte ke slovu kód odpor a vůbec, nechce se vám dělat grafiku ani kódovat, jistě vaše srdce zaplesá když zjistíte, že je možné během několika kliknutí v prohlížeči vytvořit svoje stránky. Pro ty méně schopnější a méně vyvinutější podivná individua připravila ještě podivnější individua stránky podobné těmto: webová stránka. Pokud se tento mor do budoucna aktivně rozšíří, bude to znamenat zkázu. Díky tomu si i naprostý neumětel může připravit sra*, pardon, webovou stránku a podle toho to tak i vypadá. Takže tomu se raději vyhněte, stačí se podívat na některé výtvory (a to jsem jenom namátkou přelétl hlavní stránku tohoto výmyslu) – <a href =„http://saxa­.webovastranka­.cz/“>kdo má nejvíc smajlíků, vyhrál! anebo <a href =„http://cod2-cheating.webo­vastranka.cz/“>u­mocněné geniálním pozadím! Já jsem malý cheater, tralalá! a co třeba <a href =„http://cpra­dio.webovastran­ka.cz/“>já si svoje stránky umím zprznit sám, nepotřebuji k tomu word ani žádný jiný krám… – takže máte asi tak představu, jak vypadají stránky lidí, co jsou schopni na webu zajít maximálně tak na xchat.

Pro zajímavost trochu řeknu i o wysiwyg kategorii. Asi nejčastějším programem, který svojí hrůzou zasťiňuje moje noční můry o tom, že mě pronásleduje výtah na nohou s hlavou rowana atkinsona, je frontpage. Ano, známý program ze stáje Mrkvosoftu. Jestli jde o prazáklad wysiwyg, to nevím, v historii se nevyznám, ale určitě o něm každý slyšel. A většina lidí v něm začínala, nebo ne? I já jsem v něm zkusil, spíš zkusil než udělal, něco jako web. Ale ani to web nebyl, v každém případě vám radím, tomuto programu se vyhněte jako čert kříži. Je jedno co se na něm změnilo, v základu je to stejné monstrum. Dále je tu Dreamweaver, program, který rozhodně zdarma není, ale vypláznete za něj asi tak 8 tisíc. Kdyby nebylo lepší alternativy, která je navíc zadarmo, možná by se dal doporučit. Ale to není jako photoshop a gimp, tento program je wysiwyg a my si vybereme takový, ve kterém si sami napíšeme kód a nebude nás to stát ani korunu. Jinak jde zřejmě o špičku mezi wysiwyg, také jsem v něm svého času dělal, než jsem se dostal k…

Psaní kódu ručně.

Kdysi byl můj názor takový:

Nejlepší je to říct takto: psaní kódu ručně je mnohem lepší z několika důvodů – předně máte přesně ponětí o tom, co kam dáváte (pokud ne, tak je něco špatně a určitě s vámi) a není pro vás potom problém se v tom vyznat, opravovat chyby, měnit design atd. Jenže to vyžaduje znalosti html jazyka a to se mnozí nechtějí učit, proto se uchylují k programům jako Frontpage, Homesite, nebo Dreamweaver. Já sám jsem dlouhou dobu dělal v dreamweaveru, do chvíle, když jsem zjistil, že to tak prostě dál nejde. Člověk sice v těchto editorech udělá web zdánlivě rychleji, ale opak je pravdou – v těchto editorech budete pracně skládat web kousek po kousku a stejně, pokud budete chtít kvalitnější strukturu, tak se do kódu budete muset koukat čím dál častěji. Možná to není nejsprávnější rada, ale podle mě je dobrá – pokud se necítíte na to, jít se rovnou od píky učit html psaním ručně, tak si vemte něco (dreamweaver, s homesitem jsem nepracoval, ale raději něco, co je zadarmo, abyste neměli kvůli mě problémy – třeba na stahuj.Cz si vyberte nějaký program) a tvořte si. S postupem času, pokud vás bude webdesign zajímat čím dál víc zjistíte, že bez zásahů do kódu nejste schopni udělat některé důležité věci a konvertujete se. Zaručit vám to nemohu, protože tak jsem v podstatě popsal svoji cestu. Nehledě na to, že takové věci jako php prostě v dreamweaveru neuděláte, zde jde čistě o záležitost vnitřní.

Teď tento názor opravdu nesdílím a vím, že byl špatný. Má se začít rovnou pořádně. To že já jsem psal v Dreamweaveru bylo prostě proto, že mi to přišlo pohodlné a nechtěl jsem se o html učit. Jenže jak jsem zjišťoval, že mi program brání při tvorbě složitějších věcí, začal jsem se v kódu vrtat čím dál víc. Nebylo to moc jednoduché a trvalo mi to dost dlouho, než jsem se dostal k tomu, abych se odprostil od dreamweaveru a naučil se konečně psát web sám. Potom jsem ovšem zjistil, že je to ta nejlepší věc, jak se dá web psát. Ne žádný program, ve kterém poskládáte obrázky… Zkrátka úplnou kontrolu nad kódem. Tak můžete dělat věci které byste programem nikdy nedokázali a navíc když tomu budete rozumět, tak budete mít daleko méně problémů optimalizovat stránky pro víc prohlížečů. To je ale zvuk budoucnosti, nyní se dostaneme k programu, který rozhodně doporučuji.

To můžete udělat i v poznámkovém bloku, ale proč se trápit? Sice vám třeba Burák z Dolního Vidlákova řekne něco ve smyslu: „poznámkovej blok rulezz vole“, ale to je až poslední nouzová varianta, jelikož nemá žádné funkce a nemá tedy co nabídnout. Zkrátka je to nástroj pro šašky, kteří potom akorát mohou šaškovat v tom, že si při psaní ničím nepomáhají a opravdu píšou na kolenou. Nám pak také mohou být za šašky a pojďme si raději povědět o pohodlnějších programech, než touto kategorií zkázy. Takže berte následující pspad a na zmatené blábolení lidí, kteří bloček doporučují zapomeňte.

Takže, musím zopakovat, že učit se kód od začátku určitě není legrace. Ale myslím, že déle mi trvalo se odhodlat k psaní ručně než samotné učení. Neopakujte moji chybu a zkuste to hned – program, který doporučuji k psaní, je <strong>pspad</str­ong>. Má v sobě velmi mnoho užitečných funkcí, začínající uživatelé jistě nejvíc ocení barevné rozlišování mezi znaky a různé blbinky jako míchání barev nebo samodoplňování značek. Navíc je zadarmo, takže co víc si přát?

Není značka jako značka a co teprve html značka.

Každý jazyk má svá pravidla a nejinak je tomu u html. Má gramatická pravidla, která by se dala přirovnat k validitě, ale má také stylistická pravidla, což není nic jiného než sémantika. Takže si dáme příkladu webů, které byste měli rozhodně navštívit. Rozhodně se nechci pokoušet vás v několika krátkých článcích kompletně učit html a css, ale pokusím se vštípit alespoň základy :) Zároveň byste však měli navštěvovat tyto stránky a učit se z nich.

Asi nejčastějším webem, který bývá zmiňován pro začátečníky je <strong>jak psát web</strong>.

Neřeknu, že jde o špatný web, ale… Prosím, než mě roztrhají na kusy skalní příznivci této modly, rád bych něco řekl, proč ano a proč ne tento web. Po krátkém prozkoumání stránek zjistíte, že je toho zde opravdu hodně a je to psané s citem a důkladně. Takže v čem je tedy problém? Vývoj tohoto webu se dávno zastavil a obsah není aktualizovaný. Řekněme že jde tak o 4 roky, možná víc. A to je na internetu, kde se technologie mění neuvěřitelnoust rychlostí, ohromná doba. Naštěstí ne všechno se mění a html je na pochopení pořád stejné. Stejně tak zdejší přehled css je neocenitelnou pomůckou pro zapomětlivé, sám ho také občas navštívím. Takže pro vás, jakožto začátečníky, rozhodně ano, vstupte a učte se základy.

Další web, který by jistě neměl ujít vaší pozornosti je <strong>séman­tika</strong>.

Obsah stránek se dá shrnout takto – html je jazyk a sémantika jsou pravidla, kterými bychom se měli řídit. Protože když se nebudeme řídit pravidly, může náš pravopis skončit jako prasopis, naše vyjadřování spadnout oplně někámc do prdelé a voubec keď chcem tak můžou hodit do hajzlu i celý to psaní… Když nebudete rozumět pravidlům html, bude váš kód vypadat asi jako řeči, co se linou z úst opilcovi. Ale pozor, na těchto stránkách jsou i nesmysly, ne vše je tam pravda, ovšem to je dáno spíš časem, protože tento web také není úplně nejnovější, ale stále podle mě dobrý.

Sice neznám žádný konkrétní web, který by popořadě učil základy css, ale jako neocenitelnou pomůcku, až css pochopíte, se stanou stránky <strong>Pixyho</stron­g>.

I když se i zde vývoj stránek zastavil, jde o skvělý zdroj s mnoha příklady řešení i obecnými a velmi užitečnými konstrukcemi – pixy dále má web www.wellstyled.com, kde publikoval řadu velmi užitečných řešení, také doporučuji poté podrobně prozkoumat, určitě nezůstaňte jenom u průzkumu jednoho webu, tvoří skvělou dvojku.

Php vás opravdu v tomto seriálu učit nebudu, jednak je to něco naprosto rozdílného a je k tomu zapotřebí se naučit mnohem víc než jen pár funkcí a jednak ho sám prozatím příliš neumím :)

A vida, zapoměl jsem dneska doporučit hudbu. Jelikož ta lehčí polovina je za námi, naladíme na lehčí hudbu. Alert mi nedávno doporučil úžasnou hudbu od japonské zpěvačky Kotoko, jejíž písničky na youtube předváděla jedna holčina, která alertovi učarovala nu, dost řečí a určitě si tu hudbu pusťte, je to pecka. Není to zas tak lehké sehnat některé z jejích písniček, takže vám dám pár odkazů 

Kotoko – Princess Bride

Kotoko – Mighty Hear

Kotoko – Forever

Rozřezávání stránek

Jelikož se mě hodně lidí ptalo, jak na rozřezávání stránek, podíváme se na pár způsobů, jak toho docílit. Respektive existují dva :) První je primitivnější, za pomocí nástroje Crop. Většina z vás jistě poprvé při rozřezávání dokumentu (teď nemyslím konkrétně stránky) sáhne po tomto nástroji, jelikož manipulace s ním je jednoduchá. Práce s tímto nástrojem je snadná, pouze stačí táhnout tam, kde chcete místo oříznout. Světlá část výběru představuje tu část, která zůstane, jelikož jde o ořezávání dokumentu a ne pouze výběr, kdy by velikost dokumentu zůstala stejná a pouze byste vyřízli například kus levého rohu. Stejně tak pokud prostě chcete oříznou jednoduchý obrázek, tak je to nejlepší možnost.

Ovšem při rozřezávání celého webu by šlo o otravnou a stereotypní činnosti – vždy vyříznout kousek, uložit, zkontrolovat, jestli všechno do sebe pasuje a poté opět načíst původní soubor a odřezávat další kousek. Přiznávám se, že jsem to takhle nějakou dobu dělal, až jsem toho měl opravdu dost. Potom jsem se rozhodl objevit taje a záhady nástroje slice, o které se s vámi podělím.

Tento nástroj se ovládá skvěle a je radost s ním pracovat. Namísto toho, abyste jeden po druhém pracně označovali kousky pomocí Crop, tak se slice toolem tažením myši vyznačíte přesně, jak chcete vzhled rozřezat. Navíc co si natáhnete můžete pohodlně přesouvat a měnit velikosti výběru myší. Při tom můžete vzhled jakkoliv přibližovat, abyste vybrali co nejpřesněji. Tedy manipulace je skvělá, hlavně díky pohodlí, kdy si můžete vybrat, co chcete uložit a co ne.

Rozhodl jsem se, že nebudeme troškařit a na ukázku rozřežu nějaký složitější web, protože už při tom musíte mít vymyšleno, jak ho chcete mít sestavený. Jelikož jsem se nějakým nedopatřením dostal k tvorbě nového vzhledu tutorials, zajistil jsem si také, že si ho rozřežu a nakóduji sám. Jak jistě vidíte, struktura tohoto vzhledu není vůbec jednoduchá a je toho tu dost. Rozřezávání ovšem může být jednoduché, protože se nám tu vlastně hlavně střídají jenom panely. Takže, hlavně než něco začnete řezat, odstraňte z vzhledu písmo na místech, kde by vám vadilo.

Jelikož jde o to, že musíte chápat základy html a css, abyste dokázali určit, jak je třeba rozřezat design správně, tak nyní předpokládám, že asi nebudete rozumět tomu, proč některé věci rozřežu tak, jak to udělám. Prosím, neptejte se potom na to, protože o tom si povíme v dalším díle. Zde následující obrázky slouží pouze jako ilustrace k tomu, jak se má řezat, až v dalších dílech nakousneme html a css, tak se k rozřezávání ještě vrátíme.

Po vybrání nástroje si můžete zvolit jeden ze tří režimů selekce. V prvním případě si vyberete plochu, jakou sami označíte, prostě normální selekce. V druhém případě opět sami vybíráte plochu, ale je zde nastaven čtvercový výběr, takže se vám nestane, že byste o pixel ujeli, budete mít vybraný dokonalý čtverec. A poslední výběr je nejvíce omezený, ale velice užitečný. Nejdřív si definujete v pixelech velikost oblasti a poté už vám nástroj zabírá jednotlivé úseky o velikosti, kterou jste vložili. Kdybych ukládal doopravdy, tak také odstraním text u horního panelu.

Nyní se můžeme pustit do selekce. V případě, že jste označili nějaký kus a poté byste u něj chtěli zpětně měnit rozměry, podržte při kliknutí na vyznačený úsek ctrl, čímž opět získáte kontrolu nad zvoleným úsekem. Některé selekce na ukázkovém obrázku schválně přeháním, bude vám stačit u opakujícího se pozadí kousek o šířce 1 pixel, ovšem ten byste zase na obrázku neviděli.

Pro zvětšení klikněte na obrázek

Jistě jste pochopili, že vyznačené úseky jsou ty, které budeme řezat. Začneme u menu – nemá cenu ho rozřezávat na menší kousky, přestože můžete vidět, že nahoře vedle loga je ještě jednou. Proč? Protože velikost je zde trochu jiná. To by mohlo nahrát případu s menšími kousky, aby se nám menu měnilo na šířku podle toho, jak chceme. Mohl bych to udělat, ale přišlo mi to zbytečně pracné. Jelikož další verze pozadí přidá jen pár kB, tak z toho nechci dělat vědu. Pozadí hlavičky, pozadí stránek, stín z menu a pozadí panelu s vyhledáváním naopak můžeme zabrat jenom jako malé proužky. Divíte se, proč jsem pozadí hlavičky ostřihl od pozadí stránky? Hlavička totiž v kódu nebude sloučená s tím, co je pod ní a to se týká i pozadí. Pokud se vám zdá, že jsem toho uřízl poněkud málo, tak můžu na obhajobu říct, že ony šedé rámečky, které jsou prakticky všude, budeme právě dělat v css, abychom si ušetřili další řezání, které by bylo zbytečně komplikované.

Takže máme vybráno, co chceme rozřezat a nyní přichází nejdůležitější zakončení. Pod nabídkou save as máte Save for web – po kliknutí se na vás vyvalí zobrazení, ve kterém si můžete upravovat jednotlivé vybrané úseky, přidávat jim jména a vůbec je připravit na následný export. Celkově tato nabídka není příliš zajímavá, protože je užitečná spíš zvrhlíkům, kteří si nechají s obrázky rovnou vygenerovat i kód. Ten ovšem nestojí za nic a proto taky čtete tento seriál, abyste se naučili vytvořit a napsat stránky sami. Stejně tak zde můžete rozsáhle měnit vlastnosti ukládaných obrázků ve formátu gif, ale necháme to raději na pokoji, není nijak nutné se v tom hrabat. Jistě vidíte, že mám vybráno opět více sekcí najednou. V tomto náhledu již nejde s výběry manipulovat, takže už máte vše napevno. Více sekcí se vybere jednoduše držením shift a levým tlačítkem myši. Pokud byste ovšem chtěli víc sekcí vybrat přímo v Photoshopu, musíte držet najednou ctr (pro výběr) a shift (pro přidání).

Pro zvětšení klikněte na obrázek

Jak jsem zmiňoval, v náhledu před uložením si můžete změnit názvy jednotlivých selekcí, aby se vám uložily pod jménem, jaké jim chcete dát. Stačí dvakrát poklepat na kousek, který chcete. Takže to máte s veškerým komfortem.

Přejdeme k ukládání, kde se dělá to nejdůležitější. Přijde totiž to nejlepší, volby, zda si přejete uložit jako html, či pouze jako obrázky. Takže dáte obrázky a zde v neviném posledním řádku nastavíte jako já All User Slices. Tím se vám zajistí, že se uloží pouze ty části, které jste označili. První volba vám uloží úplně celý obrázek, který bude ovšem tímto zásahem rozřezán na všechny možné kousky a akorát se vám v tom ztratí ty kousky, které vás zajímají. Poslední volba je zajímavější, dovolí vám uložit si ty kousky, které jste si označili (svítí oranžovou jako na předchozím obrázku). Takže je to jednoduché – první volbu ne, druhou ve většině případů a třetí se může hodit, když něco předěláváte (změnili jste velikost něčeho) a nechcete ukládat opět vše.

Pro zvětšení klikněte na obrázek

Pokud by vás stejně jako mě obtěžovalo přednastavené vytvoření adresáře images, kam se obrázky ukládají, můžete si to změnit ve volbě settings, pokud přepnete na other. Doporučuji.

Nu a to je vše, tímto jste zvládli rozřezávání webu. Ale pozor, ta správná legrace teprve začne, až začneme řezat doopravdy.

V dalším díle si zkusíme probrat základy html a css, takže vám opravdu doporučuji navštívit doporučené stránky. Kódování není sranda a v žádném případě vás pár článků nenaučí něco dobře zvládat. Já vám jen chci ukázat funkční příklad a postup, který by byl dobře pochopitelný. Ovšem pochopit správně html a css chce určitý čas, abyste věděli, jak co funguje, což se z jednoho příkladu těžko dozvíte. Proto to nepodceňujte, tady rychlá a snadná cesta neexistuje. Nebo dezertujte a nechce Photoshop vám vygenerovat ono html :)

Sekce: Webdesign