Главная » Соціальні мережі » Вконтакте » Як зробити сайт типу вконтакте. Стілізація об'єктів сайту в Фотошопі

Як зробити сайт типу вконтакте. Стілізація об'єктів сайту в Фотошопі

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

Виберіть перший блок Фотографій, і клікніть двічі по шару з прямокутником. З'явиться діалогове меню Сталий, яке так само можна викликати в основному меню - Layer> Layer Style . У стилі шару виберіть Color Overlay . залийте об'єкт світло блакитним кольором # e1e7ed . Тепер розберемося з верхньої та нижньої смужками. Верхню смужку створимо через Drop Shadow . Колір - # d3dae0 Кут нахилу -90 . тобто тінь попрямує зверху вниз. І звичайно нам потрібна не тінь, в повному розумінні, а лише 1px смужка, тому убийте всі параметри, що відповідають за величину і растушевку тіні Spread і Size . Залишимо лише 1 для Distanse . тобто тінь виступає на 1 піксель.

Аналогічно для нижньої смужки, її ми створимо за допомогою внутрішньої тіні Inner Shadow . Колір тіні # d3dae0 . кут нахилу -90 . галочку Global Lights . як я писав вище прибирати всюди. З рештою настройок теж саме. І звичайно зберігаємо стиль через New Style .

Створимо свій стиль і для форми пошуку. Вона знаходиться в розділі Стіни Вконтакта і вдає із себе біле поле з 1px окантовкою. Вибираємо цей елемент, заходимо в Стилі шарів ефект Stroke . Перво наперво створюємо колір окантовки - # c0cad5 . В налаштуваннях позиціонування Position вибираємо Inside . Це важливо, смужка всередину створює гострі краї, смужка назовні округлі. Так влаштований Фотошоп. Розмір окантовки 1 px . Знову зберігаємо стиль.

Тепер у нас наступна ситуація. У макеті залишилися не задізайненние об'єкти, але не повторювати ж для кожного квадратика вже створений стиль? У фотошопі є 100500 можливостей копіювати стилі з одного об'єкта на інший, в тому числі не збережені стилі. Тема ця скоріше для статті про роботу зі стилями. Я лише розповім про один з них для якого ми спеціально і зберігали всі стилі. Відкрийте панель Сталий через Windos> Style . Якщо ви робили все правильно, ви побачите порожнє поле і збережені для сайту Вконтакте стилі. Виділіть потрібний шар з панелі шарів і клацніть по потрібному стилю. Щоб анулювати стиль, клацніть по білій іконі з червоною лінією.