Макет сайта в Photoshop Урок 9 Товары2

Автор Alla Bessonova
Макет сайта в Photoshop  Урок 9 Товары2

Итак приступим к нашему разделу товары во-первых заголовок вот у нас есть заголовок о нас давайте я его про дублируем этот заголовок создать дубликат слоя OK только теперь я хочу дать для удобства.

Я вынесу пока сюда слои. Вот посмотри аноскопия хочу вынести за пределы группы поместить вот сюда группу. Она сворачивая нас остаётся копия.

Вот соответственно у меня выделено.

Это копия с помощью инструмента перо я перемещаю вот сюда пониже да то есть здесь где у меня будет мой раздел следующие товары. Итак давайте изменю. Теперь со слоями будет удобно принц — это окно слои можете поместить куда-нибудь. Вот например так чтобы вам было более удобно когда слове становится много. Конечно для работы с ними уже. Может потребоваться может потребоваться немного немножко побольше места. Вот посмотрите я помещаю наш текстовый слой ананас. Ну вот сюда только теперь он меня будет называться иначе да то есть теперь, а то у меня товары товары. Хорошо теперь проверю закреплены ли у меня направляющие закрепить направляющие. Да мне показалось, что теперь можно перемещать и так товары. Это следующий наш раздел как мы договорились у нас будут просто такой как бы плиткой выглядит для этого. Посмотрите на предыдущем шаге задание подготовить изображения товаров. Это изображение 300 пикселов квадратные, что я могу их все выделять и поместить в документ перетаскивать теперь двойным щелчком каждый из помещенных документов. Да тут я. Подтверждаю их помещение в мой документ поместить. Вот они все шесть у меня помещены. Иоанну Посмотрите сейчас я буду их помещать рядом с друг с другом порту меня поместился таким образом, что потребуется трансформирование до размеров таким образом может быть нам сюда уборка ников для удобства я отключу колонки для того чтобы мне было более удобно смотреть да. Ну может думать как лучше расположить по цветам светлые темные элементы может быть в памяти к нам маффины например таким образом и так рано. Каким образом так фонтан торт фильм. Конец посмотрим свою хорошо у нас. Давайте вручную не очень удобно было 300 на 300 пикселей 300 на 300 вот таким образом отлично. У нас тоже вот например расформировали такую плитку. Давайте теперь я все эти элементы добавлю в группу товары товары аккаунт мои слова и опять чтобы было лучше видно вот таким образом мы теперь всю группу всю группу товара я помещаю вот таким образом как раз вот появляется быстро розовая вот таким образом выравнивается соответственно товары могу вот так вот так чтобы он не был он мне. Ну вот соответственно товар готово как мы сказали при наведении курсором уже когда будет сайт сверстан на каждый товар у нас будет появляться краткая информация по этой группе товаров например он будет. Ну скажи будет появляться полупрозрачная какой-то цветной и будет ней текст давайте — это реализуемо сейчас на примере какого-нибудь одного товара чтобы было понятно. Каково будет у нас поведение до при наведении курсора мыши и так ну во-первых заголовок товара я помещу можно лучше даже делать не так возможно для удобства особенно последующей какой-то возможность отправки может быть заголовок над группой также у нас у нас есть заголовок тоже поищу его над группой вот так заголовок и группа, что она включается группа, что она включает — это вот вернусь в эту группу, но соответственно самый первый у нас здесь — это маффин. Да вот — это маффины соответственно над ним добавлю свой белый цвет выберу фигуру соответственно здесь отдам размер фигуры продам размер сразу 300 на 300 пикселей 300 на 300 соответствующей фигуры его соответственно сразу могу вот так поместить. Давайте свет узорная заливка. Давайте поменяем выберем заливку цветом белым например и непрозрачность слоя например сделаем непрозрачность допустим вот пусть при наведении мышки у нас будет так вот такое светлое наложение светлого 60% заливки и соответственно будет текст цвет оставляем тот который у нас был от основной текст который здесь у нас использовался ну и соответственно мы создаем текстовый на котором напишем например маффины маффины допустим, что у нас будут здесь добавим ещё например текст еще текст разнообразные напишем например разнообразные начинки. Ну или можно даже. Ну вот например написать. Вот так шоколадные шоколадные ягодные ванильные. Лего Ну например вот таким образом у нас будет такое краткое описание продукта например для этого текста мы. Давайте назначен шрифт например на гитаре вот таким образом мы добавим еще один текст где напишем например от там рубли рублей за штуку рублей за штуку вот таким образом можно сделать например 18 например. Жермен Давайте вернемся машины можно сделать стоит покрупнее например 20 и тоже начертание Bold жирный вот таким образом. Теперь давайте все эти три текста совместимость таким образом. Давай вместе. Давайте ещё будем наша фигура фигура воздух всех прощения вот таким образом понятно, что аналогичное оформление предполагаем у остальных товаров ещё раз товар повторим. Что такое состояние. Да у нас когда мы наводим курсор на тот или иной товар.

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

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