Pokud jste novým způsobem vytvářet návrhy webových stránek pomocí Photoshopu, učit se transformovat tyto soubory .PSD na sémantické, kompatibilní se standardy CSS a HTML soubory může být trochu zastrašující.

Koneckonců, existuje spousta skvělých služeb, které mohou rozdělit a kódovat soubory pro vás. Ale existují i ​​ty případy, kdy byste raději sami vyřezávali tyhle návrhy.

To je tam kde Z Photoshopu na HTML: Jak nakreslit vaše návrhy jako profesionál Jeffrey Way, redaktor Nettuts +, přichází.

V této 145stranové knize je celý proces převodu souboru .PSD na pracovní webový design podrobněji popsán s příklady kódů.

Modelové stránky se používají k chodu čtenářů celým procesem, krok za krokem, s jediným příkladem. Všechno od základního kódování až po kompatibilitu s kompatibilními kompatibilními prohlížeči je pokryto.

Na denní bázi - pokud budete pozorně poslouchat - křik může být slyšet po celém světě od programátorů, kteří se neúspěšně pokoušeli vynutit design na místo. Nejde jen o to, aby se jazyk učil; memorování je snadný úkol. Body vyvolávající výkřik se vyskytují, když si prohlížíte své stránky v deseti různých prohlížečích, z nichž každý vykresluje vaše stránky na různých úrovních konzistence.


Kniha předpokládá, že máte základní pracovní znalosti o CSS a HTML, stejně jako design již vytvořený ve Photoshopu. Návrh použitý v knize je jednoduchý, ale koncepce použité k vytvoření designu lze snadno aplikovat na složitější návrhy.

Kniha začíná se sekcí, jak se podívat na design, než se ponoříte do procesu vytváření kódu HTML.

Zatímco se může zdát přirozené, že ihned začneme pracovat na vizuálních stránkách našich webových stránek, nemohlo to být dál od pravdy. Místo toho musíme nejdříve vybudovat základnu nebo značku a až po dokončení můžeme přejít na vizuální obraz.


Vyjmutí tří základních částí, které většina webových stránek obsahuje: hlavička, hlavní obsahová oblast a zápatí, jsou zahrnuty a kniha přeskočí přímo do procesu nastavení základního souboru HTML. Znovu, každý, kdo má základní znalosti HTML, nebude mít s touto částí žádné potíže.

Jakmile je váš základní kód HTML dokončen, z aplikace Photoshop na HTML se dozvíte, jak rozdělit vaše soubory .PSD.

Najděte chvíli, abyste se podívali na návrh ve Photoshopu. Pokuste se určit všechny snímky, které budou potřebné. Nezapomeňte, že funkce mohou být znovu vytvořeny pomocí CSS; tak být kreativní.


Zatímco jsou zmíněny oba způsoby řezání souborů, kniha využívá kombinaci oříznutí a řezání a vkládání, aby získala potřebné obrázky, nikoli pomocí nástroje řezu.

Obě metody jsou dokonale platné. Doporučuji, abyste vyzkoušeli oba a vybrali, které se ukáží jako nejrychlejší ... pro vás.


Klávesové zkratky pro urychlení tohoto procesu jsou hlouběji pokryty. Ukládání těchto obrázků pro web, včetně všech nastavení, které byste měli používat, a který typ souboru obrázků použít pro jaké typy obrázků, je také rozsáhle diskutován, stejně jako CSS sprites. V neposlední řadě v této části jsou některé poznámky k úpravám, které budou muset být provedeny do souboru HTML na základě použitých obrázků na pozadí.

Po dokončení HTML a obrázků je čas se ponořit do CSS pro vaše stránky. Resetování prohlížeče je podrobněji zdůrazněno a podrobně popsáno, jak obnovit standardizovaný výchozí soubor CSS.

Každý prohlížeč používá trochu "výchozího CSS", aby automaticky značil váš markup. Na první pohled byste si možná mysleli, že je to velmi užitečné ... Pokud by každý prohlížeč implementoval je stejně, nebyl by to problém. Bohužel tomu tak není.


Řada tipů a triků se vztahuje na nastavení souborů CSS mimo tento obsah, včetně odkazu na soubor Photoshopu pro formátování textových hodnot a použití technologie Fahrner's Image Replacement Technique pro část hlavičky. K dispozici je také velká část o vytváření sloupců v rámci vašeho návrhu, která pokrývá výrazy, které se používají značně.

Existuje řada zásad CSS, včetně relativních a absolutních poloh a CSS tvarů, pokrytých praktickým a použitelným způsobem. Pro ty, kteří nejsou odborníky na CSS, budou tyto oddíly obzvláště informativní, zatímco ti, kteří možná chtějí přeskočit tyto části. Dalším skvělým kódem CSS je, jak vytvořit slepé zápatí, což může být pro nové návrháře CSS frustrující.

Kódování dalších stránek mimo naši domovskou stránku je zahrnuto, včetně toho, jak provést nepatrné úpravy uspořádání a obsahu a co budete muset přidat do vašich CSS souborů. Až skončíte s touto částí, budete mít všechny šablony stránek potřebné pro plně funkční webové stránky portfolia.

Závěrečná pravidelná kapitola v knize se týká způsobu kompatibility vašeho designu s kompatibilním prohlížečem, a to zejména pokud jde o starší prohlížeče, jako je Internet Explorer 6 a 7. Jedním z největších problémů je nedostatek zpracování průhlednosti na snímcích v IE6 , s různými řešeními pro jeho překonání.

Prohlížení vašeho webu v aplikaci Internet Explorer 7 a níže poprvé vás zničí. Můžete mít štěstí, ale většinu času najdete řadu otázek, které je třeba opravit.


Bonusová kapitola na konci ukazuje, jak vytvořit jQuery přechodové efekty, které jsou začleněny do návrhu webu. Pro každého nového javasku a jQuery je to zajímavý projekt, který učí některé základní techniky.

Celkově, pokud jste převedli konverzi vašich souborů .PSD na HTML, nebo pokud jste chtěli vyzkoušet navrhování webových stránek ve Photoshopu, tato kniha rozhodně stojí za přečtení.

S kompletní, krok za krokem pokyny, které lze snadno použít pro mnoho projektů a tuny příkladu kódu, Z Photoshopu do HTML je jistě, že jste začali přeměňovat své vlastní návrhy. S trochou praxe by pojaté pojmy mohly být použity na prakticky jakémkoli designu!

Kniha obsahuje také zdrojové soubory pro vytvořené stránky, které můžete použít ve svých vlastních projektech, které se vám líbí.

Stáhnout ukázkovou kapitolu


Napsáno výhradně pro WDD Cameron Chapman .

Co si myslíte o této knize? Dejte nám prosím vědět v oblasti komentářů ...