spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Matúš Jančík 9.3.2013
Hodnoť článok:
5 0

Export grafiky z PSD jedným kliknutím

Plugin Cut&Slice me pomáha ušetriť množstvo času pri exporte PNG súborov z grafiky vytvorenej v Adobe Photoshop od verzie CS6

Veľká časť práce HTML kóderov a čiastočne aj programátorov je vyrezávanie a exportovanie obrázkov z pripravenej grafiky. Predstavujem vám bezplatný plugin Cut&Slice.me pre Adobe Photoshop od verzie CS6. Túto geniálnu pomôcku vytvoril Daniel Peruho. Pomocou nej dokážete veľmi rýchlo vyexportovať jednotlivé grafické prvky z PSD grafiky do samostatných PNG súborov. Pri práci s mobilnou grafikou vám plugin pri exporte vytvorí obrázky vo viacerých veľkostiach pre jednotlivé rozlíšenia displejov.

Plugin si stiahnete zo stránky cutandslice.me a nainštalujete cez Adobe Extension Manager, ktorý je súčasťou balíka Adobe Creative Suite CS6 alebo Adobe Creative Cloud.

blog_cutandslice_installOkno samotného rozšírenia zobrazíte v Photoshope cez menu Window -> Extension -> Cut&Slice me.

Na skúšanie funkčnosti som použil Sample file zo stránky rozšírenia, v ktorom autor zorganizoval vrstvy a skupiny tak, aby bolo jednoduché vyskúšať funkčnosť pluginu.

blog_cutandslice_preview

Jednoduché používanie

  • Zorganizujete si jednotlivé prvky do vrstiev a skupín(adresárov), texty môžete povyberať mimo exportované adresáre
  • Ak chcete vyexportovať adresár ako jeden obrázok, ktorý sa oreže podľa obsahu, pridáte na koniec názvu adresára znak @
  • Ak má mať obrázok presnú veľkosť, vložte vektorový obdĺžnik, ktorý bude mať v názve iba znak #, do adresára ako prvú vrstvu
  • Pri exportovaní tlačidiel s viacerými stavmi, do adresára ktorý zlučuje všetky stavy uveďte na koniec názvu "_BTN". Opäť môžete ovplyvniť veľkosť výsledného obrázu pomocou vektorovej vrstvy #:
    Adresáre so stavmi môžete pomenovať: normal, hover, pressed, selected, disabled

Výsledné obrázky sú vo formáte PNG s priesvitnosťou a uložia sa do adresárov, ktoré sa vytvoria na mieste, kde sa nachádza upravovaný PSD súbor. Pri exporte pre Android zariadenia sa vytvoria veľkosti a adresáre pre rozlíšenia XHDPI, HDPI, LDPI, MDPI, pričom XHDPI je v mierke 1:1. Pri exporte IOS grafiky, vytvorí sa súbor v pomere 1:1, ktorý obsahuje názov @2X a súbor v polovičnom rozmere. Ak exportujete pre web, vytvárajú sa obrázky iba v mierke 1:1.

Pozrite si celý videonávod, ktorý je v 720p rozlíšení:

Článok som pôvodne publikoval na mojom blogu.

Matúš Jančík Matúš Jančík

Programátor webových, social media a mobilných applikácií v mladej firme Originals. Som fanúšik online technológii, fotografie a videa. Okrem IT som komunálny poslanec a dobrovoľný organizátor športových podujatí. Tipy a skúsenosti chcem postupne zverejňovať aj na blogu matj.sk/blog.


Hodnoť článok:
5 0

2 komentáre k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Matúš Jančík 12.3.2013 21:41:21
@Andrej Mihaliak samozrejme vsetko sa snazim riesit v CSS/HTML. No niektore ikonky a loga musis exportnut. Toto je prave genialne na to, ze si len oznacis vrstvy, ktore maju byt v jednom png, cez ctrl+g ich zlucis a len kliknes na export selected. Bleskovo mas PNG v adresari. Ak to chces robit na kompletnej grafike, tak si podla navodu pomenujes len tie vrstvy, ktore nebudes riesit cez CSS. Ostatne nechas nepomenovane a plugin ich odignoruje.
1 0 Andrej Mihaliak 12.3.2013 17:17:21
Pri webovej grafike si myslím že dnešné CSS3 a HTML5 dokáže zvládnuť skoro všetko a obrázky pomaly zanikajú ako napríklad prechody, odrazy alebo efekty textu či iné CSS3 features ale inak pekný plugin a pekné video :-) +1
Zajtra.sk > Dizajn > Photoshop > Export grafiky z PSD jedným kliknutím


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama