Размер Авы Группы Вконтакте

03/11/ 2012

Приветствую вас вновь, уважаемые читатели!
После нашего первого урока, который был посвящен созданию группы в целом, мы переходим непосредственно в следующий этап – оформление/дизайн группы.

Отметим следующие моменты:

• Размер области, где будет размещено кликабельное графическое меню составляет 390px в ширину.

⚠ Стоит также отметить, что если хоть в одной строке будет более 1-ой кнопки, то ширину изначально нужно установить в размере 370px вместо 390px (!)

Ну, а теперь поехали!

Как мы помним из предыдущего урока, после выполнения всех пунктов, мы получили следующую картину:

❶ Загружаем произвольную большую вертикальную картинку в аватар. Для этого, мы кликаем по изображению с фотоаппаратом в правом верхнем углу группы, где написано «Загрузить фотографию».

❷ Выбирите изображение с компьютера и в появившемся окне растяните края уголков так, чтобы полностью скрыть черный слой фона. Тем самым мы дали понять, что мы хотим заполнить всю область аватара. Далее нажимаем на кнопку «Сохранить и продолжить». В результате у нас должно было получиться вот так:

Нажав правой клавишей мыши по аватару, выберите в появившейся окне «Свойства изображения» или «Информация об изображении» и в появившемся окне убедитесь, что размер фотографии 200x500px!

❸ Открываем Photoshop и нажимаем сочетание клавиш Ctrl+N. В появившемся диалоговом окне выставляем ширину документа 600px и необходимую вам высоту, в данном случае я поставил 1000px.
❹ Делаем скриншот экрана нашей группы (клавиша Print Screen) и вставляем его в созданный документ в Photoshop.
❺ Передвигаем слой скриншота так, чтобы аватар попал четко в угол документа, как показано на картинке ниже:

❻ Воспользовавшись «Направляющими» и «Фрагментами» отделяем рабочие области. Далее, очищаем слой.
В итоге, общая ширина документа – 600px, где: 200px – это ширина аватара, 10px – зазор между аватаром и рабочей областью и 390px – ширина рабочей области.

❼ Создаем дизайн. В данном случае я сделал набросок, который тут же разделил на фрагменты в рабочей зоне, т.е. те части которые будут кликабельными и некликалабельным.