Секреты веб-дизайна. Урок №5 — «Прорисовка элементов+контент (каркас)»

Приветствую Вас, уважаемые коллеги!

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

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

Я на примере данного сайта, как и обещал, буду показывать, как рисовать различные блоки. Первое, наверное, что хочу сказать, в предыдущей версии курса я показывал на примере создание слоев и рисование допустим каких-то блоков с помощью и инструмента выделения и потом инструмента заливки. Но данный способ имеет один очень большой минус, если в дальнейшем мы начинаем, скажем, редактировать, перемещать, трансформировать какой-то данный блок, либо увеличивать его размер, то, соответственно, качество теряется и при увеличении мы видим, что границы очень становиться размытые. Соответственно, если мы трансформируем, поменяем несколько раз, то качество падает очень сильно. То есть вы видите, здесь уже у нас пошли какие то такие волны. Соответственно, если 10-15 раз вы повернете данный блок, переместите куда-то, то, соответственно, у вас качество сильно потеряется.

Естественно, есть более простой и лаконичный выход из данной ситуации. Мы будем работать в данном курсе и, вообще, я рекомендую всегда придерживаться в вашей работе использовать всего два инструмента: это фигуры, то есть для создания всех менюшек, кнопок, блоков различных мы будем использовать прямоугольники, прямоугольники с закругленными углами, эллипсы, произвольные фигуры, линии и так далее. Плюс, если у вас будут какие то нестандартные фигуры, то обязательно используйте инструмент перо. Прочему, ну, просто потому что у нас, когда мы используем эти два инструмента, получаются векторные фигуры. Так давай те возьмем другую фигурку, то есть, к примеру, у нас есть фигурка и как бы мы ее не трансформировали, не увеличивали ее масштаб, не поворачивали. То есть, если мы увеличим размер, то всегда видим, что у нас пиксели идут ровные. То есть, качество всегда остается прежним, совершенно не важно, какое количество раз вы производите над данным объектом действий. Поэтому, первое, что вам необходимо запомнить, что все основные элементы вам необходимо прорисовывать с помощью инструмента произвольные фигуры и инструмента перо. Потому что, ну, из опыта могу сказать, по началу, да и вообще, при создании большинства дизайнов, очень часто будет получаться так, что вы какой-то блок разместите, допустим, слева, а потом к концу создания дизайна, допустим, поймете, что его необходимо сместить куда-то вниз. Либо вы менюшку сделаете, грубо говоря, по высоте в 100 пикселей, а когда дорисуете дизайн сайта, поймете, что все остальные блоки, допустим, гораздо меньше и менюшку хорошо было бы, допустим, по высоте уменьшить до 80, до 70 пикселей. Соответственно когда вы использовать будете векторные фигурки с помощью инструмента произвольные фигуры и перо, вы это легко сделаете. Но если вы будите использовать растровые фигуры, то есть создавать слои и работать с другими инструментами, то вам придётся все заново отрисовывать, потому что качество теряется и результат будет плохой. Поэтому, пожалуйста, запомните это первое правило. Соответственно, если у вас возникают, какие то сложности при работе с данными инструментами, то я рекомендую, пройди мой бесплатный курс по фотошопу, там я довольно такие подробно рассказываю о всех инструментах и, как бы, не важно сколько вам лет, какой у вас опыт работы с компьютером и так далее, все после данных уроков понимают как пользоваться инструментами. Поэтому, если возникают проблемы, посмотрите сначала тот урок по фотошопу. если не знаете где найти, то напишите мне ВКонтакте, соответственно, я вам кину ссылочку. А, хотя давайте, я вам сразу покажу. Находятся уроки вот по такому адресу brothers_company.ru/videocourses/4/free_lessons.php. Здесь 64 видеоурока по различным аспектам, то есть, есть и фильтры, короче говоря, все, что нужно знать о фотошопе, вы здесь можете изучить, и каждый инструмент посмотреть. Допустим, инструмент группы перо, то есть вы сможете спокойно изучить и потом трудностей, соответственно, при создании дизайна у вас не будет. ОК.

С такими, основными моментами мы, уточняющими мы разобрались. Давай те преступим к прорисовке наших объектов. Я выключил вот это папочку, буду ее включать, выключать периодически.

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

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

Так, ОК, приступаем. Выбираем инструмент прямоугольник с округленными углами. Сразу хочу сказать, если у вас  какая то другая версия фотошопа более старая, то, в принципе, я бы рекомендовал установить версию 6, потому что здесь есть несколько моментов, которые просто на просто ускоряют работу, разработку дизайна и лично я чуть-чуть ускорил процесс разработки. Поэтому рекомендую, в принципе. Поначалу, сразу говорю, первые две недели будет непривычно, потому что многие элементы переставлены местами, какие то добавлены дополнительные моменты и теряешься, не знаешь, куда тыкнуть мышкой. Но, тем не менее, потом, через какой-то время становиться гораздо удобнее. Если вы установите старую версию, то возвращаться не захотите.

Итак, выбрали прямоугольник с закругленными углами, ставим радиус закругления на 5 пикселей, ну примерно, то есть радиус закругления можете выбирать по своему усмотрению. Далее рисуем кнопочку. Переходим на инструмент перемещение, горячая клавиша V и выравниваем по центру нашего текста. После этого меняем наш цвет. Давайте посмотрим, как в исходном варианте у нас. цвет можно отсюда пипеткой выбрать. Как бы в моем случае, в вашем случае это конечно не получиться. Да, кстати говоря, тоже такой момент, рекомендую создать отдельную папочку, назвать ее отрисовка блоков и данная папочка должна быть обязательно под папкой с типографией, потому что если данные слои будут сверху, то соответственно, они будут перекрывать весть текст и, соответственно, текст будет не виден. И сразу мы так же применяем те принципы, которые я вам рассказывал по типографии. У нас фон получается темней, соответственно текст сразу необходимо сделать белым, светлым, что бы он легко чи%

Пройдите курс "Профессия веб-дизайнер" за 10 дней бесплатно:



Понравилась статья?
Сделайте доброе дело — поделись ей со своими друзьями и коллегами, кликнув по всем кнопкам соц.сетей:

Нравится
comments powered by HyperComments