Вам потрібні ці плагіни Photoshop для дизайну екрану; Веб дизайн

Останнє оновлення статті:
2 січня 2020 р

Photoshop помер!

Гаразд, Photoshop для дизайну екрану мертвий!

Це враження може принаймні легко виникнути, якщо можна повірити загальноприйнятим думкам та звітам про адаптивний веб-дизайн та нові робочі процеси веб-дизайну.

Photoshop не вмер для дизайну екрану. Використання лише змінилося.

Рідко буває, що спочатку в Photoshop створюються цілі дизайни екранів, а потім - після затвердження замовником - реалізуються з точністю до пікселів. Не рідко було «в минулому», коли навіть усі підсторінки були вперше розроблені у Photoshop. Це швидко призвело до двозначної кількості файлів зображень. Зміни були нудними. На щастя, ті часи минули (добре, не завжди і скрізь).

Photoshop все ще має своє значення для веб-дизайнерів.

Зображення, графіки та ілюстрації все ще обробляються належним чином спочатку у Photoshop, а потім вставляються на веб-сайт.

І час від часу знову завершуйте дизайн екрану. Photoshop вже має деякі параметри редагування для цих різних випадків. Але є деякі плагіни, які розширюють функціональність. І деякі з них особливо цікаві веб-дизайнерам.

17 корисних плагінів Photoshop, необхідних дизайнерам екрану.

GuideGuide

Посібники є корисним інструментом. Але створення великих сіток за допомогою цього може завадити в Photoshop. Розширення GuideGuide допомагає розширити можливості налаштування.

Кількість стовпців, ширина стовпця, інтервал, поля - це лише деякі з варіантів. Для кожного з дизайнів екранів, створених у Photoshop, незамінний інструмент.

FlatIcon

Веб-сайт FlatIcon пропонує десятки тисяч піктограм для безкоштовного використання. За допомогою цього розширення ці піктограми також швидко доступні у Photoshop, не виходячи з інтерфейсу програми.

Велосітей

Velositey - розширення Photoshop для швидкого створення дизайнерських прототипів.

Доступно багато стандартних елементів вмісту. Одним клацанням миші можна вставити типові елементи для різних областей вмісту, таких як заголовок, вміст або нижній колонтитул:

Список функцій може багато чого запропонувати:

5 різних елементів заголовка
6 різних повзунків
5 різних напрямків вмісту
11 різних колонтитулів
8 різних модулів вмісту
1170px сітчаста система
Генерування значків карти
Генератор значків
Підтримка Photoshop CS6 & CC

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

Вставлені елементи не є візуальною родзинкою. Однак, оскільки в Photoshop створюються різні шари, їх можна швидко адаптувати та створити індивідуальний дизайн досить легко.

До речі, сітка, створена за допомогою Velositey, має ті самі розміри, що і популярний фреймворк Bootstrap.

Корисний підручник пояснює прототипування з Velositey: Прототипування макетів з Velositey для Photoshop.

FontAwesome PS

Шрифт 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 не є інструментом PSD в HTML, але він надає деякі функції для створення відповідного вихідного коду з файлу Photoshop.

Файли Photoshop можна відкрити в Avocode, а відповідний CSS-код згенерувати з окремих елементів. Елементи тексту, інтервали, а також палітри кольорів можуть створюватися для CSS, але Less і Sass. Також можна витягувати окремі зображення, навіть із декількох рівнів.

WebZap

WebZap - платний плагін (19 доларів США), який чудово підходить для швидкого проектування прототипів.

Доступні різні елементи дизайну, які можна вставити в дизайн одним клацанням миші.

Ретинізуйте це

Retinize Це дія Photoshop, яка зберігає варіант зображення у подвійному та/або потрійному розмірі одним натисканням кнопки. Так ідеально підходить для використання на дисплеях сітківки.

PageLayers

Плагін, який робить навпаки. PageLayers генерує файл Photoshop з веб-сайту. Для цього з кожного елемента HTML створюється рівень.

Це корисно, якщо, наприклад, існуючий веб-сайт буде (трохи) переглянуто/перероблено. Розширення коштує трохи менше 35 доларів.

Можна витягти як PSD-файли з усіма шарами, так і PNG-файли. Ширину веб-сайту також можна регулювати. Потім сторінка зберігається за допомогою перетягування.

Висновок

Фотошоп живий. Також для дизайну екрану!

За допомогою представлених вище плагінів Photoshop можна використовувати ще краще та ефективніше для щоденних робіт з веб-дизайну.

Чи допоміг вам список плагінів Photoshop? Або ви все ще знаєте дещо, про що я не згадував, але, безумовно, варто згадати? Тоді до коментарів ...

Оцініть статтю зараз!

Результат оцінки: 4.7/5. | Кількість оцінок: 23