Photosop як інструмент веб-майстри

Потужна програма Photoshop знайшла своє застосування в нелегкій справі веб-дизайну. У даній статті, шановний Новомосковсктель, я викладу основи застосування графічного пакету Photoshop як інструмент для створення сайту.

І так, що хорошого в Photoshop і навіщо він потрібен для створення сайту.

Тут відразу можна знайти два застосування, в залежності від того, які саме сайти ви робите:

• У разі сайту на движку Photoshop застосовується в якості інструменту, який дозволяє створити ту чи іншу графічне наповнення. У моторної сайті загальна канва дизайну береться з готового шаблонного движка.
• У разі самописного сайту в Photoshop малюється макет сторінок сайту повністю. Далі HTML-верстальник вирізає з макета потрібні графічні елементи і відповідним кодом HTML реалізує те, що намалював дизайнер.

При створенні макета сайту в Photoshop необхідно враховувати чи сайт "гумовим" або фіксованого розміру. До речі кажучи, резиновость сайту - це далеко не сама мета і у величезній кількості випадків гумовий макет гірше фіксованого за розмірами. Якщо макет гумовий, то необхідно розуміти, де саме він буде тягнутися.

Важливим фактором при підготовці макета є те, що сайт повинен без горизонтальної прокрутки вміститися в дозвіл монітора 1024 * 768 - це мінімальна, на даний момент, дозвіл 17-дюймового монітора. І якщо на 17-ти дюймах виникне горизонтальна прокрутка, то у багатьох критиків вашого сайту статися епілептичний припадок від щастя.

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

Першо-на-першо створюємо новий файл, в якому і будемо малювати наш макет сайту. Виходячи з влазімості в 1024 * 768 ширина у створеного файлу не повинна перевищувати 1000 точок, висота може бути будь-який (вертикальна прокрутка нас не лякає).

Новий документ для прийдешнього сайту

Параметр Дозвіл в разі веб-дизайну не грає ніякого значення, нехай він буде дорівнює 70. А ось якщо ви створюєте макет для подальшого друку, то тут вже необхідно, щоб Дозвіл дорівнювало 300 пікс. / Дюйм.

В якості натхнення до малювання шаблону сайту можна використовувати завантажені безкоштовні шаблони (скористайтеся пошуковою системою і задайте йому запит "безкоштовні варіанти дизайну", у вас буде з чого вибрати).

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

Картинка на градієнтному або складному тлі

У разі, якщо картинка доводиться на градієнтний або складний фон, то зберігати дану картинку потрібно з прозорим фоном і, потім, накладати на наш складно-градіетний бекграунд.

Все це необхідно робити в тому випадку, якщо картинка, що накладається за верх фону, можемо зміщуватися (позиціонування картинки змінюється в залежності від дозволу монітора). У цьому випадку неможливо чітко зістикувати фон на зображенні з з'їжджаються складним фоном заднього плану і будуть видні стики.

Для збереження з прозорим фоном нам підійдуть формати gif і png. У разі простого зображення з чіткими кордонами найбільш оптимальний формат gif. Якщо в зображенні присутні градієнтні кольори і розмиті межі, тоді - png. Обидва ці формату мають здатність зберігати прозорий фон зображення.

простий фон

Якщо фон простий (білий або одноколірний), то ми можемо поставити зображення прямо поверх заданого фону, за умови що у зображення точно такий же фон, як і у підкладки.

В цьому випадку для нас оптимальний формат збереження jpg.

Зберігати з Фотошопа потрібно по комбінації клавіш Shift + Ctrl + Alt + S - це збереження для web або пристроїв.

Зручність даного діалогу збереження полягає в наявності в ньому зрозумілого селекта вибору формату збереження і, в разі збереження в формат jpg. у нас з'являється можливість змінити якість зображення.

Додаткові настройки зберігається зображення

Зменшуючи показник Якість і відстежуючи зміна самого зображення у вікні зліва необхідно домогтися мінімального розміру зображення (чим менше розмір, тим швидше зображення грузиться) і задовільного його зовнішнього вигляду. Оптимального поєднання, зазвичай, можна домогтися при значенні Якості рівного 55.

Хочу зауважити, що при збереженні простого зображення (чіткі межі, відсутність градієнтних і складних кольором) навіть у разі простого фону, оптимальним по співвідношенню вага / якість виявиться формат gif.

Як правильно вирізати

Дуже часто доводиться бачити такі помилки:

Коли потрібно замостити блок градієнтним кольором (блок має змінну довжину і постійну висоту) вирізують занадто довгий шматок градиентного фону. Це абсолютно ні до чого. Досить вирізати шматочок градієнта довгою в 1 піксель і висотою, що дорівнює висоті заповнюється градієнтом блоку. Далі властивістю background-repeat: repeat-x повторюємо нашу градиентную картинку уздовж осі Х і замащівалась фоном весь, відведений під нього, блок. При цьому наша 1-піксельна картинка (формату jpg) залітає на комп'ютер користувача в одну мить.

Так само часто доводиться бачити використання png- формату з прозорим фоном в тих місцях, де можна обійтися звичайним jpg. Моя нелюбов до формату png випливає з того, що прозорість в ньому не працює коректно з IE6 і повинні бути підключені додаткові фікси.

Щодо png формату не погоджуся, він відкриває непогані можливості по використанню і правильності передачі зображення. Тим більше за моїми спостереженням IE6 користуються приблизно 20% користувачів і це число з кожним днем ​​зменшується

Так, я теж раніше png не любив. Але тепер успішно забив на любителів ІЕ6. Хоча на замовних проектах доводиться таки фіксать. Краще звичайно підігнати jpg.

Добрий день, Андрій! Дякую за уроки! Виникло одне побажання, Ви не могли б зробити урок по створенню шапки на сайт?