Поради щодо оптимізації процесу веб-дизайну
Напевно, багато хто знає і розуміє, що Photoshop не ідеальний для створення дизайну сайту, але по-старому продовжують використовувати саме його, в тому числі і через його нескінченний набір функцій. Ідеального середовища поки що не існує, і поки що воно створюється, можливо, не така вже погана ідея — розглянути деякі способи, за допомогою яких ми можемо оптимізувати наш робочий процес.
Навіщо використовувати Photoshop?
Ймовірно, ви не будете здивовані, якщо я скажу, що Photoshop та Illustrator — програми, які я знаю найкраще, і почуваюся найбільш комфортно у цьому середовищі. Деякі люди вважають за краще для веб-дизайну Fireworks. Хоча я розумію їх, я все одно віддаю перевагу Photoshop, хоча б просто тому, що навіть не пробував освоюватися в Fireworks, адже і Photoshop мене все влаштовує. І я знаю, що є речі, які в Fireworks зробити не можливо, то навіщо смикатися туди-сюди?
Чому б не розпочати у браузері?
Оптимізація робочого простору Photoshop
У Photoshop CS5 у вас є кілька варіантів організації робочої області, які можна знайти у верхньому правому кутку панелі програми (Window> Application Bar).
Ви можете налаштувати панелі та палітри, як ви хочете, починаючи з робочого простору опції «Дизайн», та зберегти цей робочий простір для майбутньої роботи. Ось як я організовую робочий простір, коли я працюю над дизайном веб-сайту:
У мене є відкрита палітра шарів та інші палітри у згорнутому стані. Іноді, коли дозволяє місце, я все їх відкриваю. Дизайнерам, які працюють як з печаткою, так і з Інтернету, варто заощаджувати робочий простір і для того, і для іншого, або для ретушування фотографій.
Налаштування сітки
Якщо ви багато працюєте з Shape Layers,як я, може бути корисно організувати Grid (View & Gt; Show & Git) у поєднанні з прив'язкою до сітки (View & gt; Snap To Grid & gt;). Таким чином, ваші векторні роботи будуть добре відображатися в пікселях, так як вони завжди будуть прив'язуватися до сітки, і тому у вас не буде розмитих меж.
Щоб налаштувати сітку, перейдіть до Preferences > Guides, Grids and Slices. Раджу використовувати 'Gridline Every 10 pixels' та 'Subdivision 10'. Ви можете увімкнути та вимкнути цю опцію у будь-який момент за допомогою Cmd / Ctrl + ‘.
Також варто спробувати увімкнути Smart Guides (View > Show > Smart Guides).
Ще одна порада: щоб ваші шари Shape Layer були ідеально рівно прив'язані до піксельної сітки - увімкніть опцію Snap to Pixels. Ця опція може бути включена в панелі програм у вікні Geometry, яка випливає при виборі одного з інструментів форми з панелі інструментів.
Використовуйте Shape Layers
Щоб зробити ваш проект якомога гнучкішим, можна використовувати Shape Layers, оскільки їх можна масштабувати. Я використовую їх, коли роблю дизайн iPhone. Всі мої іконки, кнопки, фони, ілюстративні графіки… всі вони зроблені або через Smart Objects Illustrator, або Shape Layers. Таким чином, дизайн масштабується для різних екранів.
Ще один спосіб використання Smart Objects - повторювані елементи. Наприклад, якщо у вас є список або список. Ви могли б, наприклад, створити 1, 2 або 3 різні предмети, зробити Smart Objects кожного з них, і з повторення цих елементів створити список. Потім, коли вам потрібно буде оновити, вам потрібно тільки оновити Smart Object, і оновлення буде автоматично застосовуватися у всіх випадках.
Перетворення фотографій на Smart Objects, перш ніж змінювати їх розмір також може бути корисним. Раптом вам згодом знадобиться цей малюнок в іншому розмірі. Так ви зможете зробити зображення більш гнучкими, ви зможете змінити розмір зображення на більш пізній стадії. Я часто використовую цю функцію у поєднанні зі Smart Filters, оскільки це дає мені більшу гнучкість.
Я використовую Smart Objects навіть для основних розділів веб-сторінки, які вам потрібні на різних сторінках сайту. Це такі елементи, як хедер, футер та сайдбрар… Це може бути зручно для великих проектів, які постійно розвиваються, в яких ви маєте створити багато різних сторінок у Photoshop. Ви можете зберегти сторінку шаблону, основні елементи якої налаштовані як Smart Objects, завжди в останній версії. Щоразу, коли потрібно створити нову сторінку, ви почнете з цього файлу шаблону. У випадку, якщо вам потрібно оновити існуючу сторінку, тому що футер, хедер, меню або сайдбар були оновлені, ви можете перетягнути оновлений Smart Object на цю сторінку. Хоча я хотів би, щоб у Photoshop можна було зберігати Smart Objects як окремі файли, які потім зв'язувалися зі сторінками. І при оновленні SmartObject сторінки автоматично оновлювалися самі. Так само, як пов'язаний файл працює в InDesign або Illustrator.
Використовуйте Layer Comps
Layer Comps - це така панель, яка дозволяє запам'ятовувати властивості шарів, їх видимість та розташування. Чимось нагадує снепшоти з панелі History. Можете подивитися невеликий урок з Layer Comps, він англійською, але цілком зрозумілий.
Налаштуйте палітри кольору Swatches
Я волію використовувати окремі зразки кольорів палітри для кожного проекту,зберігаючи окремі палітри Swatches у папці проекту (у форматі ASE). Ви можете зробити це за допомогою меню панелі і вибрати Save Swatches. Якщо вибрати цей варіант, ви можете завантажити цю палітру в інших програмах Adobe, таких як Illustrator, InDesign або Fireworks. Таким чином, палітра кольорів кожного проекту у мене завжди під рукою. Я називаю кожен колір, використовуючи шістнадцяткові значення.
Завантаження, збереження або зміни виду палітри Swatches можна зробити за допомогою меню панелі. Я волію використовувати Small List-спосіб відображення, адже так я можу бачити шістнадцяткові значення та іншу інформацію, яку я додав до опису.
Добре було б, щоб у Photoshop була можливість завантаження кількох різних палітр стилів, кожної окремо, щоб я міг тримати 2 або більше відкритими одночасно, але кожну у вигляді окремої палітри. Це було б зручно при перемиканні на інший проект, тому що я зазвичай працюю над кількома проектами одночасно. Зараз ви можете додавати набір кольорів до палітри, яка вже відкрита, що не дуже зручно, якщо вам потрібно оновити палітру проекту окремо.
Створіть набір стилів користувача
Так само, як із збереженням палітри Swatches, я також завжди зберігаю стилі як окремі файли стилів у папку цього проекту, чи працюю я над дизайном веб-сайту чи над дизайном для Ipone/IPad. Під час процесу, коли додаються нові стилі, я їх перезберігаю. Щоразу, коли працюю над проектом, я завантажую палітри стилів цього конкретного проекту. Хоча, це те саме, що і з color Swatches. Було б чудово, якби ми можна було відразу кілька різних палітр стилів тримати відкритими одночасно.
Використовуйте допоміжний файл
Якщо ви працюєте над великим проектом, вам допоможе використання допоміжних файлів. Під цим я маю на увазі файл, який містить елементи, які ви повторно і часто використовуєте в загальному дизайні. Наприклад, кнопки, іконки тощо. — все, що потрібно на кожній сторінці або екрані дизайну. Це зручно для роботи з веб-дизайном та IPad / iPhone.
Використовуйте інструмент Slice Tool
Може, такий варіант вам не спадав на думку, тому що він вважається трохи застарілим. Тим не менш, ви можете застосувати Slice Tool. Якщо ви використовуєте slice tool, і ви даєте кожному зображенню відповідне ім'я файлу, вам не доведеться турбуватися, якщо потрібно буде зробити оновлення якогось зображення. Photoshop знатиме, яке зображення ви змінили. Ви також можете експортувати кілька зображень відразу, або експортувати тільки ті, які потрібні за допомогою 'Save selected slices'.
Я сподіваюся, що ці поради щодо оптимізації були корисні, і що вони будуть сприяти покращенню вашої роботи у Photoshop. Тобто, доки не буде створено ідеальний додаток для веб-дизайну. Адже доки я це пишу, цим уже хтось займається, вірно?