Ръководства за скициране

10 скица трикове, които биха накарали Оуен Уилсън да каже „Wooow!“ (Тонове GIF-та!)

Ако не сте получили референцията в заглавието, моля ви да гледате това видео. Моля :)

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

Все още няма късмет по този.

Не е, че се опитвам да разбия приложението, като се разхождам. Просто обичам да натискам границите му, за да видя какво ще се случи.

Ето бърз списък с някои трикове, които разкрих, докато обикалям:

1. Методът за писане

Да започнем нещата с гръм, нали?

Открих този метод преди около месец и това беше моят скрит талант на първите срещи. Пилетата го копаят, казвам ви. Странична забележка, може би вече знаете този трик от моята статия, свързан с класациите.

Започнете с драскане като детска градина с инструмента за молив (натиснете P на клавиатурата). За по-плътни области напишете купчина на едно и също място. Не забравяйте да замахнете от масата си за писане, за да създадете някои отшелници.

Задайте границата си, за да има широка пролука и извити краища. Presto! Току-що създадохте някои данни за случайно разпръскване. Поставете го тук, партньор

2. Граничен радиус на отделни върхове

Така че досега знаем, че можете да зададете различни радиуси на границите в полето за граничен радиус, като използвате наклонени черти:

ГОЛЯМА РАБОТА. Jk, доста готино!

Но! Можете също така да насочвате към отделни върхове наведнъж, което е реална спестяване на време за по-сложни многоъгълници.

3. Изравнете завъртените фигури, за да нулирате ограничаващата кутия

Представете това: Току-що създадохте рад форма и завъртите нещата около 45º. Сега нещата са кокетни, преоразмеряването е мъгляво и сякаш сте се всмукали под вълна, защото не знаете кой път се измисля.

Просто го изравнете, за да нулирате ограничаващото поле до добър ol правоъгълник:

4. Опция-плъзнете, след това Command-D за дублиране на форми и действия

Съставяне на списък с елементи? Спрете да копирате, поставяте и движите фигури / групи като doofus.

Задръжте опцията за задържане, докато влачите формата / групата до нейното предназначение, след което натиснете Command + D, за да я дублирате. Той не само ще дублира формата, но и ще възпроизведе разстоянието, което сте преместили:

Pssst ... това работи и с арт табла!

5. Променете настройките на Pathfinder на комбинирани форми

Колко пъти ви се е случвало това, когато се опитвате да комбинирате куп форми в едно:

Доста досадно, особено когато LobsterFest е точно зад ъгъла и ТИ ИЗПЪЛНЯВАШ ЛИГО, ДЖОН.

Добре, дъх. Просто изберете комбинираните форми на обекта и ги задайте на Съюз:

Може да си мислите, че това ще работи, но тъй като има форми, които изграждат дупките в буквите, те също са обединени. Чудесен.

За щастие, Sketch е умен и ви позволява да зададете различни операции за сливане на пътя за всяка подформа в комбинираната форма, така че лесно можем да извадим тези дупки:

EDIT: Въпреки че все още е добре да знаете, че можете да регулирате отделни операции за сливане на слоеве, Steffen Karspeck е страхотен и посочи, че бих могъл да избегна дупките в първата стъпка, като настроих моята Fill Preference. Виждал съм това сто пъти, но всъщност никога не съм отделял време да прочета какво означават двете опции. Можех да си спестя малко главоболие :)

Благодаря, Steffen!

6. Подреждане на символи за обекти на обекта

През целия си живот не мога да си спомня къде видях за пръв път тази техника, така че няма да взема заслуга за нея. Но това е умно като ад, така че тук е така или иначе.

Използването на символ за навигацията на приложението ви е чудесно, защото можете да го споделяте между страници. Недостатъкът е, че винаги ще трябва да имате някакъв вид Избран Nav Item слой, за да показвате активната страница в nav.

Нека се откажем от допълнителния слой, използвайки техника, която наричам „Подреждане на символи“:

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

Когато приключите, направете всичко това голям символ!

Тъй като Sketch позволява персонализиран текст в различни екземпляри на символи, можете да персонализирате текста във всеки от вашите слоеве на състоянието. За да изключите състояние, просто въведете интервал, за да „изчистите“ това състояние на текстовия слой. В GIF по-долу искам да бъдат избрани настройки, а останалите да са бели (състоянието ми по подразбиране):

В GIF по-горе преглеждате четири от същите символи, всеки от които представлява различни състояния, използвайки техниката за подреждане на символи. Това е чудесно, защото сега е много по-лесно да персонализирате неща като шрифт и размер на шрифта, защото не е нужно да се притеснявате за актуализиране на слоя Избран Nav Item над него.

7. Намерете слой

Ако даден слой не е в изгледа на списъка със слоеве, когато командвате щракване върху обект в таблото, няма да го видите маркиран. Това е доста досадно.

За щастие има полу-скрита функция за разкриване на слой в списъка със слоеве, привеждане в екрана за превъртане. Използвайте Command-Shift-J:

Това прави SUPER удобно бързо да прескачате директно до избрания слой, след което Tab около братята слоеве вътре в тази група.

Command - Щракнете върху слой, след което натиснете Command-Shift-J, за да разкриете слоя в списъка със слоеве.

Бонус Съвет

Ако все още нямате приставка, която да ви помогне да свивате слоеве, Опция - Кликнете върху папка, за да свиете бързо цялото й съдържание:

Когато отворите списък, който свивате, ще видите, че децата също са били свивани.

8. Бързи PNG-та - 4 начина!

Понякога просто трябва да издърпате PNG, но не искате да преживявате неприятностите на конфигурирането на вашите експортни настройки и след това да прекопаете файловете си, за да намерите къде се е запазило проклетото нещо.

Ето четири начина за разтърсване на PNG в Brilliant Technicolor GIF ™:

Метод 1: Плъзнете слоя с ArtboardМетод 2: Плъзнете експортиране / отрязване на ArtboardМетод 3: Плъзнете отделна група или слойМетод 4: Изтеглете от скицата, в други приложения
Бърз съвет: Ако работите върху модален дизайн, използвайте PNG за „под слоя“. Това ще ви спести от дублиране на целия дизайн на приложението под модала и ще ви спести от случайно щракване на слоевете по-долу.

Бонус! Тайлър Хауърт ми напомни, че можете също да експортирате PNG-та, като просто копирате слоя или самата платка. Напълно раздадохме това в статията, така че Тайлър получава заслугата за тази. Ето неговото допълнение:

Можете също така да копирате / залепите всеки артборд / група / слой във и извън Sketch. Копирайте артборд, преминете към Medium / Slack, поставете и отидете!
- Тайлър

Хот дог, пич. Този прави!

9. Бързо запълване на шаблони

Това е вид съвет за изгодни сделки два за един.

Съвет 1: За да създадете безпроблемен шаблон, създайте квадратен символ на таблото и го обградете с инстанции от себе си. Това ще ви помогне да дадете представа как ще изглежда вашият завършен модел.

Съвет 2: За да направим това бързо запълване на модел за друга форма, ще използваме техника, която научихме в стъпка 8.

Изберете фигурата, която ще бъде запълнена с вашия модел, отворете менюто „Запълване с изображение“ и плъзнете основния шаблон на полето в полето за преглед на изображението:

10. Обектив Боке

Очевидно винаги трябва да спестявате най-доброто за последно.

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

bokeh (n): визуалното качество на зоните извън фокуса на фотографското изображение, особено като изобразено от определен обектив.
(източник на изображение)

Това е наистина красив ефект, а прекомерната дълбочина на полето привлича погледа веднага към фокусната част на снимката.

Обикалях с моя метод на скриптове, опитвах го в различни размери, наслагване на различни надписани линии и добавяне на ефекти към всяка от тях.

Изображението по-долу е 100% скица, без фотография. Просто фин градиентен фон с три линии „метод на драскане“ с различен цвят, непрозрачност и гаусово размазване. Добавете шум слой, зададен към Overlay, и плеснете малко стъклен текст отгоре (градиент запълнете с горна и долна вътрешна граница). Ще имате доста убедително изглеждащ ефект на боке:

Следвайте ме в Medium / Twitter, абонирайте се за публикацията на UX Power Tools и ни следвайте в Twitter за актуализации, ново съдържание и други богати неща. Харесвайте, обичайте и споделяйте, ако се съобразявате!

Обичам ви хора.