Создание сайта с нуля Урок #7 Дизайн третьей секции

Автор Alla Bessonova
Создание сайта с нуля  Урок #7  Дизайн третьей секции

Всем привет друзья продолжаем рисовать дизайн сайта.

Ока строй и следующая секция которая у нас идёт выполненные работы так ну во-первых — это секция будет. Тёмная Давайте создадим новую папку section 3 section 3 в которой разместим сначала прямоугольник давайте сделаем так значит от предыдущей секции у нас должно быть расстояние определённое. Я думаю такого расстояния вполне хватит background данной секции мы возьмём темную далее заголовок у нас будет иметь те же параметры поэтому мы его продублирую в эту секцию в.

Новую в нашу так примерный отступ сверху такой же как здесь.

цвет заголовка на тёмном фоне у нас будет белый так и идут. У нас тут плиточки такие — это эти плиточки этого нас изображения выполнены работы скачать ещё и вы найдете папку Works здесь 8 картинок — это картинки выполненной с выполненной работой то есть. Давайте создадим новую папку section 3 и назовём её этом — это будет у нас пункт так называемого заголовок у нас соответственно другой выполненной работы так ну — это не. Фейк и меня — это выше у нас авой там давайте. Нарисуем этом и так когда мы рисовали прототип мы договорились, что каждый не каждый этому все работы будут занимать всю ширину сайта независимо от того. Какое разрешение экрана нарисовали три атома значит небольшие изменения три нижних у нас будет всего два ряда и в ряду будет по четыре этом. Потому, что у нас всего 8 работ. Давайте нажмем прямоугольник крикнем ширину сделаем. Давайте посчитаем у нас вообще 1920 разделен на четыре значит ширина одного атома в 480 при разрешении 1920 и высоту сделаем 360 например даже не 360. Давайте Переключи на. Пик силы и сделаем 320 супер, а ну ради приличия сделаем фон маленько другой посветлее у нас всё равно будет картинки занимать данные данное пространство. Да, что делать открываем Works и открываем первую картинку вставляем convert to Smart object и. Привет Create clipping Mask сделай маска чтобы он меня изображение не выходила за пределы квадратов уменьшаем пропорционально всё. Ну в принципе можно сказать, что этому готов. Но нам нужно ещё кое-что сделать. Нам нужен overlay для этого. Поэтому делаем overlay. Такого же цвета как background, но не прозрачностью например 25 я думаю хватит клеит clipping Mask. Да она должна быть выше доля, что мы дела дублируем группу несколько раз то есть дублируем группу 4. А — это у нас должно быть в одном ряду и должно быть два ряда, а давайте сначала их продублирую они у нас должны пиксель в пиксель быть вместе, а потом уже заменим картинки так так так ты сначала делаем каркас. И теперь этот ряд просто дублируем картинки будем заменять потом так так давайте поработаем с первым. А — это вам покажем как он будет себя вести при наведении давайте выделим overlay сделаем фон чисто белый и непрозрачность например v85. Так он нас маленько выходит и линия появляется видите небольшая так не то он должен быть плотненько у нас так теперь поверх данного угла при наведении мы сделаем лупу откроем чешет и возьмём fa-search Plus icon очку ставим и font-family Font phantasm размер сделаем примерно сделаем 20 сильно крупную и возьмём наш основной оранжевый цвет один из основных разместим лупу примерно посередине можно сделать покрупнее маленько и напишем внизу название то есть описание объекта краткое текст примерно так цвет сделаем. Давайте вот такой. Попробуем так шрифт Open Sans Bold можно semibold сделать так. в конце убираем потому, что — это у нас не предложения текст transform API размер шрифта. Мы конечно же сделаем поменьше 16 или 17 и межстрочный интервал сделаем примерно так повыше маленько разместим таким образом. Давайте попробуем ещё цвет по тусклее то есть потемнее назад. Ну в принципе что. Так что. Так неплохо смотрит поэтому. Давайте вот так оставим единственная бы сделать покрупнее маленько нашу иконку. Давайте 24 сделаем и здесь всё-таки сделаем поменьше шрифт и сделаем всё-таки болт так Open Sans Bold чтобы маленько. Почём был у нас так шрифт 1615. Давайте оставим 15. Мне кажется так ещё лучше смотрится так поэтому у нас получились слишком низко. Давайте поднимем повыше чтобы видно было, что они относятся именно к этой секции примерно так да примерно так так. Ну — это ты там соответственно тоже на 1 пиксел подозрением чтобы они вплотную были так, а теперь я заменю все эти картинки на актуальные из папки так из папки Works так отлично то есть у нас выходит. Как наводим появляется описание и белый overlay основные картинки такой небольшой фильтр с прозрачностью 35 и плавно меняется фон при наведении. Кроме того снизу смотрите у нас получается вот такая штука, но так как у нас изображение имеет такой небольшой фильтр данная полоса снизу не очень красиво смотрится поэтому давайте мы уменьшим он до сих пор и, что мы сделаем дальше так создадим новый прямоугольник так. Ну давайте лучше сделаем по-другому так нажмем по высоте сделаем примерно 20 пикселов и по ширине 1926 во всю ширину так разместим ровненько дальше, что сделаем возьмём отсюда цвет и затемненным чтобы подчеркнуть. Горизонт наших изображений так давайте представим посмотрим всё подчёркивается. То есть он немного темнее чем сверху так конечно не скажешь на взгляд на первый взгляд, что он темнее, но он стал четче под подчёркивать нижнюю границу. Так, а ну всё выполненные работы у нас готова секция следующая секция у нас, что касается попап окна при нажатии. Мы в определим уже я думаю тут ничего такого трудного не будет картинка с отступами заголовок и.

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

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