Tvorba webdesignu Vyřešeno

Tvorba grafiky, grafické programy a vše o nich…

Moderátor: Mods_senior

GhostCZ
Level 3.5
Level 3.5
Příspěvky: 737
Registrován: listopad 13
Bydliště: Humpolec
Pohlaví: Muž

Tvorba webdesignu  Vyřešeno

Příspěvekod GhostCZ » 20 říj 2015 16:04

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ěď.


Chybama se člověk učí.

Reklama
Uživatelský avatar
x-rated
Level 5
Level 5
Příspěvky: 2134
Registrován: říjen 14
Bydliště: Praha
Pohlaví: Muž

Re: Tvorba webdesignu

Příspěvekod x-rated » 20 říj 2015 16:52

velikost může bejt libovolná, fantazii se meze nekladou :smile:
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 :smile:
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
Intel Core i7-6700K - 4,6 GHzAsus Maximus VIII Gene - Intel Z170Kingston HyperX Predator HX430C15PBK4/32 - 4x 8 GB, 3,1 GHzKingston HyperX Predator SHPM2280P2/240G - 240 GB, 1,4/0,6 GB/sCrative SB X-Fi Titanium HDSeasonic SS-520FL2 F3 - 520 W, 43 A, 80Plus PlatinumDell UP2715K 27" AH-IPS 5120x2880

GhostCZ
Level 3.5
Level 3.5
Příspěvky: 737
Registrován: listopad 13
Bydliště: Humpolec
Pohlaví: Muž

Re: Tvorba webdesignu

Příspěvekod GhostCZ » 20 říj 2015 17:22

Takže když si dám nový projekt ve photoshopu tak to mám dát 2560x2560px nebo 2560x300?
Chybama se člověk učí.

Uživatelský avatar
x-rated
Level 5
Level 5
Příspěvky: 2134
Registrován: říjen 14
Bydliště: Praha
Pohlaví: Muž

Re: Tvorba webdesignu

Příspěvekod x-rated » 20 říj 2015 17:36

2560px na šířku, vejška podle dýlky webu :smile:
Intel Core i7-6700K - 4,6 GHzAsus Maximus VIII Gene - Intel Z170Kingston HyperX Predator HX430C15PBK4/32 - 4x 8 GB, 3,1 GHzKingston HyperX Predator SHPM2280P2/240G - 240 GB, 1,4/0,6 GB/sCrative SB X-Fi Titanium HDSeasonic SS-520FL2 F3 - 520 W, 43 A, 80Plus PlatinumDell UP2715K 27" AH-IPS 5120x2880

GhostCZ
Level 3.5
Level 3.5
Příspěvky: 737
Registrován: listopad 13
Bydliště: Humpolec
Pohlaví: Muž

Re: Tvorba webdesignu

Příspěvekod GhostCZ » 20 říj 2015 17:54

Ok díky takže to může být šířka 2560px a výška 1920px např?
Chybama se člověk učí.

Uživatelský avatar
x-rated
Level 5
Level 5
Příspěvky: 2134
Registrován: říjen 14
Bydliště: Praha
Pohlaví: Muž

Re: Tvorba webdesignu

Příspěvekod x-rated » 20 říj 2015 18:06

no třeba, vejška bude na každý dílčí stránce jiná podle obsahu
Intel Core i7-6700K - 4,6 GHzAsus Maximus VIII Gene - Intel Z170Kingston HyperX Predator HX430C15PBK4/32 - 4x 8 GB, 3,1 GHzKingston HyperX Predator SHPM2280P2/240G - 240 GB, 1,4/0,6 GB/sCrative SB X-Fi Titanium HDSeasonic SS-520FL2 F3 - 520 W, 43 A, 80Plus PlatinumDell UP2715K 27" AH-IPS 5120x2880

Uživatelský avatar
Grander
Level 3
Level 3
Příspěvky: 419
Registrován: leden 12
Pohlaví: Muž

Re: Tvorba webdesignu

Příspěvekod Grander » 22 říj 2015 20:30

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.)

Uživatelský avatar
cervcek
Level 4.5
Level 4.5
Příspěvky: 1818
Registrován: leden 12
Bydliště: Vrchlabí
Pohlaví: Muž

Re: Tvorba webdesignu

Příspěvekod cervcek » 22 říj 2015 20:58

Grander píše: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.
PC: GA-B85M-D3H, i5-4460, Kingston HyperX FURY(2x4GB)1600MHz, Radeon HD 6570, Seasonic energy knight ss-500et, Cooler Master N400, Win 10 Pro 64bit
Lenovo ThinkPad Edge E530 A2G: Win10 Pro 64bit
ASUS Transformer Book Flip TP200SA

Uživatelský avatar
Grander
Level 3
Level 3
Příspěvky: 419
Registrován: leden 12
Pohlaví: Muž

Re: Tvorba webdesignu

Příspěvekod Grander » 22 říj 2015 21:13

cervcek píše:
Grander píše: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.

Uživatelský avatar
x-rated
Level 5
Level 5
Příspěvky: 2134
Registrován: říjen 14
Bydliště: Praha
Pohlaví: Muž

Re: Tvorba webdesignu

Příspěvekod x-rated » 23 říj 2015 05:09

Grander píše: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 :lol: 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 :roll:
Intel Core i7-6700K - 4,6 GHzAsus Maximus VIII Gene - Intel Z170Kingston HyperX Predator HX430C15PBK4/32 - 4x 8 GB, 3,1 GHzKingston HyperX Predator SHPM2280P2/240G - 240 GB, 1,4/0,6 GB/sCrative SB X-Fi Titanium HDSeasonic SS-520FL2 F3 - 520 W, 43 A, 80Plus PlatinumDell UP2715K 27" AH-IPS 5120x2880

Uživatelský avatar
Petr Hnátek
Level 3.5
Level 3.5
Příspěvky: 651
Registrován: listopad 13
Pohlaví: Muž

Re: Tvorba webdesignu

Příspěvekod Petr Hnátek » 23 říj 2015 08:02

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
Level 3.5
Level 3.5
Příspěvky: 737
Registrován: listopad 13
Bydliště: Humpolec
Pohlaví: Muž

Re: Tvorba webdesignu

Příspěvekod GhostCZ » 26 říj 2015 02:22

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


  • Mohlo by vás zajímat
    Odpovědi
    Zobrazení
    Poslední příspěvek
  • Tvorba 2D her
    od Deibellos » 17 srp 2017 17:05 » v Hry
    19
    569
    od Deibellos
    19 srp 2017 11:35
  • Tvorba webu
    od xXmateesXx » 19 čer 2017 20:34 » v Programování a tvorba webu
    3
    338
    od xXmateesXx
    20 čer 2017 21:30
  • Tvorba mapy
    od Martin Nováček » 25 lis 2016 21:04 » v Design a grafické editory
    2
    443
    od Luking
    11 dub 2017 21:02
  • Tvorba Minecraft serveru
    od Nikushka1994 » 23 lis 2016 12:01 » v Hry
    1
    269
    od johnspad1
    06 pro 2016 18:07
  • H: Tvorba intra a outra!
    od HelFix » 30 říj 2016 16:47 » v Design a grafické editory
    2
    550
    od HelFix
    10 lis 2016 20:08

Zpět na “Design a grafické editory”

Kdo je online

Uživatelé prohlížející si toto fórum: CommonCrawl [Bot] a 0 hostů