Skisse vs Photoshop: 5 Ekspertdesignere Deler Sine Tanker

debatten om Skisse vs Photoshop fortsetter å rase. Det er ikke nektet At Photoshop fortsatt er Det mest brukte verktøyet for å lage mockups både for mobil-og webdesign.

Selv om Det er sant At Adobe Photoshop først og fremst var ment som et verktøy for fotografer å redigere sine fangede bilder, gir de overbevisende funksjonene webdesignere mulighet til å komme opp med slående og nyttige nettsteder også.

Verktøykassen For Webdesigner

Ubegrensede Nedlastinger: 500.000 + Web Maler, Ikonsett, Temaer & Design Eiendeler
Starter på bare $16.50 / måned!


LAST NED NÅ

hammer

Mange webdesignere favoriserer Fortsatt Photoshop

Photoshop:En Designers Hammer

For Lengst Har Photoshop vært Et kanonisk verktøy for designere. Faktisk anser mange designere fortsatt dette verktøyet som deres «hammer». Mange kunder av webdesignere er klar over HVA PSD er. Disse innfødte filer laget I Photoshop er sammensatt av lag som kan rakne og manipulert.

Klienter ber vanligvis om at de skal brukes til referanser, mens front-end-utviklere vet hvordan de skal brukes.

de er veldig enkle å dele og oppdatere med andre medlemmer av et designteam. Men Siden Ankomsten Av Photoshop CC 2014 Har Photoshop siden da vist at Det er mer enn bare et fotoredigeringsverktøy, da Det også kan være et vennlig verktøy for webdesignere som jobber med digitale design.

følgende er noen av funksjonene I Adobe Photoshop som gjør det til et nyttig verktøy for webdesign:

  • Biblioteker. Ressursene synkroniseres med En Creative Cloud-konto som kan brukes på Nytt i Annen Adobe-programvare, – filer og fremtidige prosjekter.
  • Smarte objekter. Akkurat som sine biblioteker, kan de smarte objekter gjenbrukes i flere situasjoner, enten i en enkelt fil eller med andre filer.
  • Trekk ut eiendeler. I Disse dager Har Photoshop gjort det mulig for webdesignere å trekke ut objekter, elementer og bilder for web-og mobilelementer etter å ha integrert mer omfattende funksjoner. Ved hjelp Av plugins som Cut&Slice Og DevRocket, er det enkelt å eksportere disse eiendelene.
  • Lag comps. Lag comps gjør det mulig for en designer å lage variasjoner av et design ved å tilpasse attributter, posisjonering og synligheten av elementer uten å måtte lage flere filer.

La oss innse dette faktum: Photoshop er fortsatt det første designverktøyet som en designer bør mestre. Jeg anser Photoshop som mor Til Alle Adobe og web deisgn programvare. Alt du trenger (vel, nesten alt) er der inne. Du må bare strekke kreativiteten din litt. Men å være ufullkommen også, Photoshop har sine grenser til tider. Noen ganger kan det ikke synes å utføre slik vi vil at den skal være.

Designere har ofte problemer Med Photoshop-funksjoner som ikke eksisterer. Denne vanskeligheten krever ekstra programvare. Så hva designere gjør er å søke, laste ned og åpne en annen programvare bare for å passe behovene til deres fantasi.

nå har du som designer to valg: enten blir du kvitt Photoshop Og ser etter en mer allsidig programvare (som jeg tror ville være veldig vanskelig, om ikke umulig), eller se etter løsninger som kan gjøre Photoshop bedre. Derfor plugins.

Plugins er utvidelser som du kan laste ned og installere i et program. De sparer tid, problemløsing og i det lange løp penger for designere, og dette tillater dem også å strekke sin kreativitet mer.

Fordi Jeg elsker Photoshop veldig mye, så jeg etter plugins som kan hjelpe designere i deres designbehov. Her er de:

24 500+ UI Kits, Nettsted Maler, Skisse Maler, Photoshop Handlinger og Skrifter er nå tilgjengelig for bare $29 per måned med Envato Elementer

ved å bli Med Envato Elements får du tilgang til mange ressurser For Sketch og Photoshop, samt mange andre nyttige designelementer. Alt dette er tilgjengelig for et enkelt månedlig abonnement På Envato Elements. Bli med i dag, og få tilgang til et enormt og voksende bibliotek med over 24 500 kreative ressurser med ubegrensede nedlastinger.

SKETCH

Sketch har vært aggressivt på vei til toppen

The Rise Of Sketch

sarahparmenter«Jeg elsker Sketch. Jeg gjorde bytte for en tid siden, og jeg har ikke sett tilbake. Jeg var En Photoshop talsmann for hele mitt arbeidsliv før Sketch kom sammen, og innen en uke, jeg var en total konvertere. Ingen angrer overhodet. Jeg kjenner mange designere som har gjort bryteren, men faktisk mange designere jeg snakker på konferanser med, er fortsatt 50% Photoshop og 50% Sketch – det vil forandre seg, de vil se lyset snart!»- Sarah Parmenter

Etter regjerende øverste i mer enn to tiår, Er Photoshop overlegenhet endelig utfordret med ankomsten Av Sketch. Sketch har blitt en av favoritt emner for diskusjon av de som tilhører web og UI design samfunnet. Men, hva har Gjort Skisse holde webdesign industrien abuzz siste?

Du Har Alt Du Trenger

sammenlignet Med Photoshop er det mye enklere å organisere alle dokumentene du har og gjøre revisjoner På Sketch, takket Være Sketchs rene og enkle grensesnitt. Likevel kommer denne appen bare med verktøy som kan tweaked ved HJELP AV CSS3 og HTML.

I Motsetning Til Photoshop har Den IKKE 3d-verktøy, irrelevante fotofiltre og andre funksjoner som kan påvirke designhastigheten. Kort Sagt, Sketch tilbyr bare de tingene som er avgjørende for ditt web-og UI-prosjekt, slik at du kan fullføre arbeidet ditt i et mye raskere tempo.

selvfølgelig, ikke alle webdesignere liker dette. For å kompensere for mangelen på verktøy, Har Sketch mange plugins som er sammenlignbare Med Photoshops verktøy, og de har alt dekket: fra en enkel plugin som lar deg bytte kantfarge og fyllfarge til et bredt spekter av innholdsgeneratorer.

Artboards

Å Lage flere artboards er et stykke kake med Skisse. Bare trykk A og voila, du har en tavle! Deretter Viser Sketch en liste over de 28 vanligste skjermikonstørrelsene du kan velge mellom. Dette er rett og slett nyttig når du oppretter en responsiv design fordi å få de riktige dimensjonene når du oppretter en mockup er en lek.

Moodboards

Sketch gjør også moodboards enklere å lage og en bedre prosjektressurs. Først opp, merk at alle filene dine kan leve i ett dokument.

Sketch inneholder en side skuff i artboard sidepanelet som lar deg raskt bla mellom filer. For store prosjekter som denne var det spesielt hyggelig å kunne hoppe raskt frem og tilbake mellom nettstedstreet, humørbrettet og mockupene dine mens du designer eller gjør endringer.

Sketch Toolbox

før Du bruker Sketch, anbefales det sterkt at du laster Ned Sketch Toolbox først. Dette er en plugin manager som lar deg bla direkte og installere plugins du ønsker.

Toolbox er også en stor hjelp for deg å riktig overvåke hva andre plugins du bruker.

Vektorbasert

vi er nå i en tid med responsiv design, og nøkkelen til å oppnå dette er å bruke vektorer til å skape en. Designere må vurdere hd-versus normal definisjon skjermer, smal skjerm versus brede skjermer, og mange andre ting når du kommer opp med et design.

Selvfølgelig er det av største betydning å jobbe med et design som skalerer alle formatene. Men kommer med en egen mockup for hvert sett av dimensjoner er en grundig prosess, krevende mye tid. Med Sketch er dette imidlertid ikke et problem på grunn av funksjoner som gjør at du fritt kan endre størrelsen på objekter. Tenk deg tid og energi som du kan spare bare med denne funksjonen alene.

Sketch Mirror

I motsetning til andre vektorbaserte programmer er Sketch også pikselbevisst. Siden figurene du lager alltid kommer til nærmeste piksel, er det ikke nødvendig å bekymre deg for uklare linjer og bilder.

Med Sketch Mirror plugin kan du enkelt åpne dokumentene dine og se hvordan designet ditt vil vises på en iPad eller en iPhone. Pluggen lar deg også umiddelbart forhåndsvise endringene du har gjort, og hjelper deg med å gjøre endelige tilpasninger basert på hva klienten ønsker, spesielt hvis du er ansikt til ansikt med hverandre.

AEFlowchart Plugin

AEFlowchart plugin er det du trenger for å lage nettsteder for nettstedene du jobber med. Det kan hjelpe deg med å overvåke et nettsteds nye organisasjon. Dette gir en stor letthet for referanse i design som du arbeider med, uten å måtte opprette et annet program som vil forbruke mye av din tid.

Tekststiler I Sketch App

en interessant ting Om Sketch er at du enkelt kan lage typografiske elementer. Du kan for eksempel komme opp med tekststiler som du kan bruke i innebygde stiler, for eksempel overskriftsblokker og overskrifter. Senere kan du bruke det du har opprettet i andre dokumenter.

hvis klienten din ikke liker skriften du har laget, er alt du trenger å gjøre å oppdatere den en gang, og stilen i hele prosjektet blir automatisk oppdatert. Hva er mer imponerende Er Skisse bruk av innfødte tekst gjengivelse. Dette betyr at teksten du brukte i designfilen, er nøyaktig den samme i nettleseren.

Enkel Fargestyring

Administrere fargene på prosjektet du jobber med, er også en tur i parken med Skisse som du bare kan lage en fargepalett på humørbrettet. De vanligste fargene du bruker vil bli trukket ut over referansene dine, slik at du enkelt kan bruke dem i fremtiden når du jobber med et annet prosjekt.

videre, Siden Sketch gir deg tilgang til alle filene dine i et enkelt dokument, er det mye enklere for deg å kopiere og lime inn objekter og objektstiler, inkludert fargeoverganger og fargefyll, fra alle filene dine. Dette er noe Som Photoshop er tydelig mangler, sannsynligvis ikke innser den enkle denne funksjonen gir.

Innebygd Layout Grid

En annen standout funksjon I Sketch er dens innebygde layout grid. I motsetning Til Photoshop trenger du ikke å stole på et plugin eller en rekke retningslinjer eller separate lag som har et provisorisk rutenett, noe som ikke er veldig lett å redigere. Med Sketch, låsing en gjennomsiktig layout guide og endre kolonne og rennestørrelser er et stykke kake.

hvis du vil justere layoutrutenettet, trenger du bare å gå til «Vis», og deretter gå til «Layoutinnstillinger». Hvis du vil slå av rutenettet, må du trykke På Control + L.

Ubegrensede CSS-Muligheter

danedwards«jeg liker også hvordan Sketch har innarbeidet CSS logikk i app. Dette gjør konvertere design TIL CSS mye enklere, som du må bruke CSS logikk når du bruker stiler. En annen funksjon som er veldig praktisk for å påskynde design/utvikling crossover Er Automatisk Kutting.»- Dan Edwards

som nevnt i den tidligere delen av artikkelen, kan du gjøre nesten alt I CSS Ved Hjelp Av Sketch. Hvis du klikker på objektet og justerer radiusen i sidepanelet, kan du enkelt komme opp med avrundede hjørner på handlingsknappen.

hvis du vil ha gradientoverlegg på bilder, tar det bare ett klikk å legge til. Selv om det er sant at stilige css3-verktøy ikke er eksklusive For Sketch, hevet denne appen stolpene høyere ved å gi designerne mulighet til å kopiere CSS-stiler nøyaktig for ulike elementer. Det tar bare et høyreklikk på et objekt for deg å kopiere stilene og lagets navn som en kommentar over den spesifikke koden.

dette etablerer en sømløs forbindelse mellom design og utvikling. I Tillegg Gjør Sketch det mulig å konvertere en gruppe objekter til et symbol som kan kopieres, gjentas og synkroniseres til alle situasjoner endringene som er gjort i objektet. Sikkert, å lage OG duplisere CSS-stiler og designe replikert innhold er stressfritt med Sketch.

«Symbolsk» Skisse

Det er mye lettere å spille og eksperimentere med størrelsen på bilder, tekst og farger samtidig med bruk av symboler. De bare gjøre livet mye enklere. Selv mellom maler fungerer symboler bedre.

Derfor, Hvis Du vil bruke samme layout på en bloggs sideoppføringspost, er alt du trenger å gjøre, å replikere forekomsten av symbolet der, og endringene du gjør, blir automatisk synkronisert i dem alle.

hvis du vil legge til ekte innhold, for eksempel en overskrift eller et bilde, må du høyreklikke og fjerne objektet fra det første symbolet. Kult, ikke sant? Sikkert, Skisse symboler kan lette arbeidsflyten ved å kutte arbeidstiden kort.

buttons

Dynamiske knapper er en Av De mest bemerkelsesverdige funksjonene I Sketch

Sketchs Dynamiske Knapper

selv om det er sant at symboler er gode for produktoppføringer og blogginnlegg, Er De Dynamiske knappepluggene gode for knappene på siden. Denne plugin er primært ment for å skape et symbol for knappen.

utfyllingen av sidene justeres imidlertid automatisk basert på hvor lang teksten er. Dette vil spare deg for mye tid på å jobbe med designet ditt, spesielt hvis du jobber på sider som har flere knapper.

det du trenger å gjøre er å bare lage et tekstlag med den første knappeteksten, velg plugin, og skriv Inn Kommando +J. resultatet? En dynamisk knapp som du kan bruke om og om igjen gjennom hele designet hvis du redigerer teksten til knappen.

Day Player Plugin

Fylling av plassholdere fra forskjellige bildetjenester er uten svette hvis Du bruker Day Player plugin. Å gjøre det vil også være mye enklere hvis Du bruker Lorem Pixel for å få de spesifikke bildene du vil ha.

Velg plugin-modulen og bildetjenesten du vurderer, rediger alternativene for plassholderen og sett den inn i objektgruppen for produktet. Tenk deg hvor lett å bære på en oppgave er med denne plugin i forhold til å søke bilder på nettet for plassholdere!

Content Generator Plugin

Content Generator Plugin er det du trenger hvis du vil legge til mer filler innhold. Med denne plugin, alt du trenger å gjøre er å velge bildet plassholder bokser for hvert teammedlem og velg en mannlig eller kvinnelig avatar i plugin alternativer.

Innebygd Generasjon Av Punktlister

En annen imponerende funksjon er den innebygde generasjonen av punktlister og nummererte lister. Dette er en viktig funksjon som ikke finnes i mange designprogrammer, inkludert I Den mye brukte Photoshop.

med denne funksjonen er det ikke nødvendig for deg å utsette deg for en tidkrevende og kjedelig prosess for å lage en godt formatert tekst som vises bra i en nettleser.

Støtte For Flere Tegnebrett På Ett Lerret

Med Photoshop må du lage mange PSD-filer og bytte mellom vinduer mens du jobber med mange mockups. Heldigvis Har Sketch en funksjon som støtter flere artboards på ett lerret. Du kan se mockupene på skrivebordet, nettbrettet og mobilen din i bare en visning. Dette gjør at du kan jobbe på alle dine mockups samtidig.

hvis du redigerer symboler, farger eller tekststiler, kan du være klar over effekten av endringene du gjør i alle modeller. Med dette kan du enkelt bli oppmerksom på innholdsflyten og forbindelsene som skjer mellom de forskjellige enhetene.

Eksportere Eiendeler

geoffgraham«Eksport er en vanlig oppgave, Men Sketch 3 forbedrer prosessen ved at du kan angi ulike oppløsningsnivåer for dine skivede komponenter. Det betyr at du kan lagre det samme stykket i flere filer som støtter forskjellige skjermoppløsninger i ett slag.»- Geoff Graham

En av De mest interessante tingene Med Sketch er at det gjør eksport av alle filene mye enklere. For eksempel, hvis du vil eksportere ikonknappene som brukes i mobilnavigasjoner, er alt du trenger å gjøre, klikk på en gruppe lag og klikk på» Eksporter » – knappen nederst til høyre. Du kan deretter lagre disse ikonene for web ENTEN I SVG eller PNG-format. Dette inkluderer alt i forhold til visning av eiendeler på forskjellige enheter.

Sketch Style Inventory Plugin

Med Sketch Style Inventory plugin, lage en oversikt over alle HEX koder av farger og fargeprøver som brukes på siden er en lek. Dette er imidlertid ikke bare begrenset til farger; du kan også bruke den på tekststiler.

sketch vs photoshop h2

begge verktøyene har sine egne plusser og minuser

Sketch VS Photoshop: Hva er Best for deg?

Så, hva bør du gå for: den stadig kjente Adobe Photoshop eller ustoppelig Skisse?

her er listen over den grunnleggende forskjellen mellom disse to:

  • Gjengivelse. Når Det gjelder gjengivelse, Har Sketch en som er nær web. Det samme kan ikke sies Om Photoshop.
  • Snarveier. Photoshop vinner denne runden som den har mange snarveier. Sketch mangler tydelig snarveier som kan bidra til ytterligere enkel arbeid.
  • Dokumenter. Sketch har små dokumenter mens Photoshop har store. Denne lille dokument filstørrelse er hva du kan forvente fra en vektor app. Siden de fleste filer som er opprettet Ved Hjelp Av Sketch, er lavere enn 4 mb, er de ikke bare enkle på harddisken, men de er raske å laste opp og jobbe med.
  • Bibliotek. Photoshop har ett bibliotek, Sketch har ingen.
  • Rutenett. Sketch har innebygde nett, mens Du Med Photoshop må lage dine egne nett.
  • Fargestyring. Adobe Photoshop har en utmerket fargestyring. Dette er i motsetning Til Skissen.
  • Søknad. Sketch vinner denne runden igjen fordi det muliggjør raskere program i forhold Til Photoshop, som er treg.
  • Symboler og Objekter. Symboler Er Til Skisse, objekter Er Til Photoshop. Ser ut som det er et slips, va! Skissesymboler kommer imidlertid i samme størrelse, mens Objektene I Photoshop kommer i forskjellige størrelser.
  • Illustrasjonsbrett. Sketch har en klar fordel som det kommer med flere artboards. Dette er i motsetning til Single artboard Av Photoshop.
  • Måling. Klart, Sketch vinner denne. Med et markeringsverktøy åpner du infopaletten, tegner avstanden mellom 2 objekter, og du kan allerede sjekke resultatene. Dette er faktisk en avansert måling som Bare Sketch kan gi. Klart, Skisse tilnærming er ikke bare mer direkte, men enklere, også. Hvis Du bruker Photoshop, er dette bare ikke mulig da linjalen som den gir, er tungvint.
  • Zoom visninger. Denne runden går Til Photoshop som den har flere nivåer av zoom. Skisse har bare en.
  • Tilpasning. Med sin ikke-destruktiv tilpasning, Skisse har overtaket. Du må bare skrive inn et tall i radiusen, og du er god. I Tilfelle Av Photoshop må du koble til en ny radius og tegne figuren din, og du må sørge for at du kopierer de nøyaktige dimensjonene
  • Vekt. Sketch er lett, Mens Photoshop veier mye tyngre.
  • Fotoredigering evner. Vel, denne runden går Til Photoshop da den først og fremst ble opprettet for dette formålet. Sketch gjør imidlertid opp for dette med spesifikke funksjoner som kan levere digitale design som er godt designet.
  • Brukervennlighet. Sketch er en app som bare er eksklusiv For Mac. Adobe Photoshop Creative Cloud kan imidlertid brukes av Både Mac-og PC-brukere.

Skisse: En Reell Trussel Mot Photoshop

brianhoff«Jeg er overbevist om At Sketch for øyeblikket er det beste verktøyet for å designe nettsteder, brukergrensesnitt og apper.»- Brian Hoff

Klart, Med de mange fordelene Med Sketch, har Den upstaged Adobe Photoshop. Betyr dette, da, at du bør gå for det, spesielt hvis du er bare en nybegynner når det gjelder webdesign?

vel, det kommer til å bli et ganske tøft spørsmål å svare på. Det er sant at mange designere allerede gjør bryteren Til Sketch fordi det for en ting bare koster $ 99. På Den annen side Kan Adobe Photoshop Creative Cloud få deg til å bruke $49. 99 for et månedlig abonnement.

winner

Lojalitet spiller en stor rolle Hvorfor Photoshop fortsatt regjerer

Sketch Er Flott, Men Mange Er Fortsatt Lojale Mot Photoshop

Khoi-Vinh«jeg kan se problemer med å bytte filer med andre designere hvis en eller flere av dem ennå ikke har byttet Til Sketch. Men skjønnheten i webstakken er at du kan generere eiendelene, men du vil, så Fra det perspektivskissen kan du sende Ut PNGs eller hva Som Helst Som Photoshop kan.»- Khoi Vin

på dette punktet ser det imidlertid ut til at en fullstendig utvandring til Skisse er usannsynlig. For det første er folk i det hele tatt motstandsdyktige mot forandring, uansett hvor stor og lovende den forandringen kan være.

Dessverre er mange selskaper ikke klare til å kvitte seg med komforten Ved Å bruke Photoshop for UI-designprosjekter. Bytte Til Skisse vil kreve tid for alle på et lag for å forstå hvordan denne appen fungerer til de endelig kan bli komfortable med å bruke den.

Med dette kan det sies at Det fortsatt er trygt å være Med Photoshop. Når du har mestret å bruke» regjerende konge», Photoshop, så kan du begynne å lære Skisse. Tross alt er det ditt ansvar å kontinuerlig lære nye verktøy og tilpasse seg bruken når det er nødvendig.

vi håper virkelig du fikk en bedre ide om begge gode verktøyene, nå vil vi dele noen fantastiske jukseark.

Konklusjon

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.