Miksi sinun pitäisi vaihtaa Photoshopista Sketchiin

Viimeisen vuoden tai kahden aikana Bohemian Codingin Sketch-sovellus on saanut vauhtia loistavalla internetsivustolla `` parempana '' vaihtoehtona Photoshopille. Suurin osa tästä runsaasta kiitosta on tullut verkko- ja käyttöliittymäsuunnitteluyhteisöltä. Jos olet jotain minun kaltaani, etsit aina uusia työkaluja ja parempia vaihtoehtoja olemassa olevalle työnkululle. Aluksi olin kuitenkin alustava 20-vuotisen Photoshop-sauvani luovuttamisesta.



Suurimmaksi osaksi Photoshop tekee tempun ja tekee sen tarpeeksi hyvin. 'Miksi vaihtaa?' Ajattelin. Photoshop-pikakuvakkeet ovat toinen kieleni. Tietyn vaikutuksen tai tehtävän suorittaminen ei enää vaatinut paljon aivovoimaa, koska olin todennäköisesti jo tehnyt jotain vastaavaa monta kertaa. Tämä vanha koira ajatteli, että Sketch oli uuden koulun viileille lapsille.

Kun Sketchiä ympäröivä puhelu lisääntyi, uteliaisuuteni sai lopulta parhaansa. Minun piti nähdä itse, miksi Sketch oli syttynyt tuleen ikäiseni keskuudessa. Kun olin aloittamassa uutta projektia, päätin, että hetki oli oikea. Jos aion tehdä sen, halusin antaa kaiken kaiken viikon ajan.

Suljin Photoshopin, ladasin 30 päivän Sketch-kokeiluversion ja sukellin syvään päähän ilman vaahdotuslaitetta toivoen pitävän pään veden yllä riittävän kauan selvittääksesi, mistä hype oli kyse. Jos aiot tutustua Sketchiin, suosittelen tätä lähestymistapaa.



Kahden tai kolmen päivän sisällä olin vakuuttunut. Jälleen kerran tunsin olevani innostunut ohjelmiston avaamisesta ja hyödyn heti. Minusta tuntui nopeasti mukavalta oppia uusi käyttöliittymä. Päällekkäisyys Photoshopin kanssa oli juuri tarpeeksi. Olin rakastunut. 'Joo!' Ajattelin.

Tässä artikkelissa käsittelen muutamia Sketchin ydinominaisuuksia ja verrataan niitä Photoshop-vastaaviinsa. Jos olet aidalla, etsit parempaa (ja paljon halvempaa) vaihtoehtoa Photoshopille tai olet utelias sen kasvavaan suosioon, lue sitten.

Hei ystävä

Luonnos on rakennettu yksinomaan Macille. Jos olet joskus käyttänyt Applen ohjelmistoa, erityisesti Keynotea, huomaat samanlaisuuden sen käyttöliittymässä



Luonnos on rakennettu yksinomaan Macille. Jos olet joskus käyttänyt Applen ohjelmistoa, erityisesti Keynotea, huomaat samanlaisuuden sen käyttöliittymässä

Luonnos on yksinomainen Mac OS X: lle, ja Bohemian Codingin UKK-osion mukaan se ei edes harkitse Windowsin ja Linuxin tukemista. Tämä on hyvä meille pitkäaikaisille Mac-käyttäjille. Jos olet lainkaan perehtynyt OS X: n tuottavuussovelluksiin (Pages, Keynote, Numbers) tai jos olet käyttänyt vanhempaa, lopetettua Applen ohjelmistoa (katson sinua iWeb), tunnet heti, että olet törmännyt vanha ystävä, jolla on kasvanut kypsempi parta.

Aivan kuten tein Keynotessa, kun aloitin sen käytön, ensimmäinen asia, jonka tein Sketchissä, oli mukauttaa ylätyökaluriviä. Teet tämän napsauttamalla sitä hiiren kakkospainikkeella ja heittämällä siihen mahdollisimman monta kohdetta.

Pikanäppäimet

Vaikka Photoshopilla on aina näkyvissä työkalurivi, osa Sketchin työkaluista on aluksi hieman piilossa

Vaikka Photoshopilla on aina näkyvissä työkalurivi, osa Sketchin työkaluista on aluksi hieman piilossa

Lukuisilta ystäviltä ja Twitter-ihmisiltä saamani neuvo oli oppia pikakuvakkeet mahdollisimman nopeasti. Työkalupalkin työkalujen visuaalinen ohjaus auttoi minua kuitenkin ymmärtämään paremmin Sketchin ominaisuuksia ja miten se hoitaa erilaisia ​​tehtäviä. Monet työkalut ovat puoliksi tuttuja Photoshopista, mutta ne sijaitsevat nyt eri paikoissa. Sketchin tapauksessa yhtenäisempi alue.

Helpottaakseni siirtymistä Photoshopista toin joitain usein käytettyjä pikanäppäimiä luomalla mukautettuja pikanäppäimiä OS X: ssä. Jos et ole perehtynyt tähän prosessiin, valmistaudu rakastumaan. Se on melko helppo tehdä suoraan Macin Järjestelmäasetuksista. Tässä on myös kätevä luettelo luonnosnäppäimistä, jotta pääset tuntemaan itsesi: sketchshortcuts.com .

kuinka värittää sarjakuvia käsin

Keskity keskittymään

Älä ymmärrä minua väärin: Photoshop saa verkkosivuston ja käyttöliittymän mallintamistyön ja tekee sen hyvin. Se tekee myös paljon muita tavaroita hyvin. Sen on tarkoitus olla työkalu kaikille. Ja tiedätkö mitä? Se on okei. Yksi asia on kuitenkin se, että siitä puuttuu keskittyminen sovelluksena web- ja käyttöliittymäsuunnitteluun.

Sketch keskittyy erityisesti verkkosivustojen, käyttöliittymien ja kuvakkeiden suunnitteluun. Photoshopiin verrattuna Sketchin valikot näyttävät riisutulta. Mukava raikas ilma. Ei enää taistelu sotkua, joka ei välttämättä käänny verkkoon. Sketchin työkalut ja arvot ovat siinä, mikä kääntyy helposti CSS: ksi ja selaimiksi yleensä.

Esimerkiksi: asetteluasetusten tekeminen ja mukauttaminen (eli ruudukon luominen). Luonnoksessa ennalta määritetyt kentät mahdollistavat ruudukon kokonaisleveyden, kourujen, sarakkeiden ja rivien mukauttamisen. Kuten joku, joka työskentelee aina reagoivien verkkojen kanssa, olen jatkuvasti näissä asetuksissa ennen uuden projektin aloittamista.

Piirtotaulun esiasetukset

Toinen piirre, joka esittelee Sketchin painotuksen verkkoon ja käyttöliittymään, on sen ennalta asetetut mallit ja piirtoalusta-esiasetukset. Ja tästä olen kiitollinen.

Oletetaan, että aloitat uuden iOS-sovellusprojektin. Voit joko luoda uuden projektin, kuten olet tottunut Photoshopissa, tai valita '' iOS UI Design '' - mallipohjan, jonka Luonnos tarjoaa Tiedosto> Uusi mallista. Etuna on, että Sketch antaa sinulle ensin iOS-käyttöliittymäsarjan, jolla voit nopeasti pilkata iPhone-sovelluksia ja vetää esimerkiksi alkuperäisen iOS-näppäimistön maketillesi.

Äskettäin pilkkasin karttanäkymää varaussovellukselle, jonka parissa työskentelin. Minun ei tarvinnut avata erillistä tiedostoa tai etsiä iOS-kartan mallia. Vaihdoin vain Elements-sivulle ja kopioin ja liitin.

Mitoitettu täydellisyyteen

Täytyykö lisätä 20 pikseliä 180 pikselin painikkeeseen? Kirjoita vain 180 + 20

Täytyykö lisätä 20 pikseliä 180 pikselin painikkeeseen? Kirjoita vain 180 + 20

Aivan kuten Photoshop, Sketchin tarkastaja antaa sinulle mahdollisuuden määrittää tarkat koot ja sijainnit taululle. Luonnoksessa on kuitenkin kova salaisuus sen koko- ja sijaintitarkastajaan. Se ymmärtää matematiikkaa! Ei vain yhteenlasku, vähennys, kertolasku ja jakaminen, mutta myös prosenttiosuudet.

Haluatko siirtää painikkeen vasemmalle 20 pikseliä? Lisää vain kenttään '-20'. Haluatko kuvan täyttävän puolet koko taulusta? Kirjoita vain leveyskenttään '50%'. Loistava!

Yksi projekti, yksi tiedosto

Sketch eroaa Photoshopista siinä mielessä, että se tallentaa kaikki sivunsa yhteen asiakirjaan, mutta molemmat käsittelevät kerrostamista, ryhmittelyä ja organisointia samalla tavalla

Sketch eroaa Photoshopista siinä mielessä, että se tallentaa kaikki sivunsa yhteen asiakirjaan, mutta molemmat käsittelevät kerrostamista, ryhmittelyä ja organisointia samalla tavalla

Photoshopin avulla projekti ja tiedostorakenne näyttivät tältä:

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

Sketch käsittelee asioita hieman eri tavalla. Yhdessä Sketch-tiedostossa on kaikki sivut ja piirtoalustat yhdessä asiakirjassa. Aluksi olin huolissani siitä, että se mursi Macin suorituskyvyn, mutta olen sittemmin suunnitellut iOS-sovelluksia, joissa on noin 30 näyttöä, enkä kokenut merkittäviä suorituskykyongelmia.

Tämän lähestymistavan tärkein etu on, että voit käyttää kaikkia näyttöjäsi ja tarkastella niitä vierekkäin, joten on paljon helpompaa tehdä muutoksia ja verrata asioita. Jos pilkkaat erilaisia ​​reagoivia katkaisupisteitä, rakastat sitä ehdottomasti.

Äskettäin Photoshop esitteli versionsa useista piirtoaluksista. Luonnoksessa on kuitenkin mahdollista järjestää kaikki piirtoalustat sivuiksi yhteen asiakirjaan, mikä tekee tästä ominaisuudesta paljon tehokkaamman. Muussa tapauksessa molempien sovellusten useat piirtoalustat toimivat hyvin samalla tavalla.

Sketchin tasopaletti toi mukavuustason, kun avasin sovelluksen ensimmäisen kerran, koska se jäljittelee Photoshopia monin tavoin. Aivan kuten Photoshop, tässä voit tarkastella, nimetä uudelleen, etsiä ryhmiä (kansioita) ja elementtejä projektissasi.

Yksi tiedosto sopii kaikille

Luo Photoshopissa tyypillisesti kolme (tai enemmän) tiedostosisältöä. Yksi @ 1x ja toinen @ 2x ja toinen @ 3x. Niiden pelastaminen erikseen oli tylsää. Ellet työskennellyt vektorikohteiden ja -elementtien kanssa 100 prosenttia ajasta, tästä tuli tuskallista. Luonnoksessa ei ole sovelluksessaan edes yhtä rasteroitua työkalua tai elementtiä. No, tietysti, ellet vedä yhtä sisään.

Luodessani iOS-sovelluksen suunnitteluprojektia Photoshopissa suunnittelin paljon suuremmassa koossa näytölläni ja testasin iPhonellani peilaussovelluksen, Skala Preview -ohjelmaa.

Sketchin avulla työnkulkuni työskennellessäni Retina-laitteiden ja -resurssien kanssa on muuttunut ja parantunut dramaattisesti. Suunnittelen nyt laitteen vakiokoot. Koska Sketchissä kaikki on oletusarvoisesti vektori, minun ei tarvitse huolehtia siitä, että piirrän taulukkoni epänormaalisti suureksi työpöydällesi, jotta voin esikatsella työtä peilaus (nyt Sketch Mirrorin kautta). Työskentely työpöydältä mobiililaitteeseen tuntuu nyt luonnollisemmalta.

Lisäksi erikokoisten elementtien tallentaminen on yhtä helppoa kuin napsauttamalla vientipainiketta, lisäämällä niin monta kokoa ja tiedostomuotoa kuin haluat, ja ... no, siinä kaikki. Voit jopa vetää ja pudottaa kerroksia ja ryhmiä työpöydällesi säästääksesi asioita - vaikka Vie-painike antaa sinulle paremman hallinnan. Tämä on ylivoimaisesti yksi suosikkini Sketch-ominaisuuksista ja yksi suurimmista ajansäästäjistä.

Älystä symboliseen

Photoshopin älykkäät objektit ja linkitetyt älykkäät objektit ovat erittäin käteviä ja tehokkaita. Käytin niitä usein, varsinkin kun suunnittelin sovelluksia ja käyttöliittymiä, joissa hyödynnettiin paljon toistuvia elementtejä.

Jos et tunne, tässä on nopea käyttötapaus. Suunnittelet mobiilirajoitusten navigointia ja olet jo 15 näyttöä syvällä työnkulkuun, kun huomaat, että jotain on muutettava. Jos et työskennellyt linkitettyjen älykkäiden objektien kanssa, sinun on avattava jokainen tiedosto manuaalisesti ja tehtävä muutokset kussakin tiedostossa. Linkitettyjen älykkäiden objektien avulla voit muuttaa yhtä elementtiä ja kaikki sen vastineet muuttuvat automaattisesti. Valtava ajansäästäjä!

miten saada Adobe hahmoanimaattori

Luovat pilvikirjastot

Creative Cloud Libraries on henkilökohtainen suosikkini. Voit helposti käyttää, vetää ja pudottaa objekteja tai tasoja yhdestä Photoshop-asiakirjasta toiseen

Creative Cloud Libraries on henkilökohtainen suosikkini. Voit helposti käyttää, vetää ja pudottaa objekteja tai tasoja yhdestä Photoshop-asiakirjasta toiseen

Toinen suosikkini ominaisuuksista Photoshopissa, joka on myös melko uusi ohjelma, on Creative Cloud Libraries. Vedä yleisesti käytettyjä resursseja omaan Kirjastot-paneeliin, jotta pääset helposti käsiksi, kun haluat vetää ja pudottaa ne projektin muille alueille. Jos haluat lukea lisää CC-kirjastoista, siirry tässä .

Symbolit

Luonnossymbolit ovat samanlaisia ​​kuin Photoshopin linkitetyt älykkäät objektit, mutta hieman muokattavampia ja tehokkaampia

Luonnossymbolit ovat samanlaisia ​​kuin Photoshopin linkitetyt älykkäät objektit, mutta hieman muokattavampia ja tehokkaampia

Mitä tekemistä Photoshopin linkitetyillä älykkäillä esineillä ja kirjastoilla on tekemistä Sketchin kanssa? No, Sketchillä on tämä pieni iso juttu nimeltä Symbolit. Mielestäni se on linkitettyjen älykkäiden esineiden ja kirjastojen rakkauden lapsi, jossa on ripaus kuumaa kastiketta ylimääräiseksi potkuksi.

Symbolien avulla voit käyttää uudelleen resursseja tai ryhmiä sivuilla ja piirtoalustoilla. Tee muutos Symboliin, ja kuuma diggity koira, se muuttuu kaikkialla! Se jopa muistaa alueelliset kohdistukset, jos esimerkiksi muokkaat luettelon sisältökohteita ja / tai tekstiä. Jopa tekstin sanat muuttuvat.

Voit käyttää uudelleen eri sivujen sisältökohteita, ja muutokset käännetään toisistaan

Voit käyttää uudelleen eri sivujen sisältökohteita, ja muutokset käännetään toisistaan

Ja tässä on se ylimääräinen ripaus kuumaa kastiketta, josta puhuin: 'Sulje tekstiarvo pois symbolista'. Otetaan esimerkiksi painiketyyli, joka toistuu, mutta eri tekstillä. Haluatko vaihtaa painikkeen tyylin kaikilla alueilla, mutta säilytätkö tekstin? Ei ongelmaa. Ei muuta Vaihda kaikki esiintymät -vaihtoehtoa. Taika!

Automaattisesti päivittyvien elementtiryhmien lisäksi löydät iloa myös tasojen ja tekstin tyylien määrittelystä. Määritä esimerkiksi H1-tunnisteet GT Walsheimissa - koko 48 ja varjo, ja kaikki esiintymät päivittyvät kaikilla alueilla. Jälleen, kuten taikuutta!

miten kerrosmaskin kokoa muutetaan Photoshopissa

Muodostaa asioita

Suunnittelellessani käyttöliittymiä, sovelluksia ja verkkosivustoja Photoshopissa käytin tyypillisesti muotoja erilaisten elementtien luomiseen. Löydät samanlaisen pohjan Sketchin kanssa. Shapes on paikka, jossa vietän suurimman osan ajastani, luomalla painikkeita suorakulmioista, täyttämällä tai peittämällä suuria suorakulmioita kuvilla, piirtämällä erotinviivoja ja niin edelleen.

Photoshop tarjoaa sinulle monenlaisia ​​tapoja luoda vektori- ja ei-vektorimuotoja ja polkuja. Sketch on kuitenkin rakennettu skaalautuvuuden ympärille. Kaikki on vektoripohjaista, ja muotoja voidaan helposti säätää lennossa.

Voit esimerkiksi palata takaisin ja lisätä kulmasäteen suorakulmaiseen painikkeeseen yksinkertaisesti valitsemalla Säde-vaihtoehdon. Voit myös täyttää minkä tahansa muodon valokuvalla ja muuttaa jommankumman kokoa rikkomattomalla tavalla. Tämä on hienoa testattaessa, kuinka reagoivat kuvat skaalautuvat ja muuttavat kokoa.

Kun kuva peitetään muodon sisällä, henkilökohtainen vinkki on olla käyttämättä Käytä maskina -vaihtoehtoa. Sen sijaan 'Täytä kuvalla' antaa sinulle paljon enemmän joustavuutta suurimman osan ajasta.

Muotoyhdistelmien välillä on myös yhteinen syy Photoshopissa ja Sketchissä. Vaikka en itse luo mukautettuja kuvakkeita Sketchissä (tai missään ohjelmistossa), huomaan tarvitsevani ainutlaatuisia muotoja täällä ja siellä. Kuvittelisin kuitenkin, että kuvakesuunnittelijat käyttävät tätä ominaisuutta melko usein.

Luonnoksen ulkopuolella

Jos etsit halvempaa vaihtoehtoa Photoshopille graafista suunnittelua varten, kokeile Affinity Designeria

Jos etsit halvempaa vaihtoehtoa Photoshopille graafista suunnittelua varten, kokeile Affinity Designeria

Täällä olen vain koskenut joihinkin ominaisuuksiin, eroihin ja tutuuksiin siirtyessäni Photoshopista. Luonnos tuntuu suurelta harppaukselta parempaan, tarkempaan työnkulkuun käyttöliittymien ja sivustojen suunnittelussa. Tämä ei kuitenkaan poista tarvetta valokuvakauppasovellukselle, kuten Photoshop tai Affinity Designer. Sketchin voima on sen painopiste verkkosovellusten ja käyttöliittymien suunnittelussa. Ei enempää ei vähempää.

Oppimiskäyrä Photoshopista Sketchiin oli tarpeeksi nopea. Minulla kesti kolme ja puoli päivää saada noin 90 prosenttia mukavaksi sovelluksessa, ja kului kolme viikkoa, ennen kuin tunsin olevani 99 prosentin käsitys asioista. Voit lukea lisää kokemuksistani sivustollani, missä asuin bloggaamassa matkaa .

Sketchin käyttäjäkunta kasvaa nopeasti. Sen laajennusyhteisö on vaikuttava ja laajentaa Sketchin ominaisuuksia tehokkaasti. Jos etsit uutta työkalua erittäin edulliseen hintaan, Sketch on loistava vaihtoehto. Mielestäni tällä hetkellä se on paras valinta käyttöliittymätyöhön. Olen innoissani sen tulevaisuudesta.

Sanat : Brian Hoff

Brian Hoff on Philadelphiassa toimivan digitaalisen boutique-toimiston Brian Hoff Designin perustaja ja luova johtaja, joka keskittyy verkko- ja mobiilialustoihin ja tuotteisiin. Tämä artikkeli julkaistiin alun perin numerossa 273 nettilehti .

Piditkö tästä? Lue nämä!