Веб-дизайн. Создание лендинга. Урок 5. Третий блок. (Даниил Волосатов — Webformyself)

Автор Ivan Samoilov
Веб-дизайн. Создание лендинга. Урок 5. Третий блок. (Даниил Волосатов — Webformyself)

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

Нам его не прописывает 1 экрана нам потребуется всё начиная от заголовка выделяем предисловие можем закинуть пока, что в папку с копируем данную папку и перенесём на вверх и вниз сама третий блок заголовок уменьшен до 60 пунктов если вас другой размер шрифта кто выставляет все 16 пунктов пониже этот текст не редактируем меньше не нужно потому, что он будет нечитабелен и давайте для этого блока сделаем небольшой фон чтобы не было развесил от пустоты когда одним слоем подзаголовком выбираем инструмент эллипс тёмным цветом пока, что рисуем создаем такой. Круг размером 440. Давайте выровняем по данной линии позже всё мы сформируем сделаем пока, что так копируем данные с тобой ещё раз выбираем желаем контроль и увеличен в размерах до 650 пикселей цветов и выставляем цвет ещё посветлее я.

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

А здесь 80 поэтому фон мы чуть увеличим ещё увеличен чтобы у нас был 68 так ещё на 4 пикселя надо 66 уменьшен до на 2 пикселя можно — это сделать свойства поставить 472 и здесь поставить тоже 472 и получится идеальный. Круг у нас выберем все эти три слоя потом пониже. Давайте Не давайте самый основной фон мы сделаем побольше у нас должно получиться так чтобы основное. Чем дальше фон тем больше было расстояние и. Давайте предлог сделаем пониже чтобы у нас оставалось небольшое расстояние между загрузить вот эти два слоя сделаем. Чуть повыше наоборот получилось немножко не то, что было в изначальном варианте здесь вообще практически не видно этих кругов у нас получил немножко другой вариант, но всё же получилось тоже интересно. Давайте оставим пока, что так и потом. Возможно мы сделаем ещё другой вариант посмотрев на то, что у нас получилось в итоге меня не устраивает. А я подумал, что можно сделать с этим блоком чтобы он смотрелся гораздо интереснее плюс вдохновившись данной фотографии вы сейчас увидите. Что можно сделать. Дана фотография будет в материалах. Вы можете взять оттуда можете взять абсолютно другое с другой фотографии получится то же самое вы Photoshop я копирую выбираю основной. Круг который у нас в центре вставляет данные фотографии и прячу за основной фон нажимаем Control T и трансформировать так чтобы фотография не было меньше чем самый большой круг и так чтобы и так чтобы данная часть тела была в основном круги копируем данные слова и перетаскиваем кругом побольше и прячем ещё раз копируем данные слой перед. Аскона основным фондам и причём в данной фотографии выбираем непрозрачность до 10% у. Следуй за такие и в основной до 30% непрозрачности. Как видите у нас получилось так, что внимание фокусируется именно на светлой части поэтому нам нужно. Здесь изменить наоборот так чтобы внимание фокусироваться на центре мы берём. Круг который самый большой палитра цветов пипетка просто выбираем основной фон у нас получился цвет 160 710 нажимаю. О'кей выбираем в следующий. Круг и прописан ему цвет 1C 09 14. О'КЕЙ в итоге буквально за пару минут у нас получилось совершенно другое дизайн более атмосферный и более интересные каждый. Круг Вы могли бы составить разных фотографий. Вы можете поэкспериментировать и сделать что-то своё. Теперь мы точно сохраняешься переходим файл сохранить и увидимся. Уже в следующем уроке.

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

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