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

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

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

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

Новую в нашу.

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

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

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