« 1 2 »
Autor Zpráva
ellhonza
Profil
Ahoj řekněme, že se naučím HTML a CSS ? Jak se pak vůbec třeba dělá ta grafika na webu v Photoshopu ? Prostě si navrhnu stránku, ale pořád to je jen obrázek.... Nějaký články tipy nebo krátké vysvětlení ? DÍKY ;)
Moderátor Chamurappi: Před otazníkem se nedělá mezera.
peta
Profil
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.
aDAm
Profil
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.
ellhonza
Profil
aDAm: Chtěl bych se naučit oboje ;)
Takže pro začátek se naučit hlavně to HTML a CSS stačí ? V PSD už jsem něco dělal, ale není to nic extra zkoušel jsem x tutoriálů na youtube/psdtuts... jinak moc nevím jak se PS pořádně naučit si zkusím třeba nějaký tutoriál, ale další den to třeba už nedokážu zopakovat když je tam třeba 50 kroků :-/
ellhonza
Profil
Zdravím dejme tomu, že si v PSD vytvořím něco takového: cdn.designinstruct.com/files/83-elegant_photography_layout/final-small.jpg

Nevíte o nějaké ukázce jak se to může převádět do kódů ? :) Díky
Moderátor jenikkozak: Přesunuto z duplicitního vlákna.
Mimochodem, před otazníkem se nepíše mezera.
preca1
Profil
Zdravim,
co sem to hrubě prolít, tahle diskuse by ti mohla pomoct.
ellhonza
Profil
Tady jsem jen zkusil udělat takovou kravinu, ale jako celek mi vznikne jeden obrázek .. není to špatně ? Nemá být každý blok samostatný obrázek ? Díky

http://jpeg.cz/images/2013/04/27/ASxVM.jpg
http://jpeg.cz/images/2013/04/27/aDoNr.jpg
http://jpeg.cz/images/2013/04/27/4LBRd.jpg
http://jpeg.cz/images/2013/04/27/kP9e6.jpg
Fisir
Profil
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
Profil
http://jpeg.cz/images/2013/04/29/igpLa.jpg

Tady jsem si ze srandy zkoušel něco v PS....



Jinak jaký rozlišené vůbec navrhovat ?
Jak se to pak všechno rozřezává ? Jak na bloky ? Je na to nějaký speciální nástroj v PS? Fakt se mi to nechce uložovat jednotlivě naráz...
Jinak pak teda vůbec nevím jak to do sebe poskládat no... snažím se ten návrh dělat co nejjednodušší ?
Jinak ten web je jenom index.html nebo více ?
Stalker
Profil
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.
Anonymní
Profil *
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.
ellhonza
Profil
Jo v poho tohle není konečný desing jen jsem si nějak zkoušel jestli by to šlo. Ale dřív budu muset ještě študovat koukám..
Anonymní
Profil *
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)
ellhonza
Profil
To menu je důležitý tam bych chtěl mít jednotlivé sekce HRY-APLIKACE... ještě přesně nevím no...



Ale třeba pořád nevím jak je to s tím rozlišením ? Kolik si mám nastavit rozlišení případně i dpi ? :)
A stránku ještě prodloužit asi co ? Dole totiž ještě nějaký info většinou bývá.. ;)



Předem díky... ;)
Anonymní
Profil *
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čí..
Stalker
Profil
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.
ellhonza
Profil
Menší dotaz mám dva takový obdelníkový jpegy a potřebuje je dát do hlavičky .. jak ?
Stalker
Profil
[#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" />
margin
Profil *
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.
ellhonza
Profil
Zajímalo by mě jestli to mám složená dobře a jak z toho udělat klikací obrázek.

Www.web874.g6.cz
Anonymní
Profil *
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:
<div style="width: 1366px; margin-left: auto; margin-right: auto;">

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..
ellhonza
Profil
A jinak udělat menu než obrazkamat? Pro příklad prekonanie.cz má to menu nahoře taky s obrázkama nebo ne ? :)
Anonymní
Profil *
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
ellhonza
Profil
Ups promiň mobil mi to n nějak překonal. Www.dotekomanie.cz
Anonymní
Profil *
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 :)
Stalker
Profil
[#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
Profil
Je možné, že jsem to přehlédl, ale chci si něco zkusit tady je ukázka..

http://jpeg.cz/images/2013/04/30/H6b0J.jpg
pavuk
Profil
ellhonza:
Udělej to jako naprostá většina ostatních před tebou, podle tohoto návodu
Anonymní
Profil *
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 :) )
ellhonza
Profil
To by bylo fajn ten email ;) Jinak asi máš pravdu hrozně mě sice přitahuje naplácat na pozadí nějaký obrázky.. ;D
« 1 2 »

Vaše odpověď

Mohlo by se hodit

  • Pokud přikládáte obrázkové ukázky, dbejte prosím na jejich přijatelnou (datovou) velikost.
  • Uvádějte v titulku grafický program, na který se ptáte.

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: