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

Як зробити сайт типу вконтакте. Создаем загальний макет для сайту

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

Ви напевно помітили, що Вконтакт розділяє області 1px смужками графіки. Вони ледь помітні, але все ж помітні. Для їх малювання ми не будемо використовувати векторний варіант Line Tools і ось чому. Векторні інструменти працюють поза піксельної сітки. Векторна лінія може сісти рівно на піксель, лівіше пікселя, правіше, Фотошопу доведеться графічно як то відобразити це. Ми пам'ятаємо, Фотошоп програма растрова і всю графіку фотошоп відображає Растр. Це не погано, тому що браузери теж відображають сайти растром. Проблема інструменту Line Tool проста, у нього немає прив'язки до пікселів Snap to Pixels. Тому намалювати рівну смужку, яка не буде заступати ні за один піксель

Можна тільки випадково або в режимі Fill Pixels при відключеною налаштування Anti-Alias . докладніше про які можна прочитати в моїй статті Все про режими Shape Layers, Path і Fill Pixels.

Ніяких проблем, малюйте смужки в растрі, заздалегідь створивши порожній шар. Але ось, чому я все ж вибираю Вектор в Фотошопі. Векторні об'єкти на основі заливки в рази простіше перефарбовувати. У растрових треба користуватися виділеннями і Edit> Fill або постійно залазити в стилі Color Overlay . Векторні об'єкти гнучкіше і помітніше в панелі шарів, їх легко модифікувати і розтягувати. Растрові ж постійно розпливаються, або їх потрібно перемальовувати. Вибір за вами, але я віддаю перевагу максимальний контроль за макетом.

Я виберу інструмент Rectangle Tool і намалюю всі об'єкти макета, місця для аватарок, розділові смужки, розділові блоки. Вийде порожній сайт з об'єктами на які я натягну стилі. Звичайно, не забудемо про відомої опції Snap to Pixels

По правді кажучи це перший етап який з якого варто було почати цей урок. І ми б обов'язково почали з нього, якби створювали свій власний сайт з нуля. У нашому випадку макет вже був, ми лише перемалювали його.