Szüksége van ezekre a Photoshop bővítményekre a képernyőtervhez; Webdesign
A cikk utolsó frissítése:
2020. január 2
A Photoshop halott!
Ok, a képernyőtervek Photoshop halott!
Ez a benyomás legalább könnyen felmerülhet, ha lehet hinni az adaptív webdesignról és az új webdesign munkafolyamatokról szóló általános véleményekben és jelentésekben.
A Photoshop még nem halt meg a képernyőtervezés miatt. A tét csak megváltozott.
Ritkán fordul elő, hogy a teljes képernyőterveket először a Photoshopban hozzák létre, majd az ügyfél jóváhagyását követően pixel pontossággal valósítják meg. "A múltban" nem volt ritka, hogy minden aloldalt először a Photoshopban terveztek. Ez gyorsan kétszámjegyű képfájlokat eredményezett. A változások unalmasak voltak. Szerencsére ezek az idők elmúltak (rendben, nem mindig és mindenhol).
A Photoshop továbbra is létezik a webdesignerek számára.
A képeket, grafikákat, illusztrációkat továbbra is megfelelően feldolgozzuk először a Photoshopban, majd beillesztjük a weboldalra.
És néha megint teljes képernyőtervek. A Photoshop már rendelkezik néhány szerkesztési lehetőséggel ezekhez a különböző esetekhez. De vannak olyan bővítmények, amelyek kibővítik a funkcionalitást. Néhány közülük különösen érdekes a webdesignerek számára.
17 hasznos Photoshop plugin képernyőtervezőre van szükség.
GuideGuide
Az útmutatók hasznos eszköz. De nagy rácsok létrehozása vele fájdalmat okozhat a Photoshopban. A GuideGuide kiterjesztés széles körű beállítási lehetőségeket nyújt.
Az oszlopok száma, oszlopszélesség, térköz, margók csak néhány lehetőség. A Photoshop alkalmazásban létrehozott összes képernyőtervhez nélkülözhetetlen eszköz.
FlatIcon
A FlatIcon webhelye több tízezer ikon választékát kínálja ingyenes használatra. Ezzel a kiterjesztéssel ezek az ikonok a Photoshopban is gyorsan elérhetők anélkül, hogy el kellene hagyniuk a program felületét.
Velositey
A Velositey egy Photoshop kiterjesztés a prototípusok gyors létrehozásához.
Rengeteg standard tartalmi elem áll rendelkezésre. Az egér egyetlen kattintásával tipikus elemek illeszthetők be a különféle tartalmi területekre, például fejlécre, tartalomra vagy láblécre:
A függvénylista sokat kínál:
- 5 különböző fejléc elem
- 6 különböző csúszka
- 5 különböző tartalmi terület
- 11 különböző lábléc
- 8 különböző tartalmi modul
- 1170px rácsrendszer
- Térkép ikon generátor
- Favicon generátor
- Photoshop CS6 és CC támogatás
A beépülő modul ezért természetesen jó drótvázakhoz vagy kezdeti tervezési ötletekhez.
A beillesztett elemek nem vizuális kiemelések. Mivel azonban a Photoshopban különféle rétegek jönnek létre, ezek gyorsan beállíthatók, és az egyedi kialakítás meglehetősen egyszerűen elkészíthető.
Egyébként a Velositey-vel létrehozott rács méretei megegyeznek a népszerű Bootstrap keretrendszerrel.
Hasznos oktatóanyag ismerteti a Velositey prototípus-készítését: A Velositey prototípus-készítése a Photoshop számára.
FontAwesome PS
A Font Awesome egy úgynevezett ikon betűtípus. A betűtípus több mint 500 ikont tartalmaz (betűk helyett), amelyek CSS-en keresztül integrálhatók, és a weboldalon megjeleníthetők és formázhatók.
Annak érdekében, hogy elérhesse ezt az ikonkészletet a Photoshop tervezés közben, van egy FontAwesome PS plug-in. Ezután az ikonokat könnyedén beillesztheti saját tervei közé a drag & drop segítségével.
Rétegek ellenőrzése
A Layrs Control egy 7 szkriptből álló gyűjtemény, amely megkönnyíti a Photoshop mindennapi működését.
A funkciók mindenekelőtt megkönnyítik az egyszerű, de unalmas rétegmunkát:
- Több szint nevének módosítása.
- A megjelenített rétegeffektusok törlése.
- Raszterizálja a réteghatásokat.
- Törölje az üres rétegeket.
- Raszterizálja az intelligens tárgyakat.
- Keressen hasonló szinteket és szintmappákat.
- Konvertálja a réteget intelligens objektummá.
Render.ly
A Render.ly segítségével a teljes Photoshop fájlok képként exportálhatók. Ez természetesen hasznos a teljes képernyőtervek bemutatásakor.
De ami igazán különleges, azok a kiegészítő funkciók. A rétegnevek egyszerű betű rövidítésének köszönhetően különböző állapotok menthetők. Ez izgalmas például a legördülő menük, az egérmutató állapotok vagy más egérmutató effektusok segítségével. A rétegekből vagy ikonokból akár egyetlen kép is exportálható ilyen módon.
CSS3PS
A CSS3PS átalakítja a Photoshop rétegeket CSS3 utasításokká. Ez magában foglalja mindenekelőtt a rétegstílusokat, de néhány egyéb beállítást is, például egy objektum méretét vagy a sarkok lekerekítését.
A CSS-átalakítás nem mindig működik megfelelően, de még így is rengeteg munkát takaríthat meg.
CSS Hat
Rétegstílusok, szövegformázás, bekezdésstílusok, térköz - A CSS Hat mindezt CSS-kóddá alakítja egy Photoshop-fájlban. És jó minőségben.
A majdnem 35 dollárt jól fektették ebbe a bővítménybe.
Zeneszerző
Tudja a problémát:
Több oldal van megtervezve egy Photoshop fájlban. Ezután beállít egy szintet, pl. A logó helyzetét, és a többi piszkozatban is meg kell változtatnia. Bosszantó és időigényes.
Itt jön be a zeneszerző. Egy kattintással beállíthatja az egyes szempontokat, például a rétegstílusokat, a pozícionálást vagy a láthatóságot, vagy mindegyiket egyszerre. Ez rengeteg időt takarít meg.
Avocode
Az Avocode a hídnak nevezi magát a tervezés és a műszaki megvalósítás között. Az Avocode nem PSD-HTML eszköz, de bizonyos funkciókat biztosít ahhoz, hogy megfelelő forráskódot hozzon létre egy Photoshop fájlból.
A Photoshop fájlok az Avocode-ban nyithatók meg, és a megfelelő CSS-kódot az egyes elemekből lehet létrehozni. Szöveges elemek, térköz, de színpaletta is előállítható a CSS-hez, de a Less és a Sass. Az egyes képek akár több szintről is kinyerhetők.
WebZap
A WebZap egy fizetős (19 USD) plugin, amely kiválóan alkalmas a prototípusok gyors tervezéséhez.
Különféle tervezési elemek állnak rendelkezésre, amelyeket egy kattintással be lehet illeszteni a tervbe.
Retinizálja
Retinizálás Ez egy Photoshop-művelet, amely egy gombnyomással kettős és/vagy hármas méretben menti a kép egy változatát. Így tökéletes a retina kijelzőin való használatra.
Oldalrétegek
Egy plugin, amely az ellenkezőjét teszi. A PageLayers létrehoz egy Photoshop fájlt egy webhelyről. Minden HTML elemből szintet hozunk létre.
Ez akkor hasznos, ha például egy meglévő weboldalt (kissé) át akarunk alakítani/átalakítani. A terjeszkedés alig 35 dollárba kerül.
Mindkét PSD fájl, minden réteggel, vagy PNG fájl kivonható. A weboldal szélessége szintén beállítható. Az oldalt ezután a drag & drop segítségével menti.
Következtetés
A Photoshop életben van. Képernyőtervekhez is!
A fent bemutatott beépülő modulokkal a Photoshop még jobban és hatékonyabban használható a napi webtervezési munkákhoz.
Segített a Photoshop bővítmények listája? Vagy tudsz még néhányat, amit még nem említettem, de mindenképpen érdemes megemlíteni? Majd a megjegyzésekhez ...
Értékeld a cikket most!
Az értékelés eredménye: 4.7/5. | Értékelések száma: 23