Velikost, rozm\u011bry i drobn\u00e9 efekty – vyzkou\u0161ejte Resizer a TinyPNG<\/h2>\n
Co se m\u011b t\u00fd\u010de, ned\u00e1m p\u0159i \u00faprav\u011b fotek dopustit na Resizer<\/a>. Je intuitivn\u00ed, rychl\u00fd a pro\u00a0jednoduch\u00e9 \u00fapravy fotek do \u010dl\u00e1nk\u016f \u010di Facebook banneru\u00a0i dostate\u010dn\u011b kvalitn\u00ed (co\u017e grafici neradi sly\u0161\u00ed :-)). Ve\u0161ker\u00e9 zm\u011bny prov\u00e1d\u00edte p\u0159\u00edmo v prohl\u00ed\u017ee\u010di. <\/strong>Kdybyste v\u0161ak cht\u011bli tvo\u0159it n\u011bco „sofistikovan\u011bj\u0161\u00edho“, najdete tu\u00a0i dal\u0161\u00ed online n\u00e1stroje, kter\u00e9 si m\u016f\u017eete zdarma st\u00e1hnout. Resizer pou\u017e\u00edv\u00e1m prim\u00e1rn\u011b na \u00fapravu rozm\u011br\u016f fotografi\u00ed<\/strong>.\u00a0Nahrajete zde p\u016fvodn\u00ed fotku (ve form\u00e1tu jpeg, png nebo gif), vep\u00ed\u0161ete po\u017eadovan\u00e9\u00a0rozm\u011bry (\u0161\u00ed\u0159ka\/v\u00fd\u0161ka v pixelech, ev. procentn\u00ed zm\u011bnu), a takto upraven\u00fd obr\u00e1zek si rovnou st\u00e1hnete do sv\u00e9ho PC. Tento online editor zvl\u00e1dne i oto\u010den\u00ed fotografie, \u00fapravu kontrastu, sytosti nebo drobn\u00e9 efekty (nap\u0159. s\u00e9pie, ostrost nebo rozmaz\u00e1n\u00ed).<\/p>\n TinyPNG<\/a>\u00a0se zase skv\u011ble hod\u00ed\u00a0pro zmen\u0161en\u00ed png a jpeg soubor\u016f<\/strong>. Op\u011bt se jedn\u00e1 o velmi intuitivn\u00ed n\u00e1stroj a v\u016fbec nevad\u00ed, \u017ee nen\u00ed v \u010de\u0161tin\u011b. Funguje na principu tzv. kvantov\u00e1n\u00ed (rozd\u011blen\u00ed re\u00e1ln\u00e9 hodnoty na kone\u010dn\u00fd po\u010det hodnot), co\u017e velmi zjednodu\u0161en\u011b znamen\u00e1, \u017ee zredukuje po\u010det barev (nap\u0159. z 24-bit PNG\u00a0soubor\u016f vytvo\u0159\u00ed a\u017e 8-bitov\u00e9\u00a0obr\u00e1zky) a odstran\u00ed p\u0159ebyte\u010dn\u00e1 metadata.\u00a0Bohu\u017eel, mus\u00edte m\u00edt p\u016fvodn\u00ed fotku ve velikosti max 5 MB, ale v\u00fdsledn\u00fd efekt zmen\u0161en\u00ed m\u016f\u017ee b\u00fdt i 70%<\/strong> a trouf\u00e1m si \u0159\u00edct, \u017ee rozd\u00edl v kvalit\u011b fotky pouh\u00fdm okem v\u016fbec nepozn\u00e1te.<\/p>\n Ne\u017e m\u011b za\u010dnou v\u0161ichni grafici za tento nadpis prokl\u00ednat, mus\u00edm \u0159\u00edct jedno: \u017ee je zvl\u00e1dnete, pravda je – ale jak je zvl\u00e1dnete, to je v\u011bc druh\u00e1. Pokud pracujete s AdWords, ur\u010dit\u011b jste neodolali a vyzkou\u0161eli GALERII REKLAM. Galerie nab\u00edz\u00ed na prvn\u00ed pohled spoustu mo\u017enost\u00ed \u2013 nenechte se v\u0161ak un\u00e9st p\u0159\u00edli\u0161n\u00fdm nad\u0161en\u00edm, kreativita tvorby je bohu\u017eel dost omezen\u00e1.<\/strong>\u00a0A pravdou je, \u017ee v\u00fdsledn\u00e9 bannery nikdy nebudou tak „vymazlen\u00e9“ a „dokonal\u00e9“ jako od va\u0161eho grafika. Na druhou stranu, v praxi jsem se u\u017e n\u011bkolikr\u00e1t setkala s t\u00edm, \u017ee ani tak nez\u00e1le\u017e\u00ed na tom, jak perfektn\u00ed design reklamy vytvo\u0159\u00edte, ale prim\u00e1rn\u011b na tom, na koho a jak je c\u00edl\u00edte. Bohu\u017eel, \u010dasto plat\u00ed, \u017ee \u010d\u00edm „hnusn\u011bj\u0161\u00ed“ banner m\u00e1te, t\u00edm v\u00edc lid\u00ed zaujmete<\/em>. Tak\u017ee dobrovoln\u011b a bez mu\u010den\u00ed p\u0159izn\u00e1v\u00e1m – n\u00ed\u017ee popsan\u00e9 tipy v\u00e1m nezaru\u010d\u00ed vy\u0161perkovan\u00e9 v\u00fdsledn\u00e9 bannery, ale pro \u00fa\u010dely v\u00fdkonn\u00e9 PPC reklamy v pohod\u011b sta\u010d\u00ed \ud83d\ude42<\/p>\n To, \u017ee va\u0161e reklamy nebudou vypadat zrovna profesion\u00e1ln\u011b je\u0161t\u011b neznamen\u00e1, \u017ee se nemus\u00edte dr\u017eet design manu\u00e1lu firmy<\/strong>. I kdy\u017e si na grafika d\u00edky Galerii reklam jen zahrajete, nikdy nezapom\u00ednejte na to, \u017ee\u00a0byste m\u011bli p\u0159i tvorb\u011b reklamy myslet minim\u00e1ln\u011b na tyto 2 v\u011bci:<\/p>\n Tzv. reklamy s obecn\u00fdm \u00fa\u010delem nyn\u00ed m\u016f\u017eete tvo\u0159it bu\u010fto z „obecn\u00e9 \u0161ablony“, nebo na\u010dten\u00edm n\u011bkolika „design\u016f“ z prvk\u016f va\u0161eho webu. Pou\u017eijete-li mo\u017enost vytvo\u0159it reklamu z webu<\/em>, myslete na tyto d\u016fle\u017eit\u00e9 post\u0159ehy:<\/p>\n Reklamy se sice mohou d\u00edky responzivit\u011b objevit t\u00e9m\u011b\u0159 kdekoli v obsahov\u00e9 s\u00edti, av\u0161ak nad jejich vzhledem nem\u00e1te nikdy 100% kontrolu \u2013 a pr\u00e1v\u011b v tom tkv\u00ed (ne)v\u00fdhoda t\u00e9to reklamy.\u00a0<\/strong>Bohu\u017eel, jednotliv\u00e9 rozm\u011bry zde nevylou\u010d\u00edte – nezb\u00fdv\u00e1 tedy, ne\u017e si a\u017e po spu\u0161t\u011bn\u00ed reklamy ov\u011b\u0159it (dle pln\u011bn\u00ed c\u00edl\u016f), zda je to probl\u00e9m \u010di nikoli.<\/p>\n Pro uk\u00e1zku jsem vytvo\u0159ila „n\u00e1vrh reklam z webu“ pro sv\u016fj blog. Vpravo vid\u00edte p\u016fvodn\u011b na\u010dten\u00fd vzhled, nalevo upravenou verzi. Posu\u010fte sami – \u017e\u00e1dn\u00fd grafick\u00fd z\u00e1zrak to sice nen\u00ed, ale po\u0159\u00e1d lep\u0161\u00ed ne\u017e p\u016fvodn\u00ed alternativa. \ud83d\ude42<\/p>\n K tomu, abyste si byli jisti, \u017ee pro sv\u00e9 navrhovan\u00e9 bannery pracujete\u00a0se spr\u00e1vn\u00fdmi barvami, v\u00e1m dopom\u016f\u017ee Eye Dropper<\/a>.\u00a0Tento\u00a0webdesign\u00e9rovsk\u00fd n\u00e1stroj v\u00e1m umo\u017en\u00ed identifikovat barvu na webu \u2013 a to hned v n\u011bkolika\u00a0k\u00f3dov\u00e1n\u00edch (rgb, hsl, hexa k\u00f3d aj.). Z\u00e1le\u017e\u00ed na tom, kter\u00fd zp\u016fsob v\u00e1m nejv\u00edce vyhovuje.\u00a0Dodr\u017een\u00ed design manu\u00e1lu je toti\u017e v tvorb\u011b reklamn\u00edch banner\u016f z\u00e1kladem, zvl\u00e1\u0161t\u011b pak v p\u0159\u00edpad\u011b remarketingov\u00fdch a brandov\u00fdch kampan\u00ed.<\/strong>\u00a0Proto byste spr\u00e1vnost barev nikdy nem\u011bli podce\u0148ovat. St\u00e1hnout si jej m\u016f\u017eete zdarma v internetov\u00e9m obchod\u011b Google Chrome.<\/p>\n Pro uk\u00e1zku jsem „pickla“ barvu op\u011bt ze sv\u00e9ho blogu. \ud83d\ude42 A kdy\u017e to v\u0161echno d\u00e1te dohromady, mohou va\u0161e responzivn\u00ed bannery vypadat t\u0159eba n\u011bjak takto. \ud83d\ude42<\/p>\n P\u0159edstavte si, \u017ee chcete pou\u017e\u00edt obr\u00e1zek ze sv\u00e9ho webu, ale \u010d\u00e1ste\u010dn\u011b ho p\u0159ekr\u00fdv\u00e1 n\u011bjak\u00fd jin\u00fd prvek. Nev\u011b\u0161te hlavu -„vy\u0159\u00edzn\u011bte“ si ho s tro\u0161kou aj\u0165a\u0159iny! \ud83d\ude42 Tajemstv\u00ed je skryto ve zdrojov\u00e9m k\u00f3du:<\/p>\n 5. Pomoc\u00ed tla\u010d\u00edtka Delete<\/em> ne\u017e\u00e1douc\u00ed prvek v elementu ve zdrojov\u00e9m k\u00f3du odstra\u0148te.<\/p>\n 6. Pomoc\u00ed PrintScreenu a Malov\u00e1n\u00ed si upraven\u00fd prvek o\u0159e\u017ete a ulo\u017ete pro dal\u0161\u00ed pot\u0159eby.<\/p>\nBannery do obsahov\u00e9 s\u00edt\u011b \u010di remarketingu? Zvl\u00e1dnete je sami!<\/h2>\n
Kr\u00e1sa banneru je jedna v\u011bc, grafick\u00e9 z\u00e1sady ale druh\u00e1!<\/h3>\n
\n
\n
![\"Porovn\u00e1n\u00ed](\"http:\/\/www.janazujova.cz\/wp-content\/uploads\/2016\/03\/porovnani_jana_zujova.png\")
<\/a><\/p>\nJak moc \u010dervenou m\u00e1m na webu? Na odhady grafika nes\u00e1z\u00ed!<\/h3>\n
![\"eye_dropper\"](\"http:\/\/www.janazujova.cz\/wp-content\/uploads\/2016\/03\/eye_dropper.png\")
<\/a><\/p>\n![\"Galerie](\"http:\/\/www.janazujova.cz\/wp-content\/uploads\/2016\/03\/jana_zujova_galerie_reklam.png\")
<\/a>Pr\u00e1ce s jednotliv\u00fdmi prvky na webu? \u017d\u00e1dn\u00fd probl\u00e9m!<\/h2>\n\n
![\"\u0160ipka](\"http:\/\/www.janazujova.cz\/wp-content\/uploads\/2016\/03\/elements_work.png\")
<\/a>Ozna\u010dte na webu\u00a0prvek, kter\u00fd chcete vymazat (Pozor: n\u011bkdy je vno\u0159en do n\u011bkolika element\u016f,\u00a0typicky volte ten, co je nejv\u00fd\u0161 a st\u00e1le je\u0161t\u011b\u00a0zachycuje vybranou oblast, se kterou pracujete).<\/li>\n<\/ol>\n![\"Nalezen\u00ed](\"http:\/\/www.janazujova.cz\/wp-content\/uploads\/2016\/03\/find_element-1.png\")
<\/a><\/p>\n![\"Odstran\u011bn\u00ed](\"http:\/\/www.janazujova.cz\/wp-content\/uploads\/2016\/03\/remove_element.png\")
<\/a><\/p>\n
![\"V\u00fdsledn\u00fd](\"http:\/\/www.janazujova.cz\/wp-content\/uploads\/2016\/03\/after_removing.png\")
<\/a><\/p>\n