Viem, že určite je takých programov veľa, preto sa pýtam na konkrétne skúsenosti:
(uvediem príklad): chcem si spraviť tlačítko na použitie na webovej stránke. Dajme tomu, že mám 64×64 ikonku a chcem vytvoriť tlačítko o rozmere 300×64. Tá ikonka by bola úplne nalavo a zvyšok tlačítka by tvoril nápis (povedzme KONTAKT), ktorý by v rámci volnej časti tlačítka (236×64) presne v strede a ten nápis by mal nejaké to (jednofarebné) pozadie.
Od zaciatku zle. Predne, muselo by to byt nieco velmi specialne, aby si to neurobil cez CSS, cele.
Ikona v tlacitku moze byt svg symbol umiestneny v jednom velikanskom svg “sprite”‘. So spajanim jednotlivych ikon do spritu pomoze gulp/grunt a prislusny plugin.
Vyhoda – obrovska modularita riesenia, plna responzivnost bez ohladu na rozlisenie. Moznost kedykolvek zmenit vyzor, vratane ofarbenia svg ikony ako chces a s svg @media queries aj plne zjednodusovanie grafiky pre mensie velkosti (povedzme pri malej velkosti taky detail nepotrebujes).
Nastylovat jednou farbou, definovat ako display: inline-block, pripadne pridat zaoblene rohy cez border-radius.
Brnkacka, responzivne, flat tlacidlo za par chvilok. Pri vyuziti cisto classov mas nieco, co mozes modifikovat do zblbnutia, opakovat na webe aby si sa neopakoval s kodenim atd.
Na nejake gradienty sa vyprdni, flat.
A bez png usetris kvantum http reuqestov na server, takze stranka sa bude nacitavat vyrazne rychlejsie.
K tomu css transitions a si vybaveny bez specialnych hovadin a software. Staci textovy editor a illustrator.
Nestojí. Netreba ti žiadny grafický program. V dnešnej dobe 90% tlačítok, ktoré na internete vidíš nie sú obrázky. Sú “nakreslené” cez tzv. kaskádové štýly – CSS.
Ak CSS neovládaš, na internete je veľa generátorov toho kódu.
Ja používam napríklad toto: http://buttonoptimizer.com/
Jozef: toto nemas pravdu “A bez png usetris kvantum http reuqestov na server, takze stranka sa bude nacitavat vyrazne rychlejsie.”
porovnaj si ikonu v svg a png (napr 64×64) a zistis ze png ma menej bytov (zalezi aj od zlozitosti ikony – cim zlozitost ikonky je v neprospech svg). a este ak vytvoris sprite z viacerych tak budes mat jeden request a menej kb ako pri svg. a plus to co si pisal, ze automaticky prevod na font. to je sice pekne, len fonty sa nevykresluju vsade rovnako + musis stahovat font + k nemu prisluchajuce css.
je to dobre riesenie, a urcite to zachvilu nahradi png-cka ale nie je je to dokonale a zalezi skor od konkretneho pripadu ze ci je lepsie svg alebo png. a hlavne kym este treba robit webky pre ie8 alebo nebodaj pre ie7.
kazdopadne suhlasim s tym co tu bolo pisane – button sa nerobi ako obrazok, jedine ikonku do neho. takze viac ako Moj button nepotrebujes. a v css vlozis ikonku bud ako background alebo pomocou :before/:after
Hatto, samozrejme, ze narocnost vektorov stupa, ak vyrabas hovadiny s tienikmi, komplikovanymi (extremne) tvarmi atd., alev porovnani s png to ma obrovske vyhody. Sorry, SVG je tu od roku 98, snad by sa patrilo ho aj zacat pouzivat prave na tieto ucely.
Vzdy je mozno pouzit icon font prednostne, hlavne po tom, ako sa Chrome pre Windows uz naucil pisma vykreslovat ako-tak pouzitelne. Icon font ma ale svoje limity. Inak stahujes tiez len 1 font subor (1 request) s malym objemom dat (pad desiatok kB), navyse velmi dobre gzipovatelne na serveri.
Prisluchajuce Css mas vo svojom skomprimovanom min.css subore, pricom rozpis @font-face robis do parcialneho suboru cez mixin v Scss/Sass, Less alebo whatever.
Samozrejme mas pravdu s moznym zlym vykreslovanim (hlavne IE 8 a Opera mini), ale ruku na srdce – seriously?
Png uz vazne nie. Flexibilta je velmi slaba, responzivita = velke subory + horsia skalovatelnost bitmapy a v pripade flat ikon datove uspory nie su nic extra.
Kazdopadne ak ozelieme kompatibilitu s primitivnymi browsermi (aj toto sa da poriesit gulp/grunt prevodom do PNG+Modernizr, ked nie icon font) sme vybaveni.
uzky je preto, lebo nema dostatocne mnozstvo obsahu. Sirka tlacitok je dana textom v nich, ak ju chces vacsiu, tak len pouzit velky padding, alebo flexbox.
Obsah dole (zemegula) ma proste tak definovany rozmer samotneho obrazku.
Proste tu plochu nema co vykryt preto to je take uzke :)
Vzasade nic nedefinovat v pixeloch, ale percentach. A neuzatvarat web stranku do nejakeho chlieva s pixelovo urcenou sirkou, to je picovina.