Overschakelen van Photoshop naar Sketch (editor voor Mac). De complete handleiding Aan de slag met schets (met gratis spiekbriefje)
Voor het label Digital Om Productions werd mij gevraagd om te vertellen wat voor vreemde grafische editor het was in de screenshots, waarin we de lay-outs deden. Ik zeg het je.
De laatste tien jaar werk ik in Photoshop. Het is ongetwijfeld een beproefde marktleider. Maar ik heb altijd het gevoel gehad dat het op de een of andere manier niet klopte. Een website ontwerpen in Photoshop is als brood snijden met een Zwitsers mes: het lijkt de taak aan te kunnen, maar er staan veel onnodige dingen in de weg.
Photoshop is als een Zwitsers mes
Een paar maanden geleden begon ik na te denken over een alternatieve oplossing en vond die: Sketch 3. Hieronder zal ik u vertellen over de kenmerken van het programma vanuit mijn persoonlijke ervaring.
Wat is Sketch?
Sketch is een editor voor vectorafbeeldingen. In tegenstelling tot het multifunctionele Photoshop is Sketch opgevat als een smalle niche-oplossing voor het ontwerpen van interfaces, websites, applicaties en iconen. Het programma is alleen beschikbaar voor het Mac OS X-platform en kost $ 99.
Ontwikkelaars - een bedrijf met een interessante naam "Bohemian Coding". Het team heeft slechts tien mensen in dienst en het kantoor is gevestigd in Den Haag. Naar mijn mening is dit goed: een klein team kan zich gemakkelijker aanpassen aan veranderingen in de branche en luistert meer naar de behoeften van gebruikers dan grote bedrijven.
Koppel
De Sketch heeft een minimalistische interface. Zelfs te veel - na andere collega-programma's ziet hij er op zijn minst ongewoon uit, en de leegte is zelfs een beetje eng. Toen ik het programma voor het eerst opende, dacht ik: “ tekstverwerker of zo?».
Toen realiseerde ik me dat het doodstil was - de werkruimte wordt niet overlapt door tools, vensters, menu's en andere elementen die klassiekers zijn geworden in het ontwerpen van grafische programma's.
In de schets staan de lagen aan de linkerkant, de werkbalk bovenaan en het infovenster met parameters aan de rechterkant. Het is cool dat de inspecteur contextueel is: de beschikbare opties veranderen afhankelijk van het geselecteerde object. De bovenste werkbalk is aanpasbaar: u kunt veelgebruikte objecten daarheen verplaatsen en verwisselen. Hoewel ik het praktisch niet gebruik, ben ik gewend om met sneltoetsen te werken.
Minimalistische interface
Organisatie van projecten
Ik sjokte vooral uit de interne organisatie van projecten. Voor dit doel werden pagina's uitgevonden in de Sketch (" Pagina's") En planken (" Tekengebieden"). Dat laatste noem ik gewoon tekengebieden, zonder vertaling.
Tekengebieden zijn containers voor het plaatsen in lagen, mappen, vormen en andere objecten. U kunt zoveel van deze tekengebieden binnen uw pagina's maken.
Ik doe dit: op Pagina's Ik regel de eigenlijke pagina's van de site - bijvoorbeeld "home", "catalogus", "contacten". En op elke pagina die ik doe tekengebieden voor verschillende schermresoluties en elementstatussen.
Op dit moment kan ik de sites waar ik aan werk niet laten zien, dus ik zal een voorbeeld geven van een nieuw project. Zo ziet het eruit:
Het is gewoon geweldig als je aan responsieve sites werkt. En de spanning die eruit komt één bestand voor het hele project. Stel je een site voor met twintig pagina's met drie verschillende resoluties, plus fout- en elementstatuspagina's, allemaal in één gestructureerd bestand.
symbolen
Een van de beste features, die ook nog eens slim is geïmplementeerd. Symbolen zijn groepen objecten die u zo vaak kunt gebruiken als u wilt, maar tegelijkertijd hebben de lagen binnen de groep gemeenschappelijke stijlen - op één plek veranderd, overal veranderd. Net als slimme objecten, alleen cooler en handiger.
Stel je een website of mobiele app-ontwerp voor met honderden verschillende schermen, maar gemeenschappelijke elementen zoals menu's. En je moet iets in dit gemeenschappelijke element iets veranderen - verander de achtergrondkleur of voeg onderstreping toe aan de tekst. Met behulp van symbolen is dit in een paar klikken gedaan:
- Als u de uitlijning van de tekstlaag wijzigt, wordt de tekst niet verplaatst, maar blijft deze op zijn plaats. Het is een kleinigheid, maar soms maakte het me razend in Photoshop :-)
- De schets is snel. Of de nativeness van de applicatie onder OS X van invloed is, of het ontbreken van een zwaar overgewicht aan functies, weet ik niet. Maar feit is dat de applicatie een orde van grootte sneller en soepeler werkt dan Photoshop.
Bovendien staat het programma nog steeds vol met kleine aangename broodjes, maar ik zal niet alles beschrijven - ik zal het overlaten aan de vreugde van de onderzoekers die de Sketch zelf willen proberen.
Lay-out van lay-outs
Ik tekende de eerste site in de Sketch letterlijk in één adem, en bleef me verbazen: "wauw, alles is zo cool hier!" Maar ontwerp is slechts één fase in het creëren van sites, er is nog steeds lay-out en ontwikkeling voor de boeg.
Toen het de beurt was om het project te exporteren, zag ik eindelijk de bestandsformaten: JPG, GIF, TIFF, PDF, EPS, SVG. Er is geen PSD-formaat. De sketch is een Mac-only programma en onze ontwikkelaar Maxim is op Windows. Begrijp je het, ja? :-) "Oeps!"
Als gevolg hiervan moest hij de site van JPG-lay-outs typen - niet het grootste plezier. Ik was overstuur en dacht zelfs met tegenzin terug te keren naar mijn gebruikelijke Photoshop, maar toen vond ik een geweldige service - Tsepelin.
Hallo allemaal, ik ben Oleinik Anton - interfaceontwerper, Sketch-fan en een van de auteurs van het sketchapp.me-themaproject. In de gastpost van vandaag zal ik je in detail vertellen over deze grafische editor voor Mac OS.
Ondanks het feit dat Sketch al stevig verankerd is in veel bekende teams, zie ik vaak ontwerpers (vooral met ervaring) die door langdurige gewoontes zo nauw verbonden zijn met hun oude tools dat ze alternatieve opties zelfs met een negatieve (en over het gebruik in de workflow en er is geen twijfel mogelijk). Ben jij een van die twijfelaars, dan ben je van harte welkom.
Dus, hier zijn enkele van de belangrijkste redenen om de niet zo nieuwe Sketch-app te proberen.
Sketch - grafische editor voor Mac OS
Ja, dit wordt meestal een groot nadeel genoemd. In feite is dit een groot pluspunt van de applicatie, omdat deze volledig gebruik maakt van de OS X-systeemtools (automatisch opslaan, tekenen, tekstweergave). Op Windows zou je met Sketch moeten lijden zoals je zou doen met elk groot grafisch programma.
Werkt niet met raster
Ze schrijven ook alles op minnetjes. Natuurlijk is het tegenovergestelde waar. Schets - vector en voor interface-ontwerp. Dit is geen programma voor het retoucheren van foto's. Nou, en interfaces in een raster, denk ik, niemand heeft in honderd jaar getekend.
Kleine bestanden
Schetsdocumenten wegen aanzienlijk minder dan ai- of psd-bestanden (wederom dankzij het gebruik van Mac-systeemsoftwarebronnen).
Hier is bijvoorbeeld een bestand btn.sketch met één knop weegt 33 KB, dezelfde btn.ai weegt 194 KB, dezelfde btn.psd - 91 KB. Deze documenten zijn klein, maar u kunt de verhouding al ongeveer inschatten.
Eenvoudige schets-interface
Op het eerste gezicht denk je dat je zoiets als Keynote hebt geopend. Ja, zo'n schoon uiterlijk van een professioneel (!) Programma is een beetje verwarrend voor jongens die gewend zijn om lange tijd met een muis op selectievakjes te mikken op talloze panelen van Adobe-software. Dit is echter precies het geval wanneer minder = meer. Zo'n eenvoudige interface geeft je de tijd om met je hoofd na te denken over je werk, niet over de tool.
Een beetje over de interface
Aan de linkerkant is het lagenpaneel. Een beetje vreemd na Photoshop, maar je went er snel aan. Bovenaan dit paneel staat een lijst met pagina's. Het kan worden overgeschakeld naar de "open" status - het is handig als er niet veel pagina's in het bestand zijn.
[paneel met app-lagen]
Bovenaan staat de werkbalk ("werkbalk"). Het kan, net als andere Mac-programma's, naar wens worden aangepast. Er zijn niet veel tools, en de meeste onthoud je op het toetsenbord.
Aan de rechterkant is het contextuele paneel (laten we het zo noemen). Zeer vergelijkbaar, alleen horizontaal, was in de late Fireworks. Het paneel verandert afhankelijk van wat u op het canvas doet. Er zijn drie modi: groepseigenschappen, vormeigenschappen, teksteigenschappen.
Pagina's en doeken
Het document is in Sketch verdeeld in pagina's. De pagina's zijn op hun beurt verdeeld in doeken. Dit maakt het organiseren van de schermen van uw applicatie uiterst handig. U maakt bijvoorbeeld een "Login" -pagina en binnenin zijn er verschillende doeken met verschillende statussen van het "Login" -scherm.
Kortom, Photoshop met Illustrator weet al hoe meerdere doeken in één document moeten worden opgeslagen, maar ze missen nog steeds een extra niveau (bijvoorbeeld pagina's)
Totaal snappen naar pixels van alles en iedereen
Sketch is heel voorzichtig om ervoor te zorgen dat alles voor u in hele pixels valt. Als iets ergens wazig is, is er een eenvoudige manier om het te repareren.
stijlen
De Sketch-app heeft natuurlijk zowel grafische stijlen als tekststijlen. Ze werken, nogmaals, in het begin een beetje vertrouwd: wanneer je de stijl van een object ergens bijwerkt (de streek, kleur, lettertype wijzigen), wordt de stijl overal automatisch bijgewerkt. Er zijn geen "Update style"-knoppen.
De symbolen van de Sketch-editor lijken erg op de symbolen van Photoshop en een beetje op de symbolen van Illustrator. Het symbool hier is zo'n map (alleen van een andere kleur), waarbinnen alles kan, maar geen ander symbool. Werkt op dezelfde manier als stijlen: bijgewerkt op één plek - automatisch overal bijgewerkt.
Er is een enigszins verwarde en niet formeel gedocumenteerde methode om sommige karakters in andere te nesten, maar daarover een andere keer meer.
Handig exporteren
Het exporteren van afbeeldingen is heel eenvoudig en handig. Elk item heeft een actie "Maak Exporteerbaar", waar u de gewenste formaten en formaten van de uiteindelijke bestanden kunt selecteren. Er zijn ook bekende segmenten om het gebied voor export handmatig te selecteren.
Een heel handig moment bij het exporteren is de keuze uit meerdere formaten en formaten tegelijk.
Netto
De grafische editor Sketch heeft een ingebouwd en flexibel raster. U hoeft de lay-out niet handmatig te markeren of plug-ins van derden te gebruiken. Alles wordt out-of-the-box ondersteund en kan op elk moment worden aangepast aan elke behoefte.
Rendering van systeemtekst
Omdat Sketch systeembronnen gebruikt om afbeeldingen weer te geven, ziet de tekst erin er precies hetzelfde uit als in een browser in een live product.
Sketch-plug-ins voor elke behoefte
Zoals met alle fatsoenlijke apps, zijn er ook extensies voor Sketch. Acties - van eenvoudig (schik de geselecteerde objecten in stappen van 10 pixels) tot verwarrend (zoek alle tekstlagen in het document op met het woord "adobi" en vervang het door "Adobe", niet hoofdlettergevoelig). Als het programma niet weet hoe het iets heel noodzakelijks moet doen, dan is daar hoogstwaarschijnlijk een plug-in voor.
Om een plug-in in Sketch te plaatsen, downloadt u (meestal van de GitHub van de ontwikkelaar) en dubbelklikt u erop of verplaatst u deze naar de map Plugins. Map openen: menu Plug-ins-> Map met plug-ins onthullen ...
[Toon map met plug-ins in Sketch]
Dan heb je in het menu Plug-ins een item dat overeenkomt met de nieuwe plug-in
Lijst met extensies om mee te beginnen:
- Sketch Commands - een groot aantal extensies die in veel situaties van pas komen;
- Hernoem het - voor het gemakkelijk en snel benoemen en hernoemen van lagen;
- Content Generator - generator van foto's, teksten, namen, geografische namen.
Mogelijk vindt u een kleine Toolbox-toepassing handig om het installeren / verwijderen van plug-ins voor Sketch gemakkelijk te maken.
Kleine leerperiode
Natuurlijk zijn er cursussen over deze grafische editor voor Mac OS (het lijkt erop dat er zelfs betaalde zijn), maar in principe heb je maar een paar uur nodig om alle belangrijkste details zelf uit te zoeken. In het begin zal het vreemd zijn, maar alleen omdat je het gaat vergelijken met Photoshop.
Nawoord
Hoe zit het met de laatste Sketch-beoordeling? - natuurlijk is het niet perfect. Er zijn soms remmen, sommige functies ontbreken (geen raster), maar toch, zelfs in deze staat, kan het uw ontwerpontwikkeling aanzienlijk vergemakkelijken en versnellen.
U kunt het Sketch-programma downloaden en alles leren over de Sketch-editor op de website
De ontwikkeling van moderne applicaties is ondenkbaar zonder het werk van een ontwerper, en een ontwerper heeft de juiste software nodig om te werken. In principe worden Adobe Illustrator, Photoshop en andere professionele grafische editors gebruikt voor ontwerpontwikkeling, maar er zijn ook gespecialiseerde oplossingen. Onlangs is de derde versie van de Sketch-vectoreditor uitgebracht, voornamelijk gericht op het maken van afbeeldingen voor programma's. Wat maakt deze gespecialiseerde vectoreditor anders?
Het was alsof de Sketch-ontwikkelaars een krachtige editor voor vectorafbeeldingen gebruikten en al het overbodige weggooiden. Daarna hebben ze erover nagedacht, en aangevuld met alles wat nodig is om graphics te maken tijdens de ontwikkeling van programma's. Het is deze reeks handige "trucs" die het programma onderscheidt van andere editors. Het is vermeldenswaard dat Sketch-software niet beperkt is tot alleen afbeeldingen, het kan bijvoorbeeld worden gebruikt voor webdesign (functies als "stijl kopiëren als CSS" helpen hierbij), maar toch is dit doel het belangrijkste.
Omdat Sketch een native OS X-app is, kun je altijd iCloud en lokale versies van documenten gebruiken. Het programma is zeer licht, snel en responsief.
Trouwens, Sketch is zo goed dat zelfs Adobe-ontwikkelaars het gebruiken :)
Naam: Schets 3
Uitgever / Ontwikkelaar: Boheemse codering
Prijs: 2690 RUBB
In-app aankopen: Nee
downloaden:
De laatste tijd is de vraag naar tools voor UI / UX-specialisten zeer acuut geweest: welke software moet worden gebruikt om interfaces te ontwikkelen? Wij bij ons bedrijf zijn ook volop in gesprek over deze kwestie. En de discussies zijn vaak erg scherp. Wat te kiezen voor werk? Welke editor is functioneler voor een bepaalde ontwerpertaak? De lijst van onze taken is vrij breed, beginnend met het creëren van een huisstijl en eindigend met een volledige cyclus van complexe digitale productontwikkeling. Bijvoorbeeld mobiele applicaties voor het beheren van smart home-systemen, complete e-commercesystemen.
Ik zal niet de eerste zijn die deze vragen opwerpt, maar ik zal proberen er beknopte antwoorden op te geven. Misschien is mijn artikel interessant voor beginnende ontwerpers die nog niet definitief de richting van hun activiteiten hebben bepaald, of voor ontwerpers die zich willen omscholen van de ene specialiteit naar de andere.
De afgelopen twintig jaar is Adobe Photoshop de populairste grafische editor voor ontwerpers gebleven. Echter, onlangs het primaat van het bedrijf Adobe de markt voor tools voor digitale ontwerpers werd door elkaar geschud, in 2012 begon het bedrijf Boheemse codering vrijgegeven Schets. Schetsen Is een professionele editor voor vectorafbeeldingen, direct aangescherpt voor het maken van grafische interfaces: web, mobiele applicaties, desktopprogramma's en andere. Op dit moment is de huidige versie Sketch 3. In de afgelopen 3,5 jaar heeft Bohemian Coding geweldig werk geleverd door zijn product te verbeteren, veel bugs te verhelpen, de functionaliteit te vergroten en een serieuze concurrent van Photoshop op te groeien. Ik wil meteen een belangrijke opmerking maken: ik zie Sketch niet als een directe concurrent. Photoshop... Absoluut, het doel van deze programma's is aanvankelijk anders, respectievelijk, wat voor de een een voordeel zal zijn, voor de ander een ernstig nadeel. Daarom zou het juist zijn om geen vergelijkende beoordeling te maken, zoals velen doen, maar om de belangrijkste voordelen en eigenschappen van elk van de redacteuren voor een specifiek geval te benadrukken.
Afspraak
Daarom beschouw ik het juiste eerste punt om het doel van elk van de programma's te laten zien.
Photoshop werkt voornamelijk met bitmaps heeft echter enkele vectortools. Het is onmisbaar voor het retoucheren van foto's, beeldverwerking. Maar de functionaliteit die bedoeld is om met vectorafbeeldingen te werken, is nogal willekeurig. Veel Adobe-fans zullen tegen mij protesteren, maar dan rijst een logische vraag: waarom heeft Adobe een aparte vector-editor Illustrator in het arsenaal, als Photoshop alles kan? Het is de aanwezigheid van twee interfaces die het werk bemoeilijkt en extra tijd kost bij het oplossen van problemen met het werken met vectorafbeeldingen.
Sketch daarentegen was oorspronkelijk ontworpen om met vectoren te werken., aangezien de ontwikkeling van interfaces het creëren van prototypes, kaders, pictogrammen, UI-elementen omvat, en vaak moeten deze elementen vector zijn.
Om te kiezen welke van de editors u wilt gebruiken, moet u dus begrijpen welke taken met deze toolkit moeten worden opgelost.
Prijs
De tweede in een rij, maar niet in belangrijke mate, parameter voor het kiezen van een of andere editor zijn de kosten en betaalmethode voor deze software. Photoshop is exclusief beschikbaar op abonnement! De maandelijkse kosten voor het gebruik van de editor zijn: 20$ , en voor verschillende regio's kan dit cijfer variëren. Maar de essentie blijft hetzelfde. In tegenstelling tot Adobe is Bohemian Coding de andere kant opgegaan: Sketch verkoopt voor 99$ , dit is een eenmalige betaling en de gebruiker ontvangt alle updates gratis. Wellicht dat in de toekomst de financiële strategie van het bedrijf verandert, maar voorlopig veroveren ze op deze manier de markt. Deze factor zal waarschijnlijk een rol spelen in de schaal van het bedrijf. Hoewel voor freelancers de financiële planning van hun middelen ook belangrijk is.
Multi platform
Een ander belangrijk argument bij het kiezen van een toolkit voor ontwerpers is het platform waarop deze of gene software werkt. In ons bedrijf werken ontwerpers uitsluitend op Mac-apparaten, en dat geldt ook voor de meeste front-endontwikkelaars. Daarom is het feit dat Sketch is exclusief voor OS X, werd voor ons geen probleem. Maar voor ontwerpers die Windows-apparaten tot hun beschikking hebben, is dit duidelijk geen beslissende kwestie. Natuurlijk kun je in de war raken en een OS X-emulator op Windows installeren, maar er kan niets goeds van komen, je laadt hoogstens je processor en besturingssysteem door onnodige processen te verwerken. In tegenstelling tot Schets, Photoshop heeft aparte versies voor Windows en OS X... Daarom blijft Adobe Photoshop op het gebied van multiplatformiteit de constante leider. Maar nogmaals, wat op het eerste gezicht een nadeel lijkt, is in een bepaalde context een sterk voordeel. Aangezien Sketch alleen voor de Mac bestaat, wordt alle gegenereerde inhoud weergegeven met behulp van de Mac-as met behulp van de standaard grafische engine van Apple. Dit is wat de ontwikkelaars maximale productiviteit en werksnelheid hebben bereikt.
Snelheid en grootte van het opstartbestand
Als native Cocoa-toepassing gebruikt Sketch niet-standaard interface-elementen tot een minimum, dus het heeft een klein volume. Het opstartbestand weegt slechts ongeveer 22 MB... Het is vrij goed geoptimaliseerd, in tegenstelling tot Photoshop, waarvan de grootte van het installatiebestand ongeveer is 1 GB.
integratie
Een belangrijk punt voor elke toolkit is de mogelijkheid om te integreren met andere software. Nadat bijvoorbeeld de lay-out van de site volledig is ontwikkeld en klaar is voor overdracht aan de front-end ontwikkelingsafdeling, wordt de kwestie van de daadwerkelijke overdracht van de broncode zelf voor de verdere ontwikkeling van het project. Tegenwoordig hebben zowel Sketch als Photoshop belangrijke integratietools. Beide editors kunnen exporteren materialen in software voor communicatie tussen ontwikkelaars en ontwerpers, zoals Avocode, Zeplin en anderen. Als we dit als een bedrijf beschouwen, dan is deze oplossing uiterst belangrijk, het helpt om geld te besparen op extra exemplaren van grafische editors voor front-endontwikkelaars.
Opleiding
Als u besluit om Photoshop onder de knie te krijgen of uw kennis van deze grafische editor uit te breiden, dan staat u tot uw beschikking massa aan educatieve bronnen... Er zijn trainingsmiddelen, zowel betaald als gratis. De kwaliteit van het materiaal varieert ook enorm, van primitieve artikelen van onbevoegde auteurs tot perfect gestructureerde opeenvolgende videotutorials door gekwalificeerde professionele trainers. Omdat Sketch een relatief jonge software is, het aantal opleidingsmiddelen is onvergelijkbaar kleiner dan Photoshop. En in de regel zijn dit betaalde materialen. Het bekende educatieve hulpmiddel Udemi heeft bijvoorbeeld minder dan 40 Sketch-cursussen. Er is echter al een overzicht van Sketch-beoefenaars. Hopelijk zal na verloop van tijd het aantal lesmateriaal op het netwerk evenredig toenemen met de groeiende populariteit van de grafische editor van Sketch.
