Карьера веб-дизайнера с нуля до первой продажи за 14 дней. Урок №3 — «Подготавливаем макет к работе.»

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

В этом видеоуроке мы с вами проведем подготовительную работу перед созданием дизайна сайта в фотошопе. Я для вас подготовил уже макет стартовый для работы, то есть это уже точные заданные параметры, там уже присутствует сетка, там уже расставлены направляющие, там созданы папки. Вам не нужно совершать каждый раз  лишнюю работу на 5-10 минут. Перейдите, пожалуйста, в дополнительные материалы, там у вас должен быть вот такой вот файлик, он называется «заготовка макета.psd», формат фотошоп. Мы по нему щелкаем, соответственно, и в фотошопе у нас открывается вот такой вот файлик. Сейчас я прикреплю его к рабочей области, что бы было удобнее работать. Как вы видите, у нас на экране такая вот белая область и розовые полоски. Давайте по порядку пойдем и я расскажу несколько моментов: почему, зачем и как здесь все сделано.

Во-первых, по поводу размера. Сейчас я вам покажу размер данного макета. Размер данного макета выбран неспроста, ширина его 1920 пикселей – это ширина монитора равная 2 дюймам, то есть, это сейчас одни из самых больших мониторов, если мы не берем мониторы Apple, то есть, 23 дюйма это пока что самые большие мониторы, но при этом довольно-таки много людей начинают ими пользоваться. Соответственно, при создании сайта мы должны быть уверены, что вся ширина дизайна будет правильно красиво отображаться на любом мониторе. Соответственно, мы берем по максимуму. Высота выбрана 2000 пикселей – это выбранная просто так, скажем. Высоту вы всегда сможете подкорректировать по ходу работы. 2000 пикселей просто потому что небольшой сайт-визитка занимает примерно такое количество пикселей по высоте. Это не так важно, это можно в процессе работы менять. Единственное, не меняйте ширину, ширина должна оставаться 1920 пикселей. Но при этом, активная наша область, она будет несколько меньше, то есть, вы видите, что вот эта вот сетка из голубых линий, столбцов, она располагается четко по центру. Сейчас мы увеличим немножко масштаб, я вам покажу. То есть, если мы расставим направляющие, прикрепим, здесь у нас первая направляющая стоит на 490 пикселей и вторая направляющая на 1430 пикселей. Почему именно данные параметры? Ну просто потому, что у нас ширина вот этой активной области, где у нас, соответственно, будет располагаться весь контент сайта, он у нас 940 пикселей. Почему именно 940 пикселей? Почему не 1000, не 1200 и не по максимуму нашей ширины не 1920? Ну, просто потому, что до сих пор существует огромное количество маленьких мониторов, где умещается всего-то порядка 1000 пикселей. Почему берем не 1000, не 980, а именно 940? Ну, просто потому, что еще существует в браузерах вот такая вот прокрутка и какие-то дополнительные элементы, которые отнимают еще какое-то количество пространства, а вот эта вот цифра 940, она дает 100% гарантию, что наш дизайн будет отображаться на всех абсолютно мониторах. То есть, если мы поставим, допустим, 950, либо 960 пикселей ширину данных колонок, то, соответственно, уже там 2-3-5% мониторов будут выходить за края и люди не будут видеть, что находится по краям нашего дизайна. Соответственно, такого мы допускать не должны, мы должны быть уверены, что 100% людей увидят корректно наш дизайн сайта, то есть, сайт. Поэтому такая у нас сеточка, поэтому такие размеры. По центру именно 940 пикселей и слева/справа у нас одинаковое расстояние.

Что касается вот этих вот розовых колонок. Это называется модульная сетка. Сделаны они для того, что бы было удобно выравнивать различные элементы. То есть, когда мы рисуем какие-то блоки, допустим, мы будем рисовать какой-то левый блок с менюшкой, потом добавлять какую-то картинку, текст, соответственно, мы можем очень ровно все это выделять, то есть, для этого нам не нужно ставить миллион вот этих направляющих, а просто по этим линеечкам, по этим колонкам выравниваем. Соответственно, это у нас как дополнительный слой, мы можем включать/отключать, если нам данная сетка мешает при работе, то, соответственно, мы ее просто отключаем. Потом, когда нам необходимо какие-то элементы выровнять, мы просто ее включаем. Давайте покажу банальный простой пример. Допустим, есть у нас какой-то левый блок, плюс (сейчас перемещу вниз, что бы сетку было видно) есть еще парочка блоков. Допустим, я не использую сетку, могу начертить парочку блоков и ошибиться, допустим, с выравниванием. И, соответственно, после того, как мы все это сделаем, мы можем включить сетку, выбрать инструмент «Перемещение» и все выровнять, подкорректировать. Соответственно, мы точно так же можем выровнять текст, картинки какие-то и так далее, тогда все у нас будет выровнено. Соответственно, выравнивать можем по разным краям: по центру, по левому, по правому и так далее, сейчас в это углубляться не будем. Удалю эти элементы, дабы они нам не мешались. В общем, на данный момент, все, что вам необходимо понять и для себя определить выгоду для данной модульной сетки – это то, что когда вы будете выравнивать различные объекты, у вас будет сайт смотреться профессионально и никакие элементы не будут съезжать, прятаться друг за другом и так далее, то есть, для этого необходимо ее использовать. Соответственно, если вам не будет нравиться, то можете отключать и просто расставлять направляющие, но в будущем всегда используйте ее, потому что профессиональные сайты без нее не делаются. Если же вы отключаете модульную сетку, то всегда оставляйте вот эти вот направляющие, что бы вы видели границы слева и справа вашего дизайна, что бы не выходить за них. Как я уже говорил в курсе по фотошопу, эти направляющие можно отключать и включать сочетанием клавиш Ctrl+H. Линеечку так же можно включать и выключать сочетанием клавиш Ctrl+R, для удобства можете ставить, убирать и так далее.

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

Ну что ж, на этом все. Ваша задача на сегодня – нереально глобальная, вам необходимо открыть данный файлик и на этом ваша домашка закончится.

Ну что ж, спасибо за внимание, откройте данный файлик и переходите к следующему видеоуроку.

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



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

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