| Autor | Zpráva | ||
|---|---|---|---|
| Hans_16 Profil |
#1 · Zasláno: 2. 10. 2012, 16:19:03
Můžete mi prosím poradit, jestli se dají někde přečíst informace do začátku, jak na webdesign? Už jsem si prošel celou knihu CSS Chybějící manuál, která se mi opravdu moc líbila, jak je zpracovaná a plno věcí jsem z ní opravdu pochopil a rád bych to už zkoušel na konkrétním příkladu, ale nevím, jak na webdesign. To musím každou část stránky vytvořit zvlášť? A dále všude čtu, jak je na to dobrý Photoshop, ale na ten opravdu nemám :D . Dá se to dobře vytvářet i GIMPu? Děkuji za každou radu
|
||
| Sir Tom Profil |
#2 · Zasláno: 2. 10. 2012, 17:52:39
Hans_16:
Ano, dá - ale doporučil bych i nějaký vektorový editor (Inkscape). Přesné normy pro webdesign nejsou... člověk musí tak cítit v krvi co je dobré a co je špatné - podívej se na ostatní stránky, řekni si, co se ti na nich (ne)líbí a vezmi si z nich inspiraci. |
||
| Petr ZZZ Profil |
#3 · Zasláno: 2. 10. 2012, 20:13:44
Hans_16:
„informace do začátku, jak na webdesign?“ Myslíš kód nebo grafiku? Na učení kódu doporučuji Jak psát web, na grafiku si vyhledej něco o pravidlech kompozice (nemusí to mít vůbec nic do činění s webdesignem, spíš s malířstvím nebo fotografií). |
||
| Hans_16 Profil |
Petr ZZZ:
„Myslíš kód nebo grafiku?“ Grafiku. U ní moc nevím, jak začít a jestli si musím udělat každou část stránky zvlášť nebo dohromady? Sháním nějaké tipy a triky, jak začít :D |
||
| Petr ZZZ Profil |
Obvyklý postup je takový, že se vzhled (celé) stránky namaluje v nějakém grafickém editoru a poté se nařeže a nakóduje. Jak to nařezat má dva aspekty:
- jednak technika řezání, čili ovládání možností grafického editoru - a jednak otázka, co jak nařezat a posléze nakódovat. Například na plynulý přechod pozadí není třeba umístit na pozadí celý velikánský obrázek, ale někdy může stačit jen jeho část, která se vertikálně, horizontálně nebo v obou směrech opakuje (to už ale nemluvíme ani tak o technikách malování jako spíš o technikách kódování). Zrovna tak ale můžeš postupovat opačně: Rozmyslíš si rozvržení prvků stránky (menu, počet a šířky sloupců, zda budou na stránce jen texty nebo i obrázky, videa atp.), nakóduješ to podle svých představ pro začátek jen s různými barvami pozadí kvůli orientaci a až potom nahradíš (nebo doplníš) barevná pozadí jednotlivých bloků obrázkovým(i) pozadím(i). Konkrétní příklad: Na stránce o srazu DJPW 2010 jsem použil na pozadí dva obrázky (HG000008.jpg na prvku <html> a HG000011.jpg na <body>), které se horizontálně i vertikálně opakují. Oba obrázky jsou navržené tak, že horní konec navazuje na spodní a levý na pravý, takže opakování obrázku se "prozradí" až při velmi silném zmenšení stránky nebo na hodně velké obrazovce (zkus si tu stránku nazůmovat na mrňavou velikost a podívej se, co dělá pozadí).
Jiná možnost je udělat barevný gradient jen v jednom směru – potom lze použít obrázek, který bude datově i rozměrově podstatně menší (bude mít například šířku stránky, ale výšku jen třeba 100 pixelů). |
||
| quatzael Profil |
#6 · Zasláno: 5. 10. 2012, 00:17:08
Já bych pro začítečníka rozhodně doporučil Inkscape. Dá se s tím dělat spousta věcí a není to moc těžký. Na youtube najdeš šikovný tutoriály. Zbytek je na http://www.LittleWebHut.com
Jediný na co jsem v inkscapu ještě nepřišel je jak vytvářet, naklánět a zakřivovat 3D obrázky v prostoru jako například: http://www.crestock.com/image/489883-3d-arrows.aspx http://www.iconfinder.com/icondetails/17005/128/arrow_green_icon Kdyby někdo o něčem věděl tak plís poraďte.. Jinak vytvořit kvalitní design je opravdu náročný. Buď máš v sobě už nějakej talent nebo musíš prostě zkoušet a zkoušet a strašně moc přemýšlet.. Hlavní zásada pro webdesign (pokud se snažíš o nějaký komerční úspěch) je maximální profesionální vzhled, totální přehlednost a intuitivnost rozložení stránky a pak samozřejmě i atraktivita jako taková.. Ale pravda je, že jsem sám ještě nenašel webdesign, o kterém bych mohl říct, že splňuje výše zmíněné na víc než 90%. Vůbec se snažím najít nějaký stránky, kterýma bych se mohl inspirovat a celkem marně. Pokud má někdo nějakej tip tak se klidně podělte.. Dost zásadní a překvapivě obtížný je naučit se pracovat s barvami umět je správně kombinovat a používat správný kontrast. Když zvolíš špatný barvy tak ať se budeš snažit sebevíc něco vymyslet s rozložením, velikostmi, bude to vypadat furt blbě.. a to i přesto, že Ti samotná barva může připadat cool, ale když neladí s celkovým návrhem tak je to špatně.. Praktická rada na začátek, která Ti usnadní práci a vyhneš se neustálýmu předělávání: Pokud děláš sofistikovanější stránky, kde se objevuje více různých rozmístěných prvků, dobře si propočítej pixely. Nauč se znaky dělitelnosti, a tam kde je to nutný používej velikosti obsahující aspoň dva stejný divisory. Když tohle na začátku nezohledníš a zvolíš špatný velikosti, tak to prostě už nenacentruješ (například nerozdělíš 17px na dvě části) a nic nevypadá hůř než stránky, který takhle ujížděj.. V tom inkscapu je třeba tak dát si pozor, když si zvětšíš zoom na víc než 100%, protože potom jakýkoliv posouvání nebo zvětšování se už neděje v celých pixelech a proto potom při exportu obrázku můžeš narazit na problém, že pokud budeš mít obrys například 0.756px bude trochu rozmazanej.. Jo a doporučil bych používat výhradně formát .png, pokud nemáš jiný vážný důvod například pro gif animace.. |
||
| margin Profil * |
#7 · Zasláno: 5. 10. 2012, 08:09:01
quatzael:
„potom jakýkoliv posouvání nebo zvětšování se už neděje v celých pixelech“ To se snad může stát jenom při posouvání myší a jenom když není zapnuté přichytávání. „při exportu obrázku můžeš narazit na problém, že pokud budeš mít obrys například 0.756px bude trochu rozmazanej“ Tohle nesouvisí se zoomem, ale s nastavením tloušťky obrysu a s volbami pro transformaci objektu. |
||
| quatzael Profil |
#8 · Zasláno: 5. 10. 2012, 10:28:31
margin:
„To se snad může stát jenom při posouvání myší a jenom když není zapnuté přichytávání.“ to je pravda, jenže kdo neposouvá myší, že? s tím gridem máš taky pravdu, ale já ho používám většinou jen když pracuju s uzly.. „Tohle nesouvisí se zoomem, ale s nastavením tloušťky obrysu a s volbami pro transformaci objektu.“ stačí, aby jsi neměl objekt umístěnej na souřadnici celočíselně a jednopixelovej obrys se zkreslí.. |
||
|
Časová prodleva: 3 dny
|
|||
| Hans_16 Profil |
#9 · Zasláno: 8. 10. 2012, 16:14:13
Děkuji vám za rady. Kouknu na ten Inkscape, na youtube se dá najít dost ukázek. Ale koukám, že grafika bude na tom celém nejtěžší :D určitě začnu něčím jednoduchým. A jaké rozměry mám používat? Nebo je důležitá jen šířka a výška se dělá podle obsahu?
|
||
| Petr ZZZ Profil |
#10 · Zasláno: 8. 10. 2012, 22:19:28
Jsou situace, kdy se omezení výšky hodí, obvykle se ale konkrétní výška bloku neurčuje a ten se potom automaticky přizpůsobuje obsahu. Definovat výšku většinou znamená omezit ji. Málokdy je to vhodné, snadno může převážit nevýhoda, plynoucí z druhého vertikálního posuvníku.
|
||
| Taurus Profil |
#11 · Zasláno: 8. 10. 2012, 22:23:42
960px šířka je pro web ideální. Např. i proto, že je to dobře dělitelné číslo v případě užití menších prvků.
http://960.gs/ |
||
| quatzael Profil |
#12 · Zasláno: 9. 10. 2012, 12:00:08
Taurus:
„960px šířka je pro web ideální.“ dělitelný to sice je skvěle, ale v dnešní době širokoúhlých monitorů je daleko lepší aspoň 1024px. řekl bych, že většina moderních webů používá šířku nad 1000px, aspoň trend jde tímto směrem.. |
||
| jenikkozak Profil |
#13 · Zasláno: 9. 10. 2012, 12:19:21
quatzael:
„řekl bych, že většina moderních webů používá šířku nad 1000px“ Co je to „moderní web“? Gmail ne, Google ne, Youtube ne, Seznam ne, předělané last.fm ne, apple.com ne, facebook ne, coca-cola.com ne, Microsoft ne, Samsung ne, O2 ne, Toyota ne. |
||
| Amunak Profil |
#14 · Zasláno: 9. 10. 2012, 13:00:31
quatzael:
Normální webdesigner tak široký web neudělá, protože na "úzkoúhlých" monitorech se pak objeví horizontální scrollbar. A těch je podle statcounteru pořád přes patnáct procent. Někdo taky (třeba jako já) má lištu vpravo nebo vlevo (abych nemusel tolik rolovat vertikálně a to místo je na 90% webů prázdné) a když někdo udělá web širší než 1200 pixelů, taky už mám scrollbar. Kdybych měl k tomu v prohlížeči ještě nějaký panel, nad 1000px už se nevejdu vůbec. |
||
| quatzael Profil |
#15 · Zasláno: 9. 10. 2012, 13:01:59 · Upravil/a: quatzael
jenikkozak:
počkej si dva roky.. jenikkozak: no mě se třeba gmail, google, seznam, idnes zobrazuje na víc než 1000px, ale to je spíš pro to, že mají to rozlišení přizpůsobivý na šířku obrazovky.. |
||
| panther Profil |
quatzael:
„dělitelný to sice je skvěle, ale v dnešní době širokoúhlých monitorů je daleko lepší aspoň 1024px.“ neni pravda, ale delej, jak myslis. To, ze jsou vetsi monitory, neznamena, ze vsicni brouzdaji s fullscreenovym rozlisenim. A fakt, ze nema web fixni sirku, nicemu nevadi. Podstatne je, jak se zobrazi na rozliseni 1024, tedy pro viewport 960-980px. Pokud bez horizontalniho scrollbaru, vse je v poradku. „počkej si dva roky..“ bavime se snad o soucasnosti, ne? Co se sirky webu tyce, za dva roky se toho stejne pravdepodobne mnoho nezmeni. |
||
| Hans_16 Profil |
#17 · Zasláno: 9. 10. 2012, 13:41:53
Všem moc děkuji za rady. Dnes už začnu vytvářet něco jednoduššího. Takže mám pracovat s tou šířkou 960px? Těch 1024 mi přijde dost, protože to mám na netbooku a tam už by se mi asi udělal horizontální scroll
|
||
| panther Profil |
#18 · Zasláno: 9. 10. 2012, 14:01:25
Hans_16:
„Takže mám pracovat s tou šířkou 960px?“ 960 nebo 980, vic uz ne. |
||
| Amunak Profil |
#19 · Zasláno: 9. 10. 2012, 16:40:03
Hans_16:
Jakmile se ti v běžném prostředí objeví horizontální scrollbar, je to špatně. Nikoho nebaví rolovat do stran. |
||
|
Časová prodleva: 6 dní
|
|||
| Hans_16 Profil |
#20 · Zasláno: 15. 10. 2012, 21:38:51
Tak jsem objevil program Adobe Fireworks, zkusil jsem trial a jsem z něho nadšený. A pomocí tutoriálu, který jsem našel, jsem vytvořil toto. Co na to říkáte? V tom Fireworks to jde jedna báseň :)
http://postimage.org/image/40k3wbaw9/ |
||
| Rellik Profil |
#21 · Zasláno: 15. 10. 2012, 21:47:22
Vyzkoušej INKSCAPE Tam to jde taky skoro samo a hlavně zdarma... ;)
|
||
| Hans_16 Profil |
#22 · Zasláno: 15. 10. 2012, 22:10:58
Ten mám taky nainstalovaný, ale ten Fireworks jsem chtěl jen vyzkoušet a na ovládání mi hodně sedl. Ale bohužel nemám těch 7000, abych si ho koupil, takže nejspíš skončím u Inkscape, ale trochu nerad :D a jak to vypadá, ten můj výtvor?? :) docela mě to baví, tak uvidím, jak mi to půjde dál :)
|
||
| Taurus Profil |
#23 · Zasláno: 15. 10. 2012, 22:52:30
Pro začátek hezké, ale co chceš hodnotit? Musí tam něco být, ne jen prázdné obdélníky. Přesto už i teď si můžeš všimnout chyby zarovnání textů menu. A vlastně i nadpisu - nelícuje s obsahovou částí, je nacpaný k vrchu...
|
||
| Hans_16 Profil |
#24 · Zasláno: 15. 10. 2012, 23:40:44
Tak chtěl jsem zhodnotit, jestli to vypadá k světu, jestli v tom můžu pokračovat :) takže ten text menu mám dát jen níž, aby to bylo jen kousíček nad tím černým stínem a to samé s nadpisem, jinak to ujde? A hlavní část na text bych chtěl dát bílou, ale nevím, jestli by byla lepší čistě bílá nebo taková hodně světle šedá. Ale spíš se přikláním k té šedé. Byla by to dobrá volba? Budu v tom pokračovat zase zítra, dnes jsem si s tím hrál celé odpoledne, ale baví mě to :)
|
||
| Taurus Profil |
#25 · Zasláno: 15. 10. 2012, 23:47:40
Ohledně menu jsem měl na mysli horizontální zarovnání textu... Vždyť vlevo jsou větší mezery jak vpravo.
|
||
| Hans_16 Profil |
#26 · Zasláno: 15. 10. 2012, 23:52:45
Jo už to vidím :) jak na to koukám celý odpoledne, tak jsem přehlédl, že mi to ujelo. A jinak to teda ujde jo :)
|
||
| Rellik Profil |
#27 · Zasláno: 16. 10. 2012, 06:23:51
Hans_16:
„a jak to vypadá, ten můj výtvor?“ No na začátek to jde, i když většina toho jde udělat přímo v css (šedé obdélníky, přechodová čára menu). I ta hlavička by by šla udělat v css - stačil by na to průhledný PNG jen s tím písmem a tou "září". Případně pozadím (i když jde v css). Na to ale všechno přijdeš sám časem... ;) Např tak: http://mmrs.rellik.eu/images/logo_black.png + http://mmrs.rellik.eu/images/logo_cube.png = logo tohoto webu |
||
| Sir Tom Profil |
#28 · Zasláno: 16. 10. 2012, 08:05:21
Hans_16:
„estli v tom můžu pokračovat :)“ Pokračuj. :) Je fajn, že se snažíš dělat a tvořit nějaké dílo... To spousta lidí nedokáže. |
||
|
Časová prodleva: 3 dny
|
|||
| Hans_16 Profil |
#29 · Zasláno: 19. 10. 2012, 17:53:31
Tak začnu úplně od znova, přijde mi to docela tmavé. Koukal jsem na jiné weby pro inspiraci a docela se mi líbí ty světlejší weby. A dnes mi přišel videokurz Vytváříme web v HTML/CSS od Landi, který jsem si objednal a je opravdu nádherný. A hned jsem si pár lekcí pustil a zjistil jsem, že některé věci v CSS jsou jinak, než jsem si myslel. Je opravdu nádherný a pokud se někdo webovky učí, jako já, tak bych ho doporučil, já z něj jsem opravdu nadšený :)
http://www.landi.cz/xhtml.html zde je i 5 ukázkových lekcí, kdo by se chtěl podívat |
||
| jenikkozak Profil |
#30 · Zasláno: 19. 10. 2012, 20:26:48
Hans_16:
Kdybys použil jakpsatweb, měl bys to zadarmo a podle mého názoru i srozumitelněji. I bez refreše brousru. (Zajímavé, jak lidé, kteří chvíli pracují s angličtinou mají snahu angličtinou replacovat i czechská wordy, že?) Horší ale je, že tam neříká všechno úplně správně. Např. dává do atributů width a height rozměry s jednotkou (což se nemá). Uvádí víckrát na stránce stejné id. Jeho vyjádření jsou mnohdy matoucí. Název kotvy nemusí být jednoznačný, ale unikátní. Zápis (ne)párového tagu s lomítkem není moderní, je to zápis z XHTML. Tento kurz asi není určen pro začátečníky. Míchá tam věci, které divák z předchozích videí nezná. Na to, že jde o komerční produkt, čekal bych vyšší úroveň. Ale když se ti to líbí, tak se na to dívej. :) |
||
|
Téma pokračuje na další straně.
|
|||
0