Итак, в предыдущей части урока мы остановились на размещении миниатюр слайдера
Примените эти стили слоя
Stroke: #4e4e4e
Теперь, когда у нас есть предварительный просмотр изображения и превьюшки, мы добавим заголовок, содержание и кнопку далее. Добавим заголовок и содержание, используя инструмент Text Tool.
Для нашей кнопки читать далее выберите Rectangle Tool и создайте форму размерами 80px на 25px, поместите её как показано на скриншоте ниже.
Используя Pencil Tool, создайте стрелку и поместите её как показано на скриншоте ниже. Убедитесь в том, что она находится на отдельном слое.
Мы сделаем маску стрелки, чтобы получить вырез в форме, которую мы создали с помощью Rectangle Tool. Выделите слой со стрелкой, а затем инвертируйте выделение Ctrl + Shift + I, затем выберите слой с прямоугольником и нажмите иконку маски рядом с FX иконкой. Когда вы закончите, скройте слой со стрелкой или удалите его.
Измените цвет прямоугольна на # fea702.
Примените эти стили слоя
Drop Shadow: #000000
Inner Shadow: #FFFFFF
Используйте инструмент Text Tool с размером 12pt Helvetica Roman #FFFFFF, чтобы добавить текст читать далее и разместите его по центру. Когда вы закончите, дублируйте формы и сдвиньте на 1px вверх, измените цвет на # cb8500.
Последнее, что нам нужно сделать, это добавить разделитель. Просто используйте инструмент Text Tool и нажимайте клавишу рядом с 0. Сделайте цвет заливки #4e4e4e, дублируйте слой с текстом и сделайте оригинальный слой цветом #FFFFFF.
Шаг 5: Работа над последними новостями
Раздел Последние новости будет содержать изображения, категории, ленты, заголовок поста, содержание и кнопку далее. Чтобы начать, используйте инструмент Text Tool, добавьте текст Latest News на 40px ниже разделителя. Текстовый формат будет Helvetica Roman 18pt #141e1e. Далее, разместите образец изображения 275px на 120px. Поместите его, как показано на скриншоте ниже.
Используя Rectangle Tool, создайте форму 100px на 15px цветом #fea702. Далее, используя инструмент Text Tool шрифт Helvetica Roman 8pt # FFFFFF, разместите текст в центре формы.
Примените эти стили для слоя
Inner Shadow: #FFFFFF
Дублируйте текстовый слой и сделайте первоначальный цвет слоя #c88300, затем переместите текст на 1px вверх. Выделите все слои, которые мы только что сделали и нажмите Ctrl + T, чтобы трансформировать, поверните форму на 45 градусов и поместите её как показано на скриншоте ниже.
Создайте выделение изображения, выберите слой с прямоугольником и нажмите иконку маски. Вы получите то, что показано на рисунке ниже.
Используя Text Tool, добавьте заголовок поста, содержание и категорию.
Сделайте дубликат кнопки читать далее и поместите его на 15px ниже содержания.
Сгруппируйте все слои, которые мы сделали, назовите группу post. Дублируйте группу и переместите её в ряд на расстоянии 30 пикселей. Измените цвет ленты на #8170e8 и измените текст ленты.
Шаг 6: Работа над категориями сообщений
Текст здесь такой же, как мы использовали для последних новостей. Возьмите изображение 60px на 60px и поместите его как показано на скриншоте ниже. Кроме того, используя инструмент Text Tool, добавьте текст названия категории.
Используя Text Tool, добавьте заголовок сообщения, опубликовано, и комментарии. Цвет и шрифт тот же, что и для последних новостей.
Сгруппируйте все слои, которые мы создали, и дублируйте копию группы, поместите копии как показано на скриншоте ниже.
Сгруппируйте все, включая название категории. Продублируйте группу 3 раза и поместите копии как показано на скриншоте ниже.
Шаг 7: Работа над боковой панелью
Боковая панель будет содержать социальные линки, виджет, вкладки и рекламу. Давайте сначала разработаем базовый слой, выберите инструмент Rectangle Tool и создайте форму с заливкой цветом # 353535. Повторите шаги с того момента, как мы делали наш базовый слой для области контента с использованием смарт-фильтра и шума.
Социальные ссылки
Используя инструмент Rectangle Tool с заливкой цветом #4e4e4e, создайте форму 340px на 50px.
Продолжение здесь...
Примените эти стили слоя
Stroke: #4e4e4e
Теперь, когда у нас есть предварительный просмотр изображения и превьюшки, мы добавим заголовок, содержание и кнопку далее. Добавим заголовок и содержание, используя инструмент Text Tool.
Для нашей кнопки читать далее выберите Rectangle Tool и создайте форму размерами 80px на 25px, поместите её как показано на скриншоте ниже.
Используя Pencil Tool, создайте стрелку и поместите её как показано на скриншоте ниже. Убедитесь в том, что она находится на отдельном слое.
Мы сделаем маску стрелки, чтобы получить вырез в форме, которую мы создали с помощью Rectangle Tool. Выделите слой со стрелкой, а затем инвертируйте выделение Ctrl + Shift + I, затем выберите слой с прямоугольником и нажмите иконку маски рядом с FX иконкой. Когда вы закончите, скройте слой со стрелкой или удалите его.
Измените цвет прямоугольна на # fea702.
Примените эти стили слоя
Drop Shadow: #000000
Inner Shadow: #FFFFFF
Используйте инструмент Text Tool с размером 12pt Helvetica Roman #FFFFFF, чтобы добавить текст читать далее и разместите его по центру. Когда вы закончите, дублируйте формы и сдвиньте на 1px вверх, измените цвет на # cb8500.
Последнее, что нам нужно сделать, это добавить разделитель. Просто используйте инструмент Text Tool и нажимайте клавишу рядом с 0. Сделайте цвет заливки #4e4e4e, дублируйте слой с текстом и сделайте оригинальный слой цветом #FFFFFF.
Шаг 5: Работа над последними новостями
Раздел Последние новости будет содержать изображения, категории, ленты, заголовок поста, содержание и кнопку далее. Чтобы начать, используйте инструмент Text Tool, добавьте текст Latest News на 40px ниже разделителя. Текстовый формат будет Helvetica Roman 18pt #141e1e. Далее, разместите образец изображения 275px на 120px. Поместите его, как показано на скриншоте ниже.
Используя Rectangle Tool, создайте форму 100px на 15px цветом #fea702. Далее, используя инструмент Text Tool шрифт Helvetica Roman 8pt # FFFFFF, разместите текст в центре формы.
Примените эти стили для слоя
Inner Shadow: #FFFFFF
Дублируйте текстовый слой и сделайте первоначальный цвет слоя #c88300, затем переместите текст на 1px вверх. Выделите все слои, которые мы только что сделали и нажмите Ctrl + T, чтобы трансформировать, поверните форму на 45 градусов и поместите её как показано на скриншоте ниже.
Создайте выделение изображения, выберите слой с прямоугольником и нажмите иконку маски. Вы получите то, что показано на рисунке ниже.
Используя Text Tool, добавьте заголовок поста, содержание и категорию.
Сделайте дубликат кнопки читать далее и поместите его на 15px ниже содержания.
Сгруппируйте все слои, которые мы сделали, назовите группу post. Дублируйте группу и переместите её в ряд на расстоянии 30 пикселей. Измените цвет ленты на #8170e8 и измените текст ленты.
Шаг 6: Работа над категориями сообщений
Текст здесь такой же, как мы использовали для последних новостей. Возьмите изображение 60px на 60px и поместите его как показано на скриншоте ниже. Кроме того, используя инструмент Text Tool, добавьте текст названия категории.
Используя Text Tool, добавьте заголовок сообщения, опубликовано, и комментарии. Цвет и шрифт тот же, что и для последних новостей.
Сгруппируйте все слои, которые мы создали, и дублируйте копию группы, поместите копии как показано на скриншоте ниже.
Сгруппируйте все, включая название категории. Продублируйте группу 3 раза и поместите копии как показано на скриншоте ниже.
Шаг 7: Работа над боковой панелью
Боковая панель будет содержать социальные линки, виджет, вкладки и рекламу. Давайте сначала разработаем базовый слой, выберите инструмент Rectangle Tool и создайте форму с заливкой цветом # 353535. Повторите шаги с того момента, как мы делали наш базовый слой для области контента с использованием смарт-фильтра и шума.
Социальные ссылки
Используя инструмент Rectangle Tool с заливкой цветом #4e4e4e, создайте форму 340px на 50px.
Продолжение здесь...
Всего комментариев: 0
Оставь комментарий первым!
