Нуждаете се от тези плъгини за Photoshop за вашия дизайн на екрана; уеб дизайн
Последна актуализация на статията:
2 януари 2020 г.
Photoshop е мъртъв!
Добре, Photoshop за дизайни на екрани е мъртъв!
Това впечатление може най-малко лесно да възникне, ако човек може да повярва на често срещаните мнения и доклади относно отзивчивия уеб дизайн и новите работни процеси в уеб дизайна.
Photoshop обаче не е мъртъв за дизайн на екрана. Залогът се е променил само.
Рядко се случва, че първоначално в Photoshop се създават цялостни дизайни на екрани и след това - след одобрение от клиента - се изпълняват с точност на пикселите. „В миналото“ не беше необичайно всички подстраници да бъдат проектирани първо във Photoshop. Двуцифрен брой графични файлове бързо се събраха. Промените бяха досадни. За щастие тези времена отминаха (добре, не винаги и навсякъде).
Photoshop все още има своето основание за уеб дизайнери.
Снимките, графиките и илюстрациите все още се обработват подходящо първо в Photoshop и след това се вмъкват в уебсайта.
И от време на време отново завършете дизайна на екрана. Photoshop вече има някои опции за редактиране за тези различни случаи. Но има някои приставки, които разширяват функционалността. А някои от тях са особено интересни за уеб дизайнерите.
17 полезни плъгини за Photoshop от дизайнерите на екрана.
GuideGuide
Ръководствата са полезен инструмент. Но създаването на големи мрежи с него може да бъде болка във Photoshop. Разширението GuideGuide помага с обширни опции за настройка.
Брой колони, ширина на колоната, разстояние, полета са само част от опциите. За всеки от дизайните на екрани, създадени във Photoshop, незаменим инструмент.
FlatIcon
Уебсайтът FlatIcon предлага селекция от десетки хиляди икони за безплатно използване. С това разширение тези икони също са бързо достъпни във Photoshop, без да се налага да напускат интерфейса на програмата.
Velositey
Velositey е разширение на Photoshop за бързо създаване на дизайнерски прототипи.
Налични са много стандартни елементи от съдържанието. С едно щракване на мишката могат да се вмъкват типични елементи за различните области на съдържанието, като заглавна част, съдържание или долен колонтитул:
Списъкът с функции може да предложи много:
- 5 различни заглавни елемента
- 6 различни плъзгача
- 5 различни области на съдържание
- 11 различни долни колонтитула
- 8 различни модула за съдържание
- 1170px мрежа мрежа
- Генератор на икони на картата
- Favicon генератор
- Поддръжка на Photoshop CS6 и CC
Следователно приставката е подходяща за телени рамки или първоначални дизайнерски идеи.
Вмъкнатите елементи не са визуален акцент. Тъй като обаче във Photoshop се създават различни слоеве, те могат бързо да бъдат адаптирани и доста лесно да се създаде индивидуален дизайн.
Между другото, мрежата, създадена с Velositey, има същите размери като популярната рамка Bootstrap.
Полезен урок обяснява прототипирането с Velositey: Прототипиране на оформления с Velositey за Photoshop.
FontAwesome PS
Font Awesome е така нареченият иконен шрифт. Шрифтът съдържа над 500 икони (вместо букви), които могат да бъдат интегрирани чрез CSS и показани и форматирани на уебсайта.
За да имате достъп до този набор от икони, докато проектирате във Photoshop, има приставка FontAwesome PS. След това иконите могат лесно да бъдат вмъкнати във вашите собствени дизайни чрез плъзгане и пускане.
Контрол на слоевете
Layrs Control е колекция от 7 скрипта, които улесняват ежедневната работа на Photoshop.
Преди всичко функциите облекчават простата, но досадна работа на слоя:
- Променете имената на няколко нива.
- Изтрийте показаните ефекти на слоя.
- Растеризиране на слоеви ефекти.
- Изтрийте празните слоеве.
- Растеризирайте интелигентни обекти.
- Намерете подобни нива и папки с нива.
- Преобразувайте слоя в интелигентен обект.
Render.ly
С помощта на Render.ly пълните файлове на Photoshop могат да бъдат експортирани като изображения. Това разбира се е полезно, когато представяте цялостни дизайни на екрана.
Но това, което е наистина специално, са допълнителните функции. Благодарение на прости буквени съкращения за имената на слоевете могат да се запазват различни състояния. Това е вълнуващо, например, с падащи менюта, състояния на мишката или други ефекти на мишката. Дори единични изображения от слоеве или икони могат да бъдат експортирани по този начин.
CSS3PS
CSS3PS преобразува слоевете на Photoshop в инструкции на CSS3. Това включва преди всичко стилове на слоя, но също така и някои други настройки, като например размера на обекта или закръгляването на ъглите.
Преобразуването на CSS не винаги работи правилно, но все пак може да спести много работа.
CSS шапка
Стилове на слоеве, форматиране на текст, стилове на абзаци, интервали - CSS Hat преобразува всичко това в CSS код във файл на Photoshop. И то с добро качество.
Почти 35 долара са добре инвестирани в този плъгин.
Композитор
Знаете проблема:
Няколко страници са проектирани в един файл на Photoshop. След това се адаптирате към ниво, напр. позицията на логото и също така трябва да направи промяната във всички останали чернови. Това е досадно и отнема много време.
Тук влиза композиторът. С едно кликване можете или да коригирате отделни аспекти като стилове на слоеве, позициониране или видимост или всички тях наведнъж. Това спестява много време.
Avocode
Avocode се описва като мост между дизайна и техническото изпълнение. Avocode не е инструмент за PSD към HTML, но предоставя някои функции за генериране на подходящ изходен код от файл на Photoshop.
Така че можете да отворите файловете на Photoshop в Avocode и да генерирате съответния CSS код от отделни елементи. Текстови елементи, интервали, но също и цветови палитри могат да се генерират за CSS, но по-малко и Sass. Отделни изображения също могат да бъдат извлечени, дори от няколко нива.
WebZap
WebZap е платен ($ 19) плъгин, който е чудесен за прототипи за бърз дизайн.
Предлагат се различни елементи на дизайна, които могат да се вмъкнат в дизайна с едно щракване.
Ретинирайте го
Retinize Това е действие на Photoshop, което запазва вариант на изображение в двоен и/или троен размер с едно натискане на бутон. Толкова идеален за използване на дисплеи на ретината.
PageLayers
Приставка, която прави обратното. PageLayers генерира файл на Photoshop от уебсайт. За тази цел се създава ниво от всеки HTML елемент.
Това е полезно, ако например съществуващ уебсайт трябва да бъде (леко) преработен/преработен. Разширяването струва малко под $ 35.
И двата PSD файла с всички слоеве или PNG файлове могат да бъдат извлечени. Ширината на уебсайта също може да се регулира. След това страницата се записва чрез плъзгане и пускане.
Заключение
Photoshop е жив. Също така за дизайни на екрани!
С представените по-горе приставки Photoshop може да се използва още по-добре и по-ефективно за ежедневна работа по уеб дизайн.
Помогна ли ви списъкът с приставки за Photoshop? Или все още знаете някои, които не съм споменавал, но определено си струва да се споменат? След това към коментарите ...
Оценете статията сега!
Резултат от оценката: 4.7/5. | Брой оценки: 23