Ви требаат овие додатоци на Фотошоп за дизајнирање на вашиот екран; Веб дизајн

Ажурирање на последната статија:
2 јануари 2020 година

Фотошоп е мртов!

Добро, Фотошоп за дизајни на екрани е мртов!

Овој впечаток може барем лесно да се појави ако може да се верува во заедничките мислења и извештаи за одговорен веб-дизајн и новите работни процеси за веб-дизајн.

Фотошоп сепак не е мртов за дизајнот на екранот. Влогот само се смени.

Ретко се случува комплетните дизајни на екранот прво да се креираат во Фотошоп, а потоа - по одобрување од клиентот - да се спроведат со точност на пикселот. „Во минатото“ не беше невообичаено сите под-страници прво да бидат дизајнирани во Фотошоп. Тоа брзо резултираше со двоцифрен број датотеки со слики. Промените беа досадни. За среќа, тие времиња завршија (добро, не секогаш и секаде).

Фотошоп сè уште има своја причина за веб-дизајнери.

Сликите, графиките и илустрациите сè уште се соодветно обработени прво во Фотошоп и потоа се вметнуваат на веб-страницата.

И сега и тогаш повторно комплетни дизајни на екранот. Фотошоп веќе има неколку опции за уредување за овие различни случаи. Но, постојат некои додатоци кои ја прошируваат функционалноста. И некои од нив се особено интересни за веб-дизајнерите.

Потребни се 17 корисни додатоци на Фотошоп приклучоци за дизајнери на екран.

Водич

Водичите се корисна алатка. Но, создавањето големи мрежи со тоа може да биде болка во Фотошоп. Екстензијата GuideGuide помага при обемни опции за поставување.

Број на колони, ширина на колона, проред, маргини се само некои од опциите. За секој од дизајните на екранот креиран во Фотошоп, неопходна алатка.

FlatIcon

Интернет-страницата FlatIcon нуди избор од десетици илјади икони за бесплатна употреба. Со оваа наставка, овие икони се исто така брзо достапни во Фотошоп без да мора да го напуштат интерфејсот на програмата.

Велоситеј

Velositey е продолжување на Фотошоп за брзо создавање прототипови на дизајнот.

Постојат многу достапни стандардни содржини. Со еден клик на глувчето, може да се вметнат типични елементи за различните области со содржина, како што се заглавие, содржина или подножје:

Списокот со функции има што да понуди:

5 различни елементи на заглавието
6 различни лизгачи
5 различни области со содржина
11 различни подножја
8 различни модули за содржина
1170px мрежен систем
Генератор на икони на мапа
Генератор на фавикон
Поддршка на Photoshop CS6 & CC

Приклучокот е секако добар за жични рамки или првични идеи за дизајн.

Вметнатите елементи не се визуелен белег. Меѓутоа, бидејќи во Фотошоп се создаваат различни слоеви, тие можат брзо да се прилагодат и индивидуалниот дизајн може да се креира многу лесно.

Патем, мрежата креирана со Velositey ги има истите димензии како популарната рамка за Bootstrap.

Корисно упатство го објаснува прототипирањето со Velositey: Распоред на прототипови со Velositey за Photoshop.

FontAwesome PS

Font Awesome е таканаречен фонт за икони. Фонтот содржи над 500 икони (наместо букви), кои можат да се интегрираат преку CSS и да се прикажат и форматираат на веб-страницата.

За да можете да пристапите до овој базен со икони додека дизајнирате во Фотошоп, тука е додатокот FontAwesome PS. Иконите потоа можат лесно да се вметнат во вашите сопствени дизајни со помош на влечење и паѓање.

Контрола на слоеви

Layrs Control е колекција од 7 скрипти кои ја олеснуваат секојдневната работа на Фотошоп.

Пред сè, функциите ја олеснуваат едноставната, но мачна работа на слојот:

Променете ги имињата на повеќе нивоа.
Избришете ги прикажаните ефекти на слојот.
Растеризирајте ги ефектите на слојот.
Избришете ги празните слоеви.
Растеризирајте паметни објекти.
Пронајдете слични нивоа и папки за нивоа.
Претворете слој во паметен објект.

Рендер.ли

Со помош на Render.ly, целосните датотеки во Photoshop можат да се извезуваат како слики. Ова е секако корисно при презентирање на комплетни дизајни на екранот.

Но, она што е навистина посебно се дополнителните функции. Благодарение на едноставните кратенки на буквите за имињата на слоевите, може да се зачуваат различни состојби. Ова е возбудливо, на пример, со паѓачки менија, состојби на лебди или други ефекти на поместување. Дури и единечни слики од слоеви или икони може да се извезат на овој начин.

CSS3PS

CSS3PS ги претвора Photoshop слоевите во CSS3 инструкции. Ова ги вклучува, пред сè, стиловите на слоевите, но исто така и некои други поставки како што се големината на објектот или заокружувањето на аглите.

Конверзијата на CSS не секогаш работи правилно, но сепак може да заштеди многу работа.

Шапка на CSS

Стилови на слоеви, форматирање на текст, стилови на пасуси, проред - CSS Hat го претвора сето ова во CSS код во датотека во Photoshop. И во добар квалитет.

Речиси 35 американски долари се добро инвестирани во овој приклучок.

Композитор

Го знаете проблемот:

Неколку страници се дизајнирани во една датотека во Фотошоп. Потоа, прилагодувате едно ниво, на пр., Позицијата на логото и мора да ја направите промената и во сите други нацрти. Досадно е и одзема многу време.

Тука влегува композиторот. Со еден клик, можете или да прилагодите индивидуални аспекти како што се стилови на слоеви, позиционирање или видливост или сите одеднаш. Ова заштедува многу време.

Авокод

Avocode се опишува себеси како мост помеѓу дизајнот и техничката имплементација. Авокодот не е алатка PSD на HTML, но обезбедува некои функции за генерирање на соодветен изворен код од датотека во Фотошоп.

Фотошоп-датотеките може да се отворат во Avocode и соодветниот CSS-код генериран од одделни елементи. Текстуални елементи, проред, но и палети на бои може да се генерираат за CSS, но Less и Sass. Индивидуалните слики исто така може да се извлечат, дури и од повеќе нивоа.

WebZap

WebZap е платен приклучок (19 долари) што е одличен за прототипови за брз дизајн.

Различни елементи на дизајнот се достапни што можат да се вметнат во дизајнот со еден клик.

Ретинизирај го

Ретинизирај Тоа е акција на Фотошоп што зачувува варијанта на слика во двојна и/или тројна големина со притискање на копче. Толку совршен за употреба на ретинални дисплеи.

Слоеви на страници

Приклучок што го прави спротивното. PageLayers генерира датотека Photoshop од веб-страница. За таа цел, се креира ниво од секој HTML-елемент.

Ова е корисно ако, на пример, постоечката веб-страница треба (малку) да се ревидира/редизајнира. Проширувањето чини нешто помалку од 35 долари.

И PSD-датотеките со сите слоеви или PNG-датотеки може да се извлечат. Ширината на веб-страницата исто така може да се прилагоди. Потоа страницата се зачувува со помош на влечење и испуштање.

Заклучок

Фотошоп е жив. Исто така и за дизајни на екран!

Со додатоците презентирани погоре, Photoshop може да се користи уште подобро и поефикасно за секојдневно работење на веб-дизајн.

Дали ви помогна списокот со додатоци на Фотошоп? Или сè уште знаете некои што не ги спомнав, но дефинитивно вреди да се споменат? Потоа, исклучете се на коментарите ...

Оцени ја статијата сега!

Резултат од евалуација: 4.7/5. | Број на оценки: 23