Защо трябва да преминете от Photoshop към Sketch

През последните година-две приложението Sketch на Bohemian Coding набра скорост в славните интернет мрежи като „по-добра“ алтернатива на Photoshop. По-голямата част от тази похвала идва от общността за уеб и дизайн на интерфейси. Ако сте нещо като мен, тогава винаги търсите нови инструменти и по-добри алтернативи на съществуващ работен процес. Първоначално обаче бях колеблив относно предаването на моята 20-годишна палка на Photoshop.



В по-голямата си част Photoshop прави номера и го прави достатъчно добре. 'Защо да превключвам?' Мислех. Преки пътища на Photoshop са вторият ми език. Изпълнението на специфичен ефект или задача вече не изискваше много мозъчна мощ, тъй като вероятно вече бях правил нещо подобно много пъти. Това старо куче си мислеше, че Скицата е за готините деца в новото училище.



Тъй като бърборенето около Sketch се увеличи, любопитството ми най-накрая взе най-доброто от мен. Трябваше да се убедя сам защо Скетч се е запалил сред моите връстници. Тъй като щях да започна нов проект, реших, че моментът е подходящ. Ако щях да го направя, исках да дам всичко от себе си за една седмица.

Затворих Photoshop, изтеглих 30-дневен пробен период на Sketch и се гмурнах в дълбокия край без флотационно устройство, надявайки се да държа главата си над водата достатъчно дълго, за да разбера за какво става дума. Ако мислите да проучите Sketch, бих препоръчал този подход.



В рамките на два до три дни бях убеден. За пореден път се почувствах ентусиазиран от отварянето на даден софтуер и веднага събрах предимствата. Бързо се почувствах комфортно при изучаването на новия интерфейс. Припокриването с Photoshop беше напълно достатъчно. Бях влюбена. - Да! Мислех.

В тази статия ще разгледам няколко от основните функции на Sketch и ще ги сравня с техния еквивалент в Photoshop. Ако сте на оградата, търсите по-добра (и много по-евтина) алтернатива на Photoshop или толкова любопитни за нарастващата му популярност, тогава прочетете.

Здравей, приятелю

Sketch е създаден изключително за Mac. Ако някога сте използвали софтуера на Apple, по-специално Keynote, ще забележите сходство в неговия потребителски интерфейс



Sketch е създаден изключително за Mac. Ако някога сте използвали софтуера на Apple, по-специално Keynote, ще забележите сходство в неговия потребителски интерфейс

Sketch е ексклузивен за Mac OS X и според външния вид на раздела с често задавани въпроси за Bohemian Coding дори не се обмисля да поддържа Windows и Linux. Това е добре за нас, дългогодишните потребители на Mac. Ако изобщо сте запознати с приложенията за производителност на OS X (Pages, Keynote, Numbers) или сте използвали някакъв по-стар, прекратен софтуер от Apple (гледам ви iWeb), веднага ще почувствате, че сте се сблъскали стар приятел, който е пуснал по-зряла брада.

Подобно на това, което направих в Keynote, когато започнах да го използвам, първото нещо, което направих в Sketch, беше да персонализирам горната лента с инструменти. Можете да направите това, като просто щракнете с десния бутон върху него и хвърлите възможно най-много предмети върху него.

Комбинация от клавиши

Въпреки че Photoshop има лента с инструменти по всяко време, някои от инструментите на Sketch са малко скрити в началото

Въпреки че Photoshop има лента с инструменти по всяко време, някои от инструментите на Sketch са малко скрити в началото

Съветът, който получих от многобройни приятели и хората от Twitter, беше да науча преките пътища възможно най-бързо. Въпреки това, визуалното ръководство на инструментите по лентата с инструменти ми помогна да разбера по-добре възможностите на Sketch и как се справя с различни задачи. Много от инструментите ще са полупознати от Photoshop, но сега се намират на различни места. В случая на Скетч, по-единна област.

За да помогна за преминаването си от Photoshop, пренесох някои често използвани клавишни комбинации, като създадох потребителски клавишни комбинации в OS X. Ако не сте запознати с този процес, пригответе се да се влюбите. Това е доста лесно да се направи директно от системните предпочитания на вашия Mac. Също така, тук е удобен списък с преки пътища за скици, за да се запознаете: sketchshortcuts.com .

най-добрият начин за съхранение на ябълков молив

Фокус върху фокус

Не ме разбирайте погрешно: Photoshop свършва уеб сайта и макета на потребителския интерфейс и го прави добре. Той също така прави много други неща добре. Определя се като инструмент за всички. И знаете ли какво? Това е добре. Един от проблемите обаче е, че му липсва фокус като приложение за дизайн на уеб и потребителски интерфейс.

Фокусът на Sketch е специално върху тези, които проектират уеб сайтове, интерфейси и икони. В сравнение с Photoshop, менютата на Sketch изглеждат оголени. Приятна глътка свеж въздух. Няма повече да се бориш с бъркотията, която не е задължително да се преведе в мрежата. Инструментите и стойностите на Sketch се крият в това, което се превежда лесно в CSS и браузърите като цяло.

Например: създаване и персонализиране на настройките за оформление (т.е. създаване на мрежа). В Sketch предварително зададените полета ви позволяват да персонализирате общата ширина на вашата мрежа, улуци, колони и редове. Като човек, който винаги работи с отзивчиви мрежи, аз съм постоянно в тези настройки, преди да започна нов проект.

Предварителни настройки на Artboard

Друга характеристика, която демонстрира акцента на Sketch върху мрежата и потребителския интерфейс, са нейните предварително зададени шаблони и предварителни настройки на монтажната област. И за това съм благодарен.

Да предположим, че стартирате нов проект за приложение за iOS. Можете да създадете нов проект, както сте свикнали в Photoshop, или да изберете шаблона „Дизайн на потребителския интерфейс на iOS“, който Sketch предоставя под „Файл> Ново от шаблон“. Предимството тук е, че Sketch първо ви представя комплект за потребителски интерфейс на iOS за бързо макетиране на приложения за iPhone и плъзгане, да речем, нативната iOS клавиатура във вашия макет.

Наскоро се подигравах на изглед на карта за приложение за резервация, по което работех. Не трябваше да отварям отделен файл или да търся макет на iOS карта. Просто превключихте към страницата ми с елементи и копирайте и поставете.

Оразмерен до съвършенство

Трябва да добавите допълнителни 20 пиксела към този бутон 180px? Просто напишете 180 + 20

Трябва да добавите допълнителни 20 пиксела към този бутон 180px? Просто напишете 180 + 20

Подобно на Photoshop, Sketch's Inspector ви позволява да дефинирате точните размери и позиции на монтажната плоча. Скицата обаче има много малка тайна за своя инспектор за размер и позиция. То разбира математика! Не само събиране, изваждане, умножение и деление, но и проценти.

Искате ли да преместите бутон наляво 20 пиксела? Просто добавете '-20' към полето. Искате изображение, което да запълни половината от цялото художествено поле? Просто въведете „50%“ в полето за ширина. Брилянтно!

Един проект, един файл

Докато Sketch варира от Photoshop, тъй като съхранява всичките си страници в рамките на един документ, и двамата се справят с наслояване, групиране и организация по подобен начин

Докато Sketch варира от Photoshop, тъй като съхранява всичките си страници в рамките на един документ, и двамата се справят с наслояване, групиране и организация по подобен начин

С Photoshop моят проект и файлова структура изглеждаха по следния начин:

Папка BigTimeClient
- BigTimeClient_landing-page.psd
- BigTimeClient_about-page.psd
- BigTimeClient_contact-page.psd

Скицата се справя с нещата малко по-различно. В един файл на скица се поместват всички страници и монтажни плочи в рамките на един документ. Първоначално се притеснявах, че това ще смаже производителността на моя Mac, но оттогава създадох приложения за iOS с около 30 екрана и не изпитвах значителни проблеми с производителността.

Основната полза от този подход е, че можете да осъществявате достъп и да преглеждате всичките си екрани един до друг, така че е много по-лесно да правите промени и да сравнявате нещата. Ако се подигравате на различни отзивчиви точки на прекъсване, ще ви хареса абсолютно.

Наскоро Photoshop представи своята версия на множество монтажни дъски. Въпреки това, в Sketch е възможно да се организират всички монтажни дъски в страници в рамките на един документ, което прави тази функция много по-мощна. В противен случай множеството монтажни дъски и в двете приложения функционират много сходно.

Палитрата от слоеве в Sketch донесе ниво на комфорт при първото отваряне на приложението, тъй като имитира Photoshop по различни начини. Подобно на Photoshop, тук преглеждате, преименувате, търсите групи (папки) и елементи във вашия проект.

Един файл е подходящ за всички

Във Photoshop обикновено създавам три (или повече) файлови актива. Един за @ 1x и друг за @ 2x и още един за @ 3x. Спасяването им поотделно беше досадно. Освен ако не работите с векторни обекти и елементи 100 процента от времето, това стана болезнено. Sketch няма дори един растеризиран инструмент или елемент в приложението си. Е, освен ако не го завлечете, разбира се.

Когато създавах проект за дизайн на приложение за iOS във Photoshop, щях да проектирам в много по-голям размер на екрана си и да тествам върху огледално приложение, Skala Preview, на моя iPhone.

С Sketch работният ми процес при работа с Retina устройства и активи се промени и подобри драстично. Сега проектирам със стандартния размер на устройството. Тъй като всичко е вектор по подразбиране в Sketch, не трябва да се притеснявам да направя моята артборд необичайно голяма на работния си плот, за да мога да визуализирам работата чрез огледално отразяване (сега чрез Sketch Mirror). Работата от настолен компютър към мобилен се чувства по-естествено сега.

как да направя албума частен във

Нещо повече, запазването на различни размери елементи е толкова просто, колкото щракването върху бутона за експортиране, добавянето на толкова размери и файлови формати, колкото искате, и ... е, това е всичко. Можете дори да плъзгате и пускате слоеве и групи на вашия работен плот, за да спасите нещата - въпреки че бутонът Експортиране ви дава повече контрол. Това е далеч една от любимите ми функции на Sketch и една от най-големите спестяващи време.

От умен до символичен

Интелигентните обекти на Photoshop и свързаните интелигентни обекти са изключително удобни и мощни. Използвах ги често, особено когато проектирах приложения и интерфейси, които използваха много повтарящи се елементи.

Ако не сте запознати, ето един случай за бързо използване. Проектирате навигация за мобилни точки за прекъсване и вече сте на 15 екрана дълбоко в работния процес, когато осъзнаете, че нещо трябва да се промени. Ако не работите със свързани интелигентни обекти, ще трябва ръчно да отворите всеки файл и да направите промяната във всеки един. С свързаните интелигентни обекти можете да промените един елемент и всички негови аналози ще се променят автоматично. Огромно спестяване на време!

Creative Cloud Libraries

Creative Cloud Libraries е мой личен фаворит. Лесен достъп, плъзгане и пускане на обекти или слоеве от един документ на Photoshop в друг

Creative Cloud Libraries е мой личен фаворит. Лесен достъп, плъзгане и пускане на обекти или слоеве от един документ на Photoshop в друг

Друга от любимите ми функции на Photoshop, която също е доста нова за програмата, е Creative Cloud Libraries. Просто плъзнете често използваните активи в техния собствен панел „Библиотеки“, за лесен достъп, когато искате да ги плъзнете и пуснете в други области на проекта. Ако искате да прочетете за CC библиотеките по-задълбочено, отидете тук .

Символи

Символите на скица са подобни на свързаните интелигентни обекти на Photoshop, но малко по-адаптивни и мощни

Символите на скица са подобни на свързаните интелигентни обекти на Photoshop, но малко по-адаптивни и мощни

Какво общо имат свързаните интелигентни обекти и библиотеки във Photoshop със Sketch, питате? Е, Sketch има това малко, голямо нещо, наречено символи. Мисля за това като за любовно дете на Linked Smart Objects and Libraries, с тире лют сос за допълнителен удар.

Със символи можете да използвате повторно активи или групи на страници и монтажни плотове. Направете промяна в символа и, горещо куче дигити, той се променя навсякъде! Той дори помни пространствени подравнения, ако например коригирате активи и / или текст в списък. Дори думите на текста се променят.

Можете да използвате повторно активи на различни страници и промените ще бъдат преведени

Можете да използвате повторно активи на различни страници и промените ще бъдат преведени

И ето това допълнително тире лют сос, за което говорих: „Изключете текстовата стойност от символа“. Вземете например стил на бутон, който се повтаря, но с различен текст. Искате ли да промените стила на бутоните, но да запазите текста? Няма проблем. Няма допълнителна опция „Промяна на всички екземпляри“. Магия!

В допълнение към група елементи, които се актуализират автоматично, ще намерите радост и при дефинирането на стилове за слоеве и текст. Дефинирайте, например, H1 тагове в GT Walsheim - размер 48 и със сянка, и всички екземпляри ще се актуализират навсякъде. Отново, като магия!

Оформяне на нещата

Когато проектирах потребителски интерфейси, приложения и уебсайтове в Photoshop, обикновено използвах фигури, за да създавам разнообразни елементи. Ще намерите подобна основа със Sketch. Shapes е мястото, където прекарвам по-голямата част от времето си, създавайки бутони от правоъгълници, запълвайки или маскирайки големи правоъгълници с запълвания на изображения, изчертавайки разделителни линии и т.н.

Photoshop ви предоставя разнообразни начини за създаване на векторни и невекторни форми и пътеки. Въпреки това Sketch е изграден около мащабируемост. Всичко е базирано на вектор и формите могат лесно да се регулират в движение.

Например можете да се върнете назад и да добавите радиус на ъгъл към правоъгълен бутон, просто като изберете опцията „Радиус“. Можете също така да запълните всяка форма със снимка и да промените размера на която и да е по неразрушителен начин. Това е чудесно, когато тествате как отзивчивите изображения ще се мащабират и преоразмеряват.

Когато маскирате изображение във форма, личен съвет е да не използвате опцията „Използване като маска“. Вместо това „Попълнете с изображение“ ви дава много по-голяма гъвкавост през повечето време.

Също така има общо между комбинациите от форми във Photoshop и Sketch. Макар че аз лично не създавам персонализирани икони в Sketch (или какъвто и да е софтуер за това), все пак се нуждая от уникални форми тук и там. Предполагам обаче, че дизайнерите на икони използват тази функция доста често.

Отвъд скица

Ако търсите по-евтина алтернатива на Photoshop за по-графичен дизайн, опитайте Affinity Designer

Ако търсите по-евтина алтернатива на Photoshop за по-графичен дизайн, опитайте Affinity Designer

Тук току-що засегнах някои от функциите, разликите и познанията при преминаване от Photoshop. Sketch се чувства като голям скок в посока на по-добър, по-добре настроен работен процес за проектиране на потребителски интерфейси и сайтове. Това обаче не премахва необходимостта от приложение за „фото магазин“, като Photoshop или Affinity Designer. Силата на Sketch е във фокуса му като приложение за дизайн на уеб и потребителски интерфейс. Нито повече, нито по - малко.

Кривата на обучение от Photoshop до Sketch беше достатъчно бърза. Отне ми три дни и половина, за да се чувствам удобно за около 90% в приложението и минаха три седмици, преди да почувствам, че имам 99% разбиране за нещата. Можете да прочетете повече за моя опит на моя сайт, където живея в блогове за пътуването си .

Потребителската база на Sketch нараства бързо. Неговата общност от приставки е впечатляваща и ефективно разширява възможностите на Sketch. Ако търсите нов инструмент и то на изключително разумна цена, Sketch е чудесен вариант. Според мен в момента това е най-добрият избор за работа с потребителски интерфейс. Радвам се за бъдещето му.

Думи : Брайън Хоф

Брайън Хоф е основател и креативен директор на Brian Hoff Design, базирана във Филаделфия бутикова дигитална агенция с фокус върху уеб и мобилни платформи и продукти. Тази статия първоначално е публикувана в брой 273 от нетно списание .

Хареса ли ви това? Прочетете тези!