Jak na web design

[Halus 0]

Zdravím,

Chtěl bych Vás odborníky požádat o rady jak vytvářet web design ve Photoshopu.

Čím začít, jak obrázek kompletního webu rozsekat, jak to vše "slepit" k sobě pomocí CSS apod.

Za všechny rady, návody nebo tipy Vám předem děkuji.

[Queltalas 32]

Zrovna včera se to tu probíralo! Třeba tady.

[Halus 0]

Tak jestli se to tu probíralo, tak se omlouvám.

Ten web, který jsi mi poslal znám a mám skoro celý pročtený.

Projdu si ho teda ještě jednou no

[Queltalas 32]

Tak jestli se to tu probíralo, tak se omlouvám.

Ten web, který jsi mi poslal znám a mám skoro celý pročtený.

Projdu si ho teda ještě jednou no

Pokud máš ten web pročtený celý, musíš být ve Photoshopu mistr

[Halus 0]

Pokud máš ten web pročtený celý, musíš být ve Photoshopu mistr

kéž by

[fokkysus 0]

Pokud máš ten web pročtený celý, musíš být ve Photoshopu mistr

 

tutorials.cz uz nejsou co byvali ... a uz vubec si nemyslim ze potom co tam clovek uvidi by byl mistr .. hold to chce tvorit a ridit se podle pokus/omyl ... jak jinak se to chces naucit ...

samozrejmne ze nejde se podivat na nejaky navod a hned to umet natoz kdyz clovek nevi zaklady a ty tam nenajdes ... myslim zaklady ruznych nastroju a pouziti brushu i kdyz to zni na prvni pohled trivialne neni tomu tak

[Halus 0]

tutorials.cz uz nejsou co byvali ... a uz vubec si nemyslim ze potom co tam clovek uvidi by byl mistr .. hold to chce tvorit a ridit se podle pokus/omyl ... jak jinak se to chces naucit ...

samozrejmne ze nejde se podivat na nejaky navod a hned to umet natoz kdyz clovek nevi zaklady a ty tam nenajdes ... myslim zaklady ruznych nastroju a pouziti brushu i kdyz to zni na prvni pohled trivialne neni tomu tak

Tyto základní věci ovládám, ale spíš mi de o propojení Photoshop a CSS

Jelikož, když si udělám komplet web ve photoshopu jako obrázek, tak nevím jak ho rozsekat na jednotlivé části a v CSS je dát na správné místo a obrázek zase poskládat dohromady. O to mi jde

[Grigi 7]

Tyto základní věci ovládám, ale spíš mi de o propojení Photoshop a CSS

Jelikož, když si udělám komplet web ve photoshopu jako obrázek, tak nevím jak ho rozsekat na jednotlivé části a v CSS je dát na správné místo a obrázek zase poskládat dohromady. O to mi jde

 

Tak to si najdi nějaký web a podívej se do složky img nebo images a tam uvidíš ten web jak je rosekaný...např zvlášť header,footer,rámečky atd ..ale aby si to poskládal měl by si css ovládat a potom pomocí <div> tagu si to hodit do html... více o css na www.jakpsatweb.cz

Edited December 1, 2008 by Grigi

[fokkysus 0]

tak to je jina ... no asi takhle : jaky mas PS ? photoshop CS3 uz nema image ready v kterem se to striha .. pokud mas CS2 tak si ten obrazek otevri v image ready a dej nastroj "Rozrezani" (prvni slopec , druhy od shora) ... az to nastrihas tak dej "ulozit optimalizovany jako ..." a das ulozit nekam ... vytvori se ti slozka "obrazy" a "index.html" a vlastne samotny photoshop ti to posklada a nemusis resit okolnosti ... dalsi vec je pak umet CSS ale to je jiny soudek

[axxxa 78]

No, zpět k původní otázce, jak začít vytvářet webdesign...

no, jak to dělám já:

 

Něco si nakreslíme

• Na začátku musí samozřejmě být nápad, hrubá představa o celkovém layoutu.
• Dobré je si uvědomit že přes css uděláš prakticky cokoliv a tak se zatím vůbec nezatěžuj tím, jak to sestavíš, půjde to.
• Teď by byl vhodný čas na vložení nějakého pozadí, dle mého názoru je ideální udělat stránku se 100% výškou, protože pak do pozadí stránky můžeš zakomponovat i část designu a ušetříš tím čas i kilobajty.
• (Pozadí pak bude samozřejmě top center; repeat-y;)
• Teď si většinou vyberu nějaký výrazný element, například část pro hlavní odkaz stránky, nad ní šoupnu jakési logo.
• Teď už jenom doděláš jakési panely, upřesníš detaily středu stránky atd.

Budeme řezat

• Řezání je lehčí než by se zdálo, na klasický layout vycentrované stránky s fixní čířkou ti stačí...já nevím, 6 obrázků?
  1. Header

  2. Střed, ten poslouží zároveň jako pozadí stránky, viz výše

  3. footer

  4. vršek, střed, spodek panelu

• No, teď už jenom doporučím absolutní pozicování, 50% od jedné strany, záporný margin na správnou stranu, panely a textovou oblast vyřešit přes float, zrušit obtékání pomocí clear: left
• U takovéhleho layoutu bych viděla jediný problém s footerem, tak ho tam buď prdneš jako position: fixed; (pro ie je na to javascriptový fix), nebo uděláš takovou prasárničku vlastní výroby, absolutní pozice footeru top: 100%; a příslušný záporný margin top

 

jinak "rada" k řezání: prostě vždycky zmáčkni merge all visible layers, kus uřízni, vlož ho do nového dokumentu a v původním vrať změny

 

edit: a jak to skládat? Já o vždycky dělám v podobném stylu http://axxxa.wz.cz/el/ (tady jsem tedy zrovna ideálně nevyužila pozadí, ale co Tady ta ukázka je sice "jednoduší", nadruhou stranu je na ní to pozicování lépe vidět http://axxxa.wz.cz/wow/ ; a nakonec tady je snad už všechno http://scprojekt.xf.cz/ - když se pořádně podíváš, měl bys zjistit, že všechny weby jsou postavené na +- stejném základu. Doporučuji si udělat také něco podobného a máš vyhráno

 

edit: ještě dodám, že chyba v první ukázce je následující: ty "kameny" po stranách jsem měla použít jako pozadí celé stránky, tím bych ušetřila plochu okna prohlížeče.

Edited December 1, 2008 by axxxa

[Halus 0]

Mám CS3 a CS4, ale asi stáhnu si CS2

Díky všem za rady

Určitě vyzkouším

Edited December 2, 2008 by Halus

[Nike 0]

Pokud máš ten web pročtený celý, musíš být ve Photoshopu mistr

heh tjn je to mega nice webik strasne moc mi pomohl urcite muzu doporucit vsem co se zajimaji vice o grafiku diky za link do tydle doby jsem o tom webu nevedel thanks

[fokkysus 0]

jj to zmaknes ... kdyz jsem to videl poprvy koukal jsem na to jako "tele na novy vrata od chliva" ... ale ted uz si stim clovek konecne muze delat vse podle fantazie a nic cloveka netizi ze by neumel ... je to paradni programek ... dale pak muzes vyskouset gimp ale mne se vubec nelibi ale tak kazdemu se "páčí" neco jineho ... GL a pak ukaz nejakou tvorbu at vime ... snad to Sneaker udela konecne kmenovou skupinu "grafika" ...

 

Edit : skus tendle web myslim ze to tady je lepsi ... vim o cem mluvim

Edited December 1, 2008 by fokkysus