Miért kellene a Photoshopról a Sketchre váltania?

Az elmúlt egy-két évben a Bohemian Coding Sketch alkalmazása a Photoshop „jobb” alternatívájaként lendületet vett a dicsőséges internetes területeken. Ennek a bőséges dicséretnek a legnagyobb részét a webes és az interfész-tervező közösség nyerte. Ha olyanok vagytok, mint én, akkor mindig új eszközöket és jobb alternatívákat keresnek egy meglévő munkafolyamat számára. Először azonban kísérleti jelleggel gondoltam a 20 éves Photoshop stafétám átadására.

Többnyire a Photoshop csinálja a trükköt, és elég jól csinálja. - Miért váltsunk? Azt gondoltam. A Photoshop parancsikonok a második nyelvem. Egy adott hatás vagy feladat végrehajtása már nem igényel sok agyi erőt, mivel valószínűleg már sokszor csináltam valami hasonlót. Ez az öreg kutya arra gondolt, hogy a Sketch az új iskolás gyerekeknek szól.

Ahogy a Sketch körüli fecsegés fokozódott, a kíváncsiságom végül a legjobbat hozta ki belőlem. Magamnak kellett megnéznem, miért gyulladt ki Sketch társaim között. Amikor új projektbe kezdtem, úgy döntöttem, hogy itt a pillanat. Ha meg akartam csinálni, akkor egy hétig mindent beleadtam.

Bezártam a Photoshopot, letöltöttem egy 30 napos Sketch próbaverziót, és lebegtem a mélységben, flotációs eszköz nélkül, remélve, hogy elég hosszú ideig tartom a fejem a víz felett, hogy rájöjjek, mi a hype. Ha a Sketch felfedezésére gondol, ajánlom ezt a megközelítést.

Két-három napon belül meg voltam róla győződve. Ismét lelkesen éreztem magam egy szoftver megnyitása miatt, és azonnal kihasználtam az előnyöket. Gyorsan jól éreztem magam az új felület megtanulásakor. A Photoshop átfedése éppen elég volt. Szerelmes voltam. 'Igen!' Azt gondoltam.

Ebben a cikkben a Sketch néhány alapvető jellemzőjével foglalkozom, és összehasonlítom őket a Photoshop megfelelőjével. Ha a kerítésen áll, a Photoshop jobb (és sokkal olcsóbb) alternatíváját keresi, vagy kíváncsi a növekvő népszerűségre, akkor olvassa el.

Helló barát

A Sketch kizárólag Mac-hez készült. Ha valaha is használta az Apple szoftverét, különösen a Keynote-ot, akkor észreveszi a felhasználói felületének hasonlóságát

A Sketch kizárólag Mac-hez készült. Ha valaha is használta az Apple szoftverét, különösen a Keynote-ot, akkor észreveszi a felhasználói felületének hasonlóságát

A Sketch kizárólag a Mac OS X-re vonatkozik, és a Bohemian Coding GYIK részének kinézete szerint még a Windows és a Linux támogatását sem fontolja meg. Ez jó nekünk, régóta Mac felhasználóknak. Ha egyáltalán ismeri az OS X termelékenységi alkalmazásait (Pages, Keynote, Numbers), vagy használt valamilyen régebbi, megszűnt szoftvert az Apple-től (nézlek iWeb-et), azonnal úgy érzi, mintha belefutott volna egy régi barát, akinek érettebb szakálla nőtt.

Akárcsak a Keynote-ban, amikor elkezdtem használni, a Sketch-ben először a felső eszköztár testreszabását tettem. Ezt úgy teheti meg, hogy egyszerűen rákattint a jobb egérgombbal, és a lehető legtöbb elemet feldobja rá.

Gyorsbillentyűket

Míg a Photoshop mindig eszköztárat nézeget, a Sketch néhány eszköze eleinte kissé el van tolva

Míg a Photoshop mindig eszköztárat nézeget, a Sketch néhány eszköze eleinte kissé el van tolva

Számos barátomtól és a Twitter-től kapott tanács az volt, hogy a lehető leggyorsabban megtanuljam a parancsikonokat. Az eszközök vizuális útmutatása azonban segített abban, hogy jobban megértsem a Sketch képességeit és a különféle feladatok kezelését. Sok eszköz félig ismerős lesz a Photoshopból, de ezek most különböző helyeken találhatók. Sketch esetében egységesebb terület.

A Photoshopról való áttérés elősegítése érdekében néhány gyakran használt billentyűparancsot hoztam létre egyedi billentyűparancsok létrehozásával az OS X rendszerben. Ha még nem ismeri ezt a folyamatot, készüljön fel a szerelemre. Egész egyszerűen elvégezhető közvetlenül a Mac Rendszerbeállításaiból. Ezenkívül itt van a praktikus vázlatparancsok listája, hogy jobban megismerkedjen: sketchshortcuts.com .

A hangsúly a hangsúly

Félreértés ne essék: A Photoshop elvégzi a weboldalt és a felhasználói felület modellezését, és jól csinálja. Rengeteg más dolgot is jól csinál. Célja, hogy mindenki számára az eszköz legyen. És tudod mit? Rendben van. Az egyik kérdés azonban az, hogy hiányzik a fókusz, mint a webes és a felhasználói felület tervezésére szolgáló alkalmazás.

A Sketch elsősorban azokra összpontosít, amelyek weboldalakat, interfészeket és ikonokat terveznek. A Photoshophoz képest a Sketch menüje lecsupaszított. Kellemes friss levegő. Nincs több harc a rendetlenségen keresztül, amely nem feltétlenül fordul az internetre. A Sketch eszközei és értékei abban rejlenek, hogy mit lehet könnyen lefordítani CSS-re és általában a böngészőkre.

Például: az elrendezés beállításainak megadása és testreszabása (azaz rács létrehozása). A Vázlatban az előre definiált mezők lehetővé teszik a rács teljes szélességének, ereszcsatornáinak, oszlopainak és sorainak testreszabását. Mint aki mindig adaptív rácsokkal dolgozik, állandóan ezekben a beállításokban vagyok, mielőtt új projektet kezdenék.

Rajztábla előbeállítások

Egy másik szolgáltatás, amely a Sketch hangsúlyt fekteti az internetre és a kezelőfelületre, az előre beállított sablonok és a rajztábla előbeállításai. És ezért hálás vagyok.

Tegyük fel, hogy új iOS-alkalmazásprojektet indít. Létrehozhat egy új projektet, mint amit a Photoshopban megszokott, vagy kiválaszthatja az „iOS UI Design” sablonvázlatot, amelyet a Fájl> Új sablonból részben talál. Előnye, hogy a Sketch először egy iOS felhasználói felületet kínál az iPhone alkalmazások gyors kigúnyolásához és mondjuk a natív iOS billentyűzet behúzásához a makettbe.

A közelmúltban térképnézetet gúnyoltam egy foglalási alkalmazáshoz, amin dolgoztam. Nem kellett külön fájlt megnyitnom, vagy vadásznom kellett egy iOS térképmockup után. Csak átváltott az Elemek oldalamra, másolta és beillesztette.

A tökéletességig méretezve

További 20 képpontot kell hozzáadnia ahhoz a 180 képpontos gombhoz? Csak írja be a 180 + 20 parancsot

További 20 képpontot kell hozzáadnia ahhoz a 180 képpontos gombhoz? Csak írja be a 180 + 20 parancsot

A Photoshophoz hasonlóan a Sketch Inspector lehetővé teszi a pontos méret és pozíció meghatározását a rajztáblán. A Sketchnek azonban van egy apró titka a méret- és pozícióellenőr előtt. Érti a matematikát! Nem csak összeadás, kivonás, szorzás és osztás, hanem a százalékok is.

Szeretne eltolni egy gombot 20 pixel balra? Csak adja hozzá a „-20” -t a mezőhöz. Szeretne egy képet, amely kitölti a teljes rajztábla felét? Csak írja be az 50% -ot a szélesség mezőbe. Ragyogó!

Egy projekt, egy fájl

Míg a Sketch abban különbözik a Photoshop-tól, hogy az összes oldalát egy dokumentumban tárolja, mindkettő hasonló módon kezeli a rétegezést, a csoportosítást és a szervezést

Míg a Sketch abban különbözik a Photoshop-tól, hogy az összes oldalát egy dokumentumban tárolja, mindkettő hasonló módon kezeli a rétegezést, a csoportosítást és a szervezést

A Photoshop alkalmazással a projektem és a fájlszerkezetem így nézett ki:

BigTimeClient mappa
- BigTimeClient_landing-page.psd
- BigTimeClient_about-page.psd
- BigTimeClient_contact-page.psd

A Sketch kicsit másképp kezeli a dolgokat. Egy Sketch fájl tartalmazza az összes oldalt és rajztáblát egy dokumentumban. Először aggódtam, hogy ez lerontja-e a Mac teljesítményét, azonban azóta nagyjából 30 képernyővel rendelkező iOS-alkalmazásokat terveztem, és nem tapasztaltam jelentős teljesítményproblémákat.

Ennek a megközelítésnek az a fő előnye, hogy az összes képernyőjét egymás mellett érheti el és tekintheti meg, így sokkal könnyebb változtatni és összehasonlítani a dolgokat. Ha különféle érzékeny töréspontokat gúnyol, akkor nagyon szeretni fogja.

A közelmúltban a Photoshop bemutatta több rajztábla verzióját. A Sketch-ben azonban lehetőség van az összes rajztábla oldalakba rendezésére egy dokumentumon belül, ez a funkció sokkal erőteljesebbé válik. Egyébként mindkét alkalmazás több rajztábla nagyon hasonlóan működik.

A Sketch rétegpalettája bizonyos szintű kényelmet hozott az alkalmazás első megnyitásakor, mivel különféle módon utánozza a Photoshopot. A Photoshophoz hasonlóan itt is megtekintheti, átnevezheti, csoportokat (mappákat) és elemeket kereshet a projektben.

Egy fájl mindenkinek megfelel

A Photoshop alkalmazásban általában három (vagy több) fájlelemet hoznék létre. Az egyik @ 1x, a másik @ 2x, másik pedig @ 3x. Azok külön mentése unalmas volt. Hacsak nem 100% -ban dolgoztál vektorobjektumokkal és elemekkel, ez fájdalmas lett. A Sketch alkalmazásban még egyetlen raszterizált eszköz vagy elem sincs. Nos, persze, ha nem húz be egyet.

Amikor iOS-alkalmazások tervezési projektjét készítettem Photoshop-ban, sokkal nagyobb méretben terveztem a képernyőn, és teszteltem egy tükröző alkalmazást, az Skala Preview alkalmazást az iPhone -mon.

A Sketch használatával a Retina eszközökkel és eszközökkel végzett munkafolyamatom drámai módon megváltozott és javult. Most a szokásos készülékmérettel tervezem. Mivel a Sketch-ben minden alapértelmezés szerint vektor, nem kell attól tartanom, hogy a rajztáblám rendellenesen nagy lesz az asztalomon, így előnézhetem a munkát tükrözésen keresztül (most a Sketch Mirror segítségével). Az asztali gépről a mobilra való munka természetesebbnek tűnik.

Ráadásul a különféle méretű elemek mentése olyan egyszerű, mint az exportálás gombra kattintva annyi méretet és fájlformátumot hozzáadni, amennyit csak akar, és ... nos, ennyi. Akár el is mentheti a rétegeket és csoportokat az asztalra, hogy mentse a dolgokat - bár az Exportálás gombra kattintva nagyobb irányítást biztosít. Ez messze az egyik kedvenc Sketch funkcióm, és az egyik legnagyobb időmegtakarító is.

Az okostól a szimbolikusig

A Photoshop intelligens objektumai és a kapcsolt intelligens objektumok rendkívül praktikusak és hatékonyak. Gyakran használtam őket, különösen olyan alkalmazások és interfészek tervezésénél, amelyek sok ismétlődő elemet használtak fel.

Ha nem ismeri, itt van egy gyors felhasználási eset. Mobil töréspontokkal történő navigációt tervez, és már 15 képernyő mélyen van a munkafolyamatban, amikor rájön, hogy valamin változtatni kell. Ha nem a kapcsolt intelligens objektumokkal dolgozott, akkor manuálisan meg kell nyitnia minden fájlt, és mindegyikben meg kell változtatnia. A kapcsolt intelligens objektumokkal megváltoztathat egy elemet, és az összes társa automatikusan megváltozik. Óriási időtakarékos!

Kreatív felhő könyvtárak

A Creative Cloud Libraries személyes kedvencem. Könnyen elérheti, áthúzhatja az objektumokat vagy rétegeket egyik Photoshop-dokumentumról a másikra

A Creative Cloud Libraries személyes kedvencem. Könnyen elérheti, áthúzhatja az objektumokat vagy rétegeket egyik Photoshop-dokumentumról a másikra

A Photoshop egyik kedvenc funkciója, amely szintén meglehetősen új a programban, a Creative Cloud Libraries. Egyszerűen húzza a gyakran használt eszközöket a saját Könyvtárai panelre, így könnyen hozzáférhet, amikor a projekt más területeire szeretné áthúzni őket. Ha részletesebben szeretne olvasni a CC könyvtárakról, menjen itt .

Szimbólumok

A vázlatszimbólumok hasonlóak a Photoshop összekapcsolt intelligens tárgyaihoz, de kissé testreszabhatóbbak és erőteljesebbek

A vázlatszimbólumok hasonlóak a Photoshop összekapcsolt intelligens tárgyaihoz, de kissé testreszabhatóbbak és erőteljesebbek

Mi köze a Photoshop összekapcsolt intelligens objektumainak és könyvtárainak a Sketch-hez, kérdezed? Nos, a Sketch rendelkezik ezzel a kis, nagy dologgal, amelyet szimbólumoknak hívnak. Úgy gondolok rá, mint a kapcsolt intelligens tárgyak és könyvtárak szerelmi gyermekére, egy csípős forró mártással egy extra rúgáshoz.

A Szimbólumok segítségével újból felhasználhatja az eszközöket vagy csoportokat oldalakon és rajztáblákon. Változtasson a Symbol-on, és dögös kutya, mindenhol változik! Még akkor is emlékszik a térbeli igazításokra, ha például az eszközöket és / vagy a szövegeket módosítja egy listában. Még a szöveg szavai is változnak.

Újra felhasználhatja a különböző oldalakon található elemeket, és a módosítások lefordításra kerülnek

Újra felhasználhatja a különböző oldalakon található elemeket, és a módosítások lefordításra kerülnek

És íme, ez a különösebb forró szósz, amiről beszéltem: „Szöveges érték kizárása a szimbólumból”. Vegyünk például egy gombstílust, amely megismétlődik, de más szöveggel. Meg akarja változtatni a gombstílust az alaplapon, de megtartja a szöveget? Nincs mit. Nincs külön 'Minden példány módosítása' lehetőség. Varázslat!

Az automatikusan frissülő elemcsoport mellett örömet szerezhet a rétegek és a szöveg stílusának meghatározásában is. Definiáljon például H1 címkéket a GT Walsheim-ben - 48-as méretben és árnyékkal, és az összes példány az egész felületen frissülni fog. Ismét, mint a varázslat!

A dolgok alakítása

A felhasználói felületek, alkalmazások és webhelyek tervezésénél a Photoshopban általában alakzatokat használtam különféle elemek létrehozásához. Hasonló alapokat talál a Sketch segítségével. Az Alakzatok itt töltöm az időm nagy részét, gombok létrehozásával téglalapokból, nagy téglalapok kitöltésével vagy maszkolásával képkitöltésekkel, elválasztó vonalak rajzolásával stb.

A Photoshop számos lehetőséget kínál vektoros és nem vektoros alakzatok és utak létrehozására. A Sketch azonban a méretezhetőség köré épül. Minden vektor-alapú, és az alakzatok menet közben könnyen beállíthatók.

Például visszaléphet és hozzáadhat egy saroksugarat egy téglalap alakú gombhoz, egyszerűen a „Sugár” opció kiválasztásával. Bármelyik alakzatot kitöltheti fényképpel, és bármelyik méretét roncsolásmentesen átméretezheti. Ez nagyszerű, ha teszteljük, hogy az érzékeny képek miként méretezhetők és méretezhetők át.

Ha egy képet egy alakzaton belül elrejt, akkor személyes tipp, hogy ne használja a „Használat maszkként” opciót. Ehelyett a 'Kép kitöltése' legtöbbször sokkal nagyobb rugalmasságot biztosít.

A Photoshop és a Sketch formakombinációi között is van közös pont. Bár személyesen nem hozok létre egyedi ikonokat a Sketch-ben (vagy bármilyen szoftverben), azt tapasztalom, hogy egyedi formákra van szükségem itt-ott. Azt azonban elképzelném, hogy az ikontervezők elég gyakran használják ezt a funkciót.

A vázlaton túl

Ha a Photoshop olcsóbb alternatíváját keresi grafikai tervezés céljából, próbáljon ki egy Affinity Designert

Ha a Photoshop olcsóbb alternatíváját keresi grafikai tervezés céljából, próbáljon ki egy Affinity Designert

Itt csak a Photoshopról való áttérés néhány funkciójára, különbségére és ismerősségére vonatkoztam. A Sketch nagyszerű ugrásnak tűnik egy jobb, finomabb munkafolyamat irányába a kezelőfelületek és webhelyek tervezéséhez. Ez azonban nem szünteti meg egy olyan „fotóüzlet” alkalmazás szükségességét, mint például a Photoshop vagy az Affinity Designer. A Sketch hatalma abban rejlik, hogy a web- és felhasználói felület-tervezés alkalmazásaként összpontosít. Se több se kevesebb.

A Photoshop és Sketch közötti tanulási görbe elég gyors volt. Három és fél napba telt, mire körülbelül 90 százalékkal kényelmesen éreztem magam az alkalmazáson belül, és három hét telt el, mire úgy éreztem, hogy 99 százalékban megértem a dolgokat. A webhelyemen szerzett tapasztalataimról bővebben olvashat, ahol élőben blogoltam utamat .

A Sketch felhasználói bázisa gyorsan növekszik. A beépülő modulok közössége lenyűgöző, és hatékonyan bővíti a Sketch képességeit. Ha új eszközt keres, és rendkívül kedvező áron, akkor a Sketch remek lehetőség. Véleményem szerint jelenleg ez a legjobb választás a felhasználói felület használatához. Izgatott vagyok a jövője miatt.

Szavak : Brian Hoff

Brian Hoff az alapítója és kreatív igazgatója a Philadelphiai székhelyű, digitális webáruháznak, a Brian Hoff Design-nak, amely web- és mobilplatformokra és termékekre összpontosít. Ezt a cikket eredetileg a net magazin .

Tetszett ez? Olvassa el ezeket!