Уроки по Photoshop. Делаем макет сайта в Фотошопе (Часть 2)

Автор Nadezhda Belousova
Уроки по Photoshop. Делаем макет сайта в Фотошопе (Часть 2)

Всем привет.

Это школа айтигенио. Меня зовут. Настя И — это вторая часть создания дизайна веб страничке в.

Фотошопе Давайте вспомним мы остановились.

Мы создали сетку bootstrap и подобрали правильную цветовую гамму. Теперь же мы нарисовали нашу замечательную шапку я выделила синим цветом — это мы — это сделали и мы еще добавили сюда всплывающие такое окошечко в хедер. То есть например я сейчас. Пожалуй — это всё сделаю виде 456. Да так и сделали вот такое всплывающее окошко которая будет например всплывать при нажатии также при нажатии на кнопку нас меняется цвет, а отлично замечательно и мы сделали логотип Skyrim. Мы закончили к нему мы возвращаться не будем у нас есть курсор. Давайте мы его переименуем курсор он нам ещё просто понадобится так и теперь по алгоритму нам нужно сделать баннер в чём прикол баннер баннер у нас будет либо картинка и либо просто какой-нибудь прикольный штукой, но учитывая, что я бы хотела всё-таки показать вам работу я выберу большую картинку фоновую найду и вставлю её как в принципе целиком фон который будет работать у нас как баннер для этого я нажимаю файл открыть мне на рабочем столе эта картинка. Ну допустим я я думала, что она подойдёт мне по цветовой гамме просто беру перемещаю эту картину ручку вот сюда так немножечко небольшое отступление скажем так Head мы перемещаем наверх чтобы у нас было. К чему стремится берём свободное трансформирование и удерживая кнопку Shift я не то растягиваю. Пардон переходим на этот слой берём с трансформирование и растягиваем так чтобы. Как говорится места хватило везде. Ну мне например хотелось бы чтобы вот у меня был вот цветочек здесь как баннер например да допустим. Ну и этого будет достаточно я его перемещение. Вот так и курсор у нас должен быть естественно в самом верху. Ну примерно так и оставим. То есть у нас будет. Вот такой вот баннер приблизительно вот как-то так. Ну и если у нас. Мы постараемся сделать такой скрип. Когда уже будем его верстать, что при прокручивании картинка будет полностью видно поэтому какую-то часть этой картинке. Мы всё-таки закроем чем-то другим на баннере. Я бы не хотела написать. Ну, а если уже что-то и написать то например допустим там что-нибудь интересное про лето допустим я удалю слой потому, что у нас же скоро лето мы с вами попробуем просто написать сайт о моём крутом лете например так поменяем ему цвет изначально на чёрненький который будет читаться да. Вот и сейчас подберём цветовую гамму для вот этого текста белый на нём читаться естественно не будет само собой, но зато будет читаться какой-нибудь другой выберем из возможных оттенков сейчас будем подбирать подберём тёмно-зелёный например или серый так и просто цвет мы заменим на вот этот посмотрим. Нет этот цвет нечитабельный поэтому мы с вами возьмём цвет вот такой попробуем с сайта моём и он тоже не очень читабельный, но я знаю как можно эту проблему решить я просто беру и делаю текст обычного темного чёрного цвета. Я немножечко его за стилизуем свои стиль слоя и например внешнее свечение внешнее свечение можно будет сделать потом. Здорово какой-нибудь Font Shadow CSS и. Давайте разберем примерный оттенок оттенок можно сделать вот такой зелёный можно сделать серый немножечко зеленоватый оттенок размах будет большим размер чуть-чуть. Вот примерно такой сделаем так и например диапазон колебания непрозрачность непрозрачность. Вот примерно такую сделаем режим наложение нормальный. Ну и немножечко сделаем тиснение тексту. Или например выберем какой-нибудь прикольный ещё дополнительно. Но она как вы видите особо не подойдёт нам тут никакие уже готовые стили. Поэтому просто слой стиль слоя выберем тиснение и сделаем немножечко примерно так и оставим. Вот примерно такой баннер у нас получится с таким небольшим цветочком немножечко этого мы закроем, но когда будем перелистывать страничку вниз фоновая картинка будет тоже ли остаться поэтому оставим. Пока так как есть в баннером мы с вами в принципе разобрать поэтому можем смело выделить его голубенький цветом. Вы можете естественно сделать сайт красивые вас на — это времени больше чем у меня у меня немножечко. Меньше времени хочется побольше всего сделать за одно видео поэтому сейчас мы с вами попробуем сделать хотя бы какой-то основной блок о нас ну для начала. Давайте посмотрим на нашу цветовую схему можно здесь следующий блок сделать. Вполне себе белого цвета. Жизнь такого цвета зелёного оттенка. Я бы хотела сделать этот блок давайте сделаем его белым цветом сайт хотел сделать довольно светлый. А ещё объединяем вот этот вот сайта крутом лете и слой один. Так мы переместимся немножечко так группируем слои напишем название баннер на номер. Так естественно так controls так перемещаем наверх курсор и. Кедр Вот — это мы сделали следующее на слой будет — это будет ананас типа раздел у нас. Поэтому будет он. Примерно вот такого может быть размера. Так может даже чуть меньше скорее всего придётся немножечко ещё добавить размеры изображения нашему потому, что сайт получается не очень у нас сайт мы планировали сделать большой, а получится у нас небольшой скорее всего даже пару блоков один блок какой-нибудь придётся убрать.

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

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