Jak na grafiku u webu?

A obrazek ve photoshopu neumis rozsekat na spoustu malych obrazku?
Dej link na obrazek a ti muzeme poradit na kolik casti a na ktere to rozsekat.

peta:
špatně čteš zadání? Viz třeba můj dotaz vedle u databází. On se neptá jak to rozsekat ale jak se dělá grafika.

ellhonza:
Když se naučíš HTML a CSS tak z tebe může být kodér, grafik ti dodá hotovou předlohu třeba v PSDčku a ty ji pak rozřežeš na jednotlivé části a za pomocí HTML a CSS vytvoříš šablonu stránky.
Pokud chceš dělat i grafiku, tak se musíš naučit aspoň nějaké základy jak pracovat s grafickým nástrojem Photoshop, Gimp apod. Pak samozřejmě potřebuješ nějaký cit pro navrhování. No a když máš nějaký projekt tak podle zadání vytvoříš grafiku a pak pokračuješ jako kodér.

Zdravim,
co sem to hrubě prolít, tahle diskuse by ti mohla pomoct.

Reaguji na ellhonzu [#7]:
Krása :). Já bych to udělal takhle:
1. Vytvořím si předlohu stránky pouze v HTML a CSS, bez nějaké obrázkové grafiky
2. Zajistím, aby se to bez obrázků dalo číst
3. Připravím si grafický návrh
4. Grafický návrh v editoru si rozdělím na jednotlivé bloky, tak, jak je to v HTML kódu
5. Každý blok si uložím zvlášť
6. K jednotlivým blokům přidám pomocí CSS připravenou grafiku
7. Pokud to nesedí, zkusím to rozřezat jinak
A nebo grafiku dodělávat rovnou při kódování.

ellhonza:
Pokud neznáš odpovědi ani na takto základní dotazy, viz. "z kolika stránek je web", pak bych doporučoval si nejdřív něco zjistit o tvorbě www stránek a až po té bych se začal zabývat grafikou.

ellhonza:
No to, co jsi sem hodil není vůbec nic těžkého. To si nemusíš ani rozvrhávat moc. Ale mám k tomu připomínku, není moc dobré používat obrázek jako hlavní pozadi už jenom z důvodu že ten obrázek má určené rozlišení a co když přijde někdo s větším rozlišením? To ta stránka začne dělat psí kusy.

„Jinak ten web je jenom index.html nebo více ?“
No záleží to na tobě, pokud chceš mít stránku o jedné stránce tak klidně. Ale v tvém případě tam budeš mít něco jako recenze.html, kontakty.html, apple.html atd..

Jo a jak tam máš to vyhledávání(nebo co to je), nech si zajít chuť myslím že bez znalosti serverového jazyka(PHP,ASP atd..) se s tím bude blbě pracovat.

Mno ani moc ne, něco podobného fakt vytvoříš za použití pár základních CSS a HTML tagů.

ellhonza:
„Jinak ten web je jenom index.html nebo více“
Je pravda, že máš zásadní nedostatky, které musíš dohnat, ale ten samotný design máš fakt hned udělaný. Na tomhle není nic těžkého, jen bych se na první pokus vyhnul toho menu nahoře pod hlavičkou, protože se to pěkně blbě odhaduje a v případě, že tam budeš chtít přidat novou položku udělá to pěkný bordel(ikdyž je pravda že tam máš velkou rezervu)

Upřímně já nejsem grafik. Nemám pro design cit a to tak, že vůbec. Každopádně fakt záleží na jaké zařízení to chceš směřovat, pokud to chceš mít na mobily tak budeš dělat spíše s nižším rozlišením.
Ale pro tvé účely asi stačí nastavit si min-width: (třeba 700 px) a width: 100%(v případě že je nižší rozlišení se nastaví těch 700px a v případě že máš monitor s vyšším rozlišením tak se hodí těch 100%
Pokud to budeš dělat procentuálně tak tam hlavně udej min-width jinak ti to v případě nízkého rozlišení rozhodí stránku.

PS: Prosím aby profesionální grafici omluvili můj "neskill" - ale myslím že pro účely začátečníka toto bohatě stačí..

ellhonza:
Jde o to jaký chceš mít design. Zda chceš mít obrázek přes celou stranu (což je pro začátečníka mnohem komplikovanější, aby to nějak vypadalo) a nebo jen "klasický" design. U toho klasického, který se většinou skládá z nějakého banneru a barevných bloků, či obrázků, dá-li se to tak nazvat, je nejdůležitější šířka celého vzhledu. Ta se určuje podle rozlišení obrazovky, které mají tví návštěvníci nastaveno.

Troufám si tvrdit, že v dnešní době už valná většina lidí na pc/ntb užívá rozlišení v šířce minimálně 1024px, ne-li více, a proto by navrhovaná stránka (jako celek) měla mít alespoň těch 1000px na šířku.

Co se týká výšky stránky, tak tam už je to dost individuální, ale čím je stránka větší na výšku, tím horší. Nikomu se nechce rolovat kolečkem někam dolů a hledat tam bůh ví jaký text. Navíc výška stránky se většinou mění, a proto je důležité aby se pozadí natahovalo úměrně s délkou stránky, tzn. když napíšeš novinku přes 10 řádků, automaticky se ti pozadí natáhne a vyplní daný text.

[#17] ellhonza
Jak do hlavičky? Do hlavičky se obrázky nedávají. Kam máš přesně na mysli?

Všeobecně se obrázky do html vkládají skrz image tag. <image src="obrazek.jpg" alt="obrazek" />

Stalker:
„Jak do hlavičky? Do hlavičky se obrázky nedávají.“
Pojem "hlavička" má více významů, nemusí to být jen sekce HEAD v HTML kódu. Třebas tato diskuse (tento web) má klikací hlavičku s obrázkem http://diskuse.jakpsatweb.cz/img/logo.png.

ellhonza:
„potřebuje je dát do hlavičky .. jak ?“
Obrázky se vkládají jako IMG, nebo jako pozadí. Pokud máš konkrétní problém, polož konkrétní dotaz a možná se bude hodit i živá ukázka.

Obrázek opatřit tagem <a href="někam.html"><img src="a.jpg" alt="strom"></a>
Měnění obrázku si pak můžeš nastavit třeba pomocí :hover, každopádně nezakládej funkčnost webu na obrázcích, pokud uděláš všechny položky menu jako obrázky co bude s lidmi co mají obrázky zablokované? Budou muset opustit jen tak tvojí stranku? To není dobrá technika.
PS: jak složené dobře? Nerozumím..

Btw:

Používej externí css soubor, každému divu(či čemukoliv jinému) přiřaď classu či id, ušetří ti po pak spoustu práce..

Za pomocí CSS a HTML lze vytvořit docela pěkné menu i bez použití obrázků. Jen si to chce trošku pohrát s barvami.
Takhle jako pozadí obrázek proč ne, ale nejhorší kombinace co můžeš udělat si prostě v malování(či v jiném grafickém editoru) nakreslit prostě tlačítko i s názvem rubriky. Opravdu sice to zní divně, ale dost lidí ty obrázky zakazuje, třeba na mobilu - kvůli FUP např.. A prostě jen proto, že autor si usmyslil že to udělá obrázky, že se nedostanu nikam dál tak nevím. Ale tak co, prostě možný návštěvník dá zpět a projíždí dál google. Ty přijdeš o návštěvník a návštěvníkovi je to fuk protože během 5 sekund najde web se stejným obsahem a bude mu fungovat vše jak má.(pochybuji že budeš mít nějaký "unikátní" projekt ve světě internetu)

PS: Hoď sem prosím ještě jednou ten odkaz - ten co jsi dal nikam nevede

Ano musím ti uznat za pravdu(na první dojem bych to sice neřekl), ale očividně se jedná o obrázky. Po zakázání javascriptu a obrázků se na té stránce nedostanu téměř nikam. Na druhou stranu tvrdím, že stejného efektu bych dosáhl i bez použití javascriptu a obrázků. Ale to je jedno. Prostě pokus se dělat web tak aby i po zakázaní obrázků, javascriptu a css byl tak aspon trošku použitelnej(neřešme design, ten se po zablokování tohodle všeho rozhodí stejně) - tzn. aby se šlo pohodlně listovat v menu, číst články atd..

PS: A už jsi udělal snad největší chybu co jsi mohl, proč ten tvůj návrh vypadá jako špatná náhražka té stránky které jsi posílal? Samozřejmě můžeš se inspirovat ale je blbé když vytvoříš jen trapnou a méně funkční náhražku. Pokus se tohodle vyvarovat, protože podle zadání sesmolí tu stránku jakýkoliv člověk co pracuje aktivně v CSS a HTML čtvrt roku(pokud to není nějaká těžká stránka za použití flashe atd..) Nejtěžší na vytvoření designu není to samotné zapsání do HTML a CSS(popř. JS, či třeba Flashe), ale prostě nějak to vymyslet sesmolit tu strukturu ve photoshopu. Ale to je na dlouho. Očividně jsi totální amatér(nic ve zlém) doporučuji aby jsi si koupil nějakou publikaci o HTML a CSS a začal od píky, je fakt že všechno najdeš na netu, ale prostě knížka je knížka :)

[#19] margin
Myslel jsem si, jen mě to celkem zmátlo. Já bych spíš použil termín jako záhlaví, či zápatí, nebo hlavička v těle dokumentu, ale to je už detail.

[#20] ellhonza
Jak už popisuje anonym, dělat navigaci z klikacích obrázků není dobré. Ideální je každému tlačítku nastavit pozadí - v tvém případě černé pozadí - a do každého tlačítka v html napsat jeho text. Pak dosáhneš kýženého efektu, aniž bys použil nějaké obrázky. Uživateli se jednak rychleji načte stránka (nebude muset do pc nic stahovat, viz. velikost obrázku) a druhak je o mnohem praktičtější. Když budeš časem chtít do své stránky přidat nějaké tlačítko, nebudeš muset nic vytvářet v grafickém editoru, ale jen edituješ tvůj html kód.

ellhonza:
Udělej to jako naprostá většina ostatních před tebou, podle tohoto návodu

Já upřímně řečeno nevím co chceš. Doporučuji ti vyhni se toho obrázku v pozadí. Aspoň pro začátek. Protože obrázek má daný rozměr(jasně může se roztahovat a smrštovat ale pozná se to na kvalitě) a prostě může se stát, že příjde prostě člověk s větším rozlišením a obrázek se bude buď opakovat, či prostě nikam nepovede ( dle nastavení) - jasně šlo by to ošetřit, ale pochybuji že ty toho jako absolutní začátečník budeš schopný.

Vykašli se prostě na takovéhle kraviny, stejně nebudeš svůj první projekt prezentovat na internetu jako plnohodnotnou stránku - uč se postupně začni prostě s něčím jednoduchým hlavička, pravé menu, obsah levé menu a patička. Je jedno jaké barvy. Protože je spíše otázka jestli si to schopný vůbec napolohovat atd..

Tohle prostě nemá cenu asi ani moc řešit, pokud máš zájem můžu ti s tima začátky pomoct třeba přes email, že bys mi poslal svoji práci a já to třeba ohodnotil a řekl ti nedostatky třeba(nejsem sice zkušený desingner ale na ty začátky asi stačím :) )