Урок по рисованию шапки для видео блога

Хочу сегодня рассказать, как делал шапку для видео блога, который не так давно я продал. Так как изначально шапку я рисовал для себя, то потратил на нее всего лишь один вечер. Конечно, благодаря тому, что использовал уже готовые изображения из фотостоков. Делая шапку для себя, было решено не тратить много времени на отрисовку или 3D-моделирование каких-либо объектов, а взять уже готовые картинки. Поэтому думаю, данный урок будет еще более интересен тем, что по такой аналогии каждый сможет сделать что-то подобное для своих целей, может даже и коммерческих. Конечно же, с данной шапкой я не претендую на мастер-класс. И выкладываю ее, скорее для ознакомительных целей.

Так выглядит наша шапка блога финального вида.

Из данных кусков изображений была создана наша кино-шапка для сайта.

Первым делом рисуем по бокам киноленту. Так как макет был статический, то кинолента отделяет дизайн сайта от черного фона. Далее вставляем наше изображение с занавесами, разделив его на две части. И дорисовываем деревянный пол, не обращения внимания на то, что он не сойдется в центре. Ведь в центре, по нашей задумке будет находиться баннер.

Разобравшись с полом, вешаем на задний фон красный портьер. И немного затемним его по краям в центре, чтобы придать немного объема. Для того чтобы наши портьеры  смотрелись не слишком топорными.

После дорисовываем портьер сверху.

Затем кидаем на задний фон белое полотно и добавляем портьерам тень. После чего откидываем от портьер, мокрый пол. Также я прекрасно вижу, что всю композицию портит то, что портьеры раздвигаются не по центру. Говорю же, рисовал вечером, уставший был, видно не заметил данный косяк.

Итак, после безобразия со шторами, вставляем дубль и дорисовываем под ним мокрый пол.

Затем вставляем, Оскар и рисуем на нем несколько бликов стандартными фотошопоскими кистями. Также, подрисовываем под ним тенюшку.

Далее вставляем что-то похожее на логотип и дорисовываем в этом стиле меню.

Под барабанную дробь в центре вставляем баннер, и наш не сходившийся в центре пол исчезает с глаз.

Кидаем баночки кока-колы (не забываем дорисовать под ними мокрый пол) и вставляем пару бобин.

Такие же действия проделываем с попкорном.

Далее разбрасываем попкорн по всей нашей сцене, не забывая дорисовывать мокрый пол под каждой попкорнкой.

Ну и в конце для изюминки рисуем вылетающий попкорн из ведерка. Кому хочется поиграть с данной шапкой, предлагаю скачать PSD-макет.

Домашним заданием будет сделать что-то свое, по такой простой техники из готовых фотостоковых изображений и выслать результат мне на почту. Это для тех, кому делать нечего или кто хочет потренироваться:-)

Правила которых я придерживаюсь в веб-дизайне

Решил рассказать некоторые аспекты, которых я придерживаюсь при разработке веб-дизайна. Возможно, многим будет полезно ознакомиться с некоторыми тонкостями, с которыми постоянно приходится сталкиваться при разработке макетов. А также тем, кто только начинает учиться данному ремеслу.

Работа с текстом
При возможности стараться не использовать буллиты. Особенно там, где они не играют особой роли. К примеру, в меню, в списке услуг (продукции), и т.д. Также не использовать стандартные, при необходимости постараться их обыграть.

Использовать сокращения, повторяющихся кодов, номеров.
Достаточно написать один раз, все поймут.

Так же можно не писать слова «телефон». Я думаю, что только дурак не сможет догадаться о том, что это номер телефона. Особенно если рядом указан код города.
Использовать один, два шрифта. Разумеется гротеск и антикву. Не использовать на странице два гротеска. К примеру, Verdan-y и Tahom-y.

Работа с ссылками
Всегда ставить иконку перед ссылкой, если она открывается в новом окне. Например, форма обратной связи, оформлении заявки и т.д.

В любом случаи делать ссылки подчеркнутыми. Я знаю, что это правило теперь и первоклассник знает. Но все же, иногда делают некоторые ссылки не подчеркнутыми, а например другого цвета или размера. Хотя все остальные ссылки, все равно подчеркнуты.
Все ссылки всегда должны быть подчеркнуты.  Можно не подчеркивать, если, к примеру, у нас меню такого вида. Тут и так будет ясно, что все кликабельно.

Также если это меню, то обязательно у ссылок должно быть несколько состояний. При наведении, а также, в каком сейчас разделе находится пользователь. Делать ссылку главная на главной странице, и обозначать ее другим цветом не нужно. В других разделах тоже не нужно ставить в меню ссылку на главную страницу. Достаточно того, что у нас есть логотип. Который всегда должен вести на стартовую страницу.

В верстке также не стоит делать логотип на главной странице, ссылающийся на главную страницу.
То есть, ссылку ему назначать не нужно. Можно прописать ссылку только в том случаи, если ссылка в логотипе будет вести на главный сайт компании, а вы, к примеру, находитесь на его дочернем сайте.

Работа с сеткой
Делать все макеты в разрешении 1000 пикселей, также минимальный отступ по 10 пикселей с каждой стороны. Это элементарные правила верстки.

На заметку: Макеты делаются в разрешении 1000 пикселей, а не 1024 (минимальное разрешение на сегодняшний день для разработки сайтов) для того чтобы при появлении вертикальной прокрутки, страница не выходила за края, и не появляясь горизонтальная прокрутка. 

Все с чем-то должно быть взаимосвязано. Это уже из оперы композиции, но тем не менее. Стоит помнить, что при добавлении нового шрифта или иконки в макет, работа с композицией начинает быть все тяжелее и тяжелее. К примеру, при добавлении нового стиля шрифта, не стоит забывать, что он должен будет повториться еще где-нибудь, например, на других страницах.

Не забыть о друге верстальщике
Я также помню о тех, кто будет продолжать работать с моим макетом. Поэтому стараюсь делать макеты с обозначенными блоками, дабы показать, что будет резиной, а что нет. Ведь из-за неправильного растягивания, макет может выглядеть абсолютно по-другому.

Если же макет будет статический по центру экрана, то я также, делаю дополнительный вид, как он будет смотреться на широкоформатных мониторах. Или обозначаю это в самом макете.

Подача макета
Всегда показывать макет в окне браузера, плюс делать макет в естественном масштабе, и также превью. Чтобы можно было охватить взглядом весь макет. Это необходимо также и в разработке дизайна сайта. Чтобы охватить всю композицию, а не только шапку или подвал.

Конечно, это не все. В работе всегда встречается что-то новое, охватить все за раз очень сложно. Буду стараться по мере возможности вспоминать и публиковать. Также, если что-то упустил, то дополняйте. Для этого комментарии и существуют, а не для рекламы ваших сайтов.