Tvorba webdesignu

[GhostCZ]

Dobrý den,

začínám dělat web designy a chtěl bych jsem se zeptat jaké rozměry bych měl používat, budu to dělat ve photoshopu bohužel jsem v tomto začátečník, designy chci dělat tak aby to bylo dobře vidět na telefonu, tabletu, notebooku a počítači, předem děkuji za jakoukoliv odpověď.

[x-rated]

velikost může bejt libovolná, fantazii se meze nekladou
pár tipů:
1) pokud bude na webu nějaká celoplošná tapeta nebo pozadí přes celou šířku, měla by mít v návrhu (nebo bejt k dispozici) se šířkou aspoň 2560px - kvůli QHD a UHD displejům... na UHD se už nejspíš mění měřítko, aby nebyly objekty moc malinký, takže těch 2560px by mělo bejt ok
2) šířka nejmenších a nejstarších běžně používanejch mobilů je 320px, takže netřeba myslet na nic užšího, jenom by bylo fajn, aby se ze zobrazení třeba na počítači u nějakýho sloupečku nemuselo kvůli mobilu upravovat pár pixelů, to je největší vopruz příklad - pokud má nějaká část stránky v desktopovym rozložení šířku 320px, tak se na mobil vejde bez dalších úprav, pokud by ale měla třeba o 10px víc, už se to musí dál řešit, může bejt potřeba upravovat jeho obsah a je s tim kvůli několika pixelům zbytečný patlání navíc
jenom je třeba taky myslet na případný odsazení takovejch objektů od okraje mobilního displeje, např. 10px zleva a zprava, v takovym případě by měl ten objekt mít maximální šířku do 300px, aby to vypadalo hezky

[GhostCZ]

Takže když si dám nový projekt ve photoshopu tak to mám dát 2560x2560px nebo 2560x300?

[x-rated]

2560px na šířku, vejška podle dýlky webu

[GhostCZ]

Ok díky takže to může být šířka 2560px a výška 1920px např?

[x-rated]

no třeba, vejška bude na každý dílčí stránce jiná podle obsahu

[Grander]

Omg, rozhodně ne 2560px šířku proboha!!! Dochází vám, jak se takovej obrázek asi bude načítat na mobilu a kolik dat se jeho přenesením spotřebuje? Na UHD displeje se vykašli, je jich zatím tak pár procent, a v takovém případě se prostě obrázek roztáhne (z menšího rozměru) při vykreslování. Osobně jsem jako obrázek na pozadí použil použil šířku myslím 1360px, a na 1920px displeji to vypadá dobře.
Jinak ještě existuje něco jako responzivní design, ale to je na začátečníka ještě vzdálená věc.
Jinak, pokud nemáš žádné zkušenosti s tvorbou (kodováním) stránek, tak bych asi nedoporučoval začínat kreslením designu ve Photoshopu. Zkus spíš v nějakém webovém editoru (např. Dreamveawer) vytvořit kostru stránek (jsou tam i šablony s různými počty sloupců apod.) a do ní postupně přidávat jednolivé graf. prvky, např. hlavičku. Tak pochopíš, jak to celé vlastně funguje. Nebo si stáhni nějakou HTML šablonu (třeba zde: http://templated.co/), podívej se, jak funguje a zkus místo obrázků v šabloně vložit své vlastní obrázky (použij rozměry původních obrázků v šabloně, a nebo tam vlož rozměry jiné, a uvidíš jak se to bude chovat, a pochopíš tak jak to celé funguje.)

[cervcek]

Jinak, pokud nemáš žádné zkušenosti s tvorbou (kodováním) stránek, tak bych asi nedoporučoval začínat kreslením designu ve Photoshopu. Zkus spíš v nějakém webovém editoru (např. Dreamveawer) vytvořit kostru stránek (jsou tam i šablony s různými počty sloupců apod.) a do ní postupně přidávat jednolivé graf. prvky, např. hlavičku.

To přeci nemusí, dnes se to už dělí na designery a programátory webů. Sice není naškodu, když umíš jedno a od druhého základy, ale znám pár designerů, kteří tvoří čistě v Photoshopu, nebo Illustratoru a o HTML, CSS, nebo PHP neví vůbec nic. Zadavatel práce si to po nich nechá rozřezat do položek a předá to programátorovi, který to nakóduje. Takže by se dalo říct, že to jsou v dnešním světě webovek dva rozdílné světy.

[Grander]

Jinak, pokud nemáš žádné zkušenosti s tvorbou (kodováním) stránek, tak bych asi nedoporučoval začínat kreslením designu ve Photoshopu. Zkus spíš v nějakém webovém editoru (např. Dreamveawer) vytvořit kostru stránek (jsou tam i šablony s různými počty sloupců apod.) a do ní postupně přidávat jednolivé graf. prvky, např. hlavičku.

To přeci nemusí, dnes se to už dělí na designery a programátory webů. Sice není naškodu, když umíš jedno a od druhého základy, ale znám pár designerů, kteří tvoří čistě v Photoshopu, nebo Illustratoru a o HTML, CSS, nebo PHP neví vůbec nic. Zadavatel práce si to po nich nechá rozřezat do položek a předá to programátorovi, který to nakóduje. Takže by se dalo říct, že to jsou v dnešním světě webovek dva rozdílné světy.

Jasný, to je pravda, já jen, že když už se ptá, jaké rozměry má použít aby to vypadalo dobře např. na mobilu, tak odpověď bude znát když bude vědět, jak to vlastně funguje.

[x-rated]

1) Omg, rozhodně ne 2560px šířku proboha!!! Dochází vám, jak se takovej obrázek asi bude načítat na mobilu a kolik dat se jeho přenesením spotřebuje? Na UHD displeje se vykašli, je jich zatím tak pár procent, a v takovém případě se prostě obrázek roztáhne (z menšího rozměru) při vykreslování. Osobně jsem jako obrázek na pozadí použil použil šířku myslím 1360px, a na 1920px displeji to vypadá dobře.
2) Jinak ještě existuje něco jako responzivní design, ale to je na začátečníka ještě vzdálená věc.

1) omg lol, při správný optimalizaci určitě ne víc než pár stovek KB roztahování malýho obrázku je prasárna a jestli někdo nevidí ve kvalitě rozdíl, je nejspíš slepej
2) responzivní design neni něco jako, ale běžná součást tvorby webů, dokonce na něm ani neni nic moc komplikovanýho, jenom se přepisuje dřív definovaný css jinym

[Petr Hnátek]

V CSS3 existuje:

Kód: Vybrat vše

background-size: cover;

Pokud já dělám na web obrázkové pozadí, tak ho dávám v rozměrech 1920x1080 s kódem uvedeným výše.
Co se týče velikosti, tak něco okolo 200KB.

[GhostCZ]

Děkuji zkusím něco vytvořit a potom vám sem hodím screen, aby jste mi to třeba ohodnotili.