Создание дизайна сайта портфолио в Photoshop Урок 1

Автор Andrei Golubev
Создание дизайна сайта портфолио в Photoshop   Урок 1

Всем привет.

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

Итак начнем создадим новый документ сразу его на замену задание мама ширину 1200 пикселей.

Почему именно в 1200 для того чтобы наш сайт нормально отображался на экранах с большим разрешением высоту поставим 2040 принципе высоту может ставить любую и всё зависит от того контента который вы будете размещать на одну страницу так документы у нас готов теперь нам нужно создать скелет нашего сайта этого сделаем сетку чуть потягивает слева левой кнопкой мыши направляющим постоянно 100 пикселей одну авторынок 1100 для чего мы — это для того чтобы контент не прижимался краям для того чтобы центрировать его посередине нашего сайта чтобы легче было воспринимать и последнюю направляющую. Поставим на 600 пикселей для того чтобы центрировать наши надписи строго посередине сайта так далее мы организуем структуру нашего сайта 3 группы для чего мы — это делаем для того чтобы при верстке вам было проще разобраться где и какой элемент сайта находится создаём группу контакты. Кто здесь будет наш под фото по-другому группа с фотографиями. Где будут размещаться основной контент и где будет находиться на шапка как готова зададим площадь для нашей шапки для этого выбираем инструмент прямоугольник и рисуем площадь для нашей шапки размером 1200 на 600 пикселей необязательно оставить всё ровно можно — это выставить этих верхних параметров 1200 на 600 свет пока будет серый для того чтобы нам было проще выровнять этот квадрат ровно для этого стрелками на клавиатуре нужно будет подвинуть kokutaku трудно теперь изменен цвет на белый белый цвет. О'кей как готова наша площадь теперь нам нужно добавить то есть фон для нашей шапки этого вставляем изображение сразу его выровняем как нам нужно. Прости я не могу. Для этого можно зажать клавишу Shift чтобы равномерное по высоте по ширине нужно было расширить. Какие добавили теперь применением clipping Mask для этого за жмем клавишу ALT нажмем на слой который находится ниже то есть, что — это за эффект. Он позволяет верхнему слою отображаться по контуру. Нижнего для того чтобы не обрезать картинку теперь назовём нашу картинку OK готова, но наши картинка слишком контрастные для того чтобы добавить на неё поэтому мы применим пару эффектов чтобы сделать умение контрастные для этого добавим новый слой. Назови новая Shadow. То есть — это будет наша тень также применим к нему эффект clipping Mask чтобы наш век не распространялся на весь документ набираем. Градиент и выставим цвета черного beon.ru при этом он будет переходить от черного к. Белому с прозрачностью сейчас выставим белый и вот если нажать на верхней квадратик и у вас будет здесь стоять 100% то. Вам нужно будет выставить ноль нажимаю. О'кей и применим на шельфе примерного снизу протеанин и меньшим непрозрачность до 60% чтобы чуть-чуть убавить эффект добавим. Теперь ещё один. Уфе назовем его. Градиент также применим эффект clipping Mask выбираем инструмент. Градиент и выставим цвета от фиолетового к розовому то есть мы её затемненным верхнюю часть наши шапки также выставить надо непрозрачность то есть вы будете от фиолетового к розовому с непрозрачным с прозрачностью применение в нашей эффект до конца не за выстави мне прозрачность на 20% там готова теперь наша шапками неконтрастная и на ней будет более читабельно отображаться на шее надпись. Герман добавлен наши шапки логотип иконки социальных сетей. Для этого нам нужно выставить уже горизонтальную направляющую примерно на 50 пикселей то есть на этой высоте у нас будет находиться логотипы иконки также — это позволит выровнять логотип по отношению к иконкам чтобы они не же не вышли друг друга. Были для этого создадим новый слой с логотипом выберем инструмент выставил шрифт в принципе. Вы можете любой выставить какой вам понравится на данный момент привёз и никаких проблем с этим нету. Так вы старинному размер примерно 21 Pixel. Нарисуем наш логотип, но вы можете написать всё, что угодно я напишу своими готово. Теперь выровняем наш логотип относительно наших направляющих и теперь ставим иконки социальных сетей. Фейсбук нужно нам размер поставим размер 32 пикселя так просто немного по краю относительно наших направляющий ставим следующую колонку так живо уменьшен до 32 пикселей мешать как я уже говорил можно через клавишу Shift добавим еще одну колонку также. Уменьши и вы равнин этого на верхней панели есть инструмент который ты с выделяем все слои и выравнивает посередине так готова. Но нам нужно сделать иконки белыми цвет нашего логотипа для этого мы применим эффект наложения цвета на каждую из наших колонок выставим. Цвет белый. Не забывайте о том, что шапка вашего сайта — это первое, что видит пользователь если она будет какая-то либо очень пёстрая. Либо на ней не будет читаться или надпись — это с большей вероятностью человек может покинуть ваш сайт так. Смотрим всё.

0 комментариев
0

Читайте также