Pre svoje návrhy obrazoviek potrebujete tieto doplnky Photoshopu; vzhľad stránky

Posledná aktualizácia článku:
2. januára 2020

Photoshop je mŕtvy!

Dobre, Photoshop pre návrhy obrazoviek je mŕtvy!

Tento dojem môže vzniknúť aspoň ľahko, ak uveríte bežným názorom a správam o responzívnom webdizajne a nových pracovných postupoch webdizajnu.

Photoshop však nie je mŕtvy pre dizajn obrazovky. Vklad sa zmenil iba.

Málokedy sa stane, že sa kompletné návrhy obrazoviek najskôr vytvoria vo Photoshope a potom sa po schválení zákazníkom implementujú s presnosťou na pixely. „V minulosti“ nebolo neobvyklé, že všetky podstránky boli najskôr navrhnuté vo Photoshope. To rýchlo vyústilo do dvojciferného počtu obrazových súborov. Zmeny boli zdĺhavé. Našťastie tie časy skončili (ok, nie vždy a všade).

Photoshop má stále svoj raison d'etre pre webových dizajnérov.

Obrázky, grafika a ilustrácie sú stále vhodne spracované, najskôr vo Photoshope a potom vložené na webovú stránku.

A tu a tam znova dokončite návrhy obrazoviek. Photoshop už má niektoré možnosti úprav pre tieto rôzne prípady. Existujú ale niektoré doplnky, ktoré rozširujú funkčnosť. A niektoré z nich sú zaujímavé najmä pre webových dizajnérov.

17 užitočných návrhárov obrazovky doplnkov Photoshop potrebuje.

Sprievodca sprievodcom

Sprievodcovia sú užitočnou pomôckou. Vytváranie veľkých mriežok s ním však môže byť vo Photoshope utrpením. Rozšírenie GuideGuide pomáha pri rozsiahlych možnostiach nastavenia.

Počet stĺpcov, šírka stĺpca, medzery, okraje sú len niektoré z možností. Pre každý návrh obrazovky vytvorený vo Photoshope je nevyhnutným nástrojom.

FlatIcon

Web FlatIcon ponúka výber z desiatok tisíc ikon na bezplatné použitie. S týmto rozšírením sú tieto ikony tiež rýchlo dostupné vo Photoshope bez toho, aby ste museli opustiť rozhranie programu.

Velositey

Velositey je rozšírenie Photoshopu na rýchle vytváranie prototypov dizajnu.

K dispozícii je veľa štandardných položiek obsahu. Jedným kliknutím myši je možné vložiť typické prvky pre rôzne oblasti obsahu, ako je hlavička, obsah alebo päta:

Zoznam funkcií má čo ponúknuť:

5 rôznych prvkov hlavičky
6 rôznych posúvačov
5 rôznych oblastí obsahu
11 rôznych päty
8 rôznych obsahových modulov
Mriežkový systém 1170px
Generátor ikon mapy
Generátor favicon
Podpora Photoshop CS6 a CC

Plugin je preto samozrejme vhodný na použitie v drôtových alebo počiatočných dizajnérskych nápadoch.

Vložené prvky nie sú vizuálnym zvýraznením. Pretože sa však vo Photoshope vytvárajú rôzne vrstvy, je možné ich rýchlo prispôsobiť a pomerne ľahko vytvoriť individuálny dizajn.

Mimochodom, mriežka vytvorená pomocou Velositey má rovnaké rozmery ako populárny rámec Bootstrap.

Užitočný návod, ktorý vysvetľuje prototypy pomocou Velositey: Prototypovanie rozložení pomocou Velositey pre Photoshop.

FontAwesome PS

Font Awesome je takzvané ikonové písmo. Písmo obsahuje viac ako 500 ikon (namiesto písmen), ktoré je možné integrovať pomocou CSS a zobrazovať a formátovať ich na webových stránkach.

Aby bolo možné do tohto fondu ikon vstúpiť pri navrhovaní vo Photoshope, je tu doplnok FontAwesome PS. Ikony potom môžete ľahko vkladať do svojich vlastných návrhov pomocou funkcie drag & drop.

Ovládanie vrstiev

Layrs Control je kolekcia 7 skriptov, ktoré uľahčujú každodennú prácu s Photoshopom.

Funkcie odľahčujú predovšetkým jednoduchú, ale zdĺhavú prácu na vrstvách:

Zmeňte názvy viacerých úrovní.
Odstrániť zobrazené efekty vrstvy.
Rastrujte efekty vrstiev.
Odstráňte prázdne vrstvy.
Rastrujte inteligentné objekty.
Nájdite podobné úrovne a priečinky na úrovni.
Konvertujte vrstvu na inteligentný objekt.

Render.ly

Pomocou Render.ly je možné exportovať kompletné súbory Photoshopu ako obrázky. To je samozrejme užitočné pri predstavovaní kompletných návrhov obrazoviek.

Čo je však skutočne špeciálne, sú doplnkové funkcie. Vďaka jednoduchým písmenovým skratkám pre názvy vrstiev je možné uložiť rôzne stavy. To je vzrušujúce napríklad pri rozbaľovacích ponukách, stavoch umiestnenia kurzora myši alebo iných efektoch myši. Týmto spôsobom je možné exportovať aj jednotlivé obrázky z vrstiev alebo ikon.

CSS3PS

CSS3PS prevádza vrstvy Photoshopu na pokyny CSS3. Patria sem predovšetkým štýly vrstiev, ale aj niektoré ďalšie nastavenia, ako napríklad veľkosť objektu alebo zaoblenie rohov.

Konverzia CSS nemusí vždy fungovať správne, ale aj tak môže ušetriť veľa práce.

Klobúk CSS

Štýly vrstiev, formátovanie textu, štýly odsekov, medzery - CSS Hat toto všetko prevedie do kódu CSS v súbore Photoshopu. A v dobrej kvalite.

Takmer 35 dolárov je do tohto doplnku dobre investovaných.

Skladateľ

Poznáte problém:

Niekoľko stránok je navrhnutých v jednom súbore Photoshopu. Potom upravíte jednu úroveň, napríklad polohu loga, a musíte vykonať zmeny aj vo všetkých ostatných konceptoch. Je to nepríjemné a náročné na čas.

Tu prichádza na rad skladateľ. Jedným kliknutím môžete upraviť jednotlivé aspekty, ako sú štýly vrstiev, umiestnenie alebo viditeľnosť, alebo všetky naraz. Ušetrí to veľa času.

Avokádo

Avocode sa označuje za most medzi návrhom a technickou implementáciou. Avocode nie je nástroj PSD to HTML, ale poskytuje niektoré funkcie na generovanie vhodného zdrojového kódu zo súboru Photoshopu.

Súbory Photoshopu je možné otvoriť v Avocode a príslušnom kóde CSS vygenerovanom z jednotlivých prvkov. Pre CSS je možné generovať textové prvky, medzery, ale aj palety farieb, ale menej a Sass. Je tiež možné extrahovať jednotlivé obrázky, a to dokonca z viacerých úrovní.

WebZap

WebZap je platený (19 dolárov) doplnok, ktorý je vhodný na rýchle prototypy návrhov.

K dispozícii sú rôzne dizajnové prvky, ktoré je možné do dizajnu vložiť kliknutím.

Retinovať to

Retinize Je to akcia Photoshopu, ktorá jednoduchým stlačením tlačidla uloží variant obrázka v dvojnásobnej alebo trojitej veľkosti. Takže ideálne na použitie na displejoch sietnice.

PageLayers

Doplnok, ktorý robí pravý opak. PageLayers vygeneruje súbor Photoshopu z webovej stránky. Na tento účel sa z každého prvku HTML vytvorí úroveň.

Je to užitočné, ak má byť napríklad (mierne) prepracovaná/prepracovaná existujúca webová stránka. Expanzia stojí necelých 35 dolárov.

Je možné extrahovať oba súbory PSD so všetkými vrstvami alebo súbory PNG. Nastaviť sa dá aj šírka webovej stránky. Stránka sa potom uloží pomocou funkcie drag & drop.

Záver

Photoshop je nažive. Aj na návrhy obrazoviek!

Vďaka vyššie uvedeným doplnkom je možné Photoshop ešte lepšie a efektívnejšie používať na každodenné práce s webovým dizajnom.

Pomohol vám zoznam doplnkov Photoshopu? Alebo ešte poznáte niektoré, ktoré som nespomenul, ale určite stoja za zmienku? Potom k komentárom ...

Ohodnoťte článok teraz!

Výsledok hodnotenia: 4,7/5. | Počet hodnotení: 23