Вот то, что мы будем делать, нажмите на изображение для полного просмотра:
Ресурсы для этого урока:
Шаг 1: Создание документа
Начните с создания нового документа размерами 1200 х 1700px в Photoshop.
Инструмент Ruler Tool будет очень полезен для этого обучающего урока, убедитесь, что направляющие и линейки включены.
Линейки: Ctrl + R
Направляющие: Ctrl +;
Также очень важно при использовании Ruler Tool отображение Info (Информация) панели. Используйте её, когда вы измеряете нужные расстояния, информация будет отображаться в информационной панели. Убедитесь, что она активна в вашей панели справа. Если нет, Вы можете получить доступ к ней, переходом в Window - Info.
Общая ширина вашего сайта будет 960px. Итак, давайте создадим нашу первую направляющую, перейдя в View - New Guide, установите значение 120px. Повторите шаг, но теперь измените значение на 1080px, это разместит в общей сложности 960px в центре нашего холста.
Шаг 2: Работа над фоном
Начните с заполнения слоя с фоном цветом #081010. Далее мы создадим сетку. Создайте новый документ 20 x 20px с прозрачным фоном.
Используя инструмент Pencil Tool с заливкой цвета #FFFFFF, создайте Pattern, как показано на скриншоте ниже.
Чтобы сохранить этот шаблон, перейдите в меню Edit - Define Pattern. Теперь, когда мы создали образец, используйте инструмент Paint Bucket Tool, установив для него в свойствах "Pattern", и выберите наш шаблон, чтобы заполнить им холст, который мы создали. Убедитесь в том, что вы делаете это на новом слое.
После заполнения установите режим наложения для этого слоя на Soft Light и Opacity на 50%.
Шаг 3: Работа над шапкой
Раздел заголовка будет содержать логотип, навигацию и панель поиска. Чтобы создать его организацию, сделайте 3 папки для слоев логотипа, навигации и поиска.
Для начала мы сделаем базу формы для хранения всех элементов нашего заголовка. Используя Rectangle Tool, создайте прямоугольник размерами 960px на 50px. Залейте его любым цветом, потому что мы будем применять к нему стили слоя.
Примените эти стили для слоя
Gradient Overlay: #353535, #505050
Stroke: #081010
Логотип
Я использовал шрифт Helvetica Black 24pt. (кому нужен этот шрифт, скачать его можно - Прим.PS-Studio.Info)
Примените эти стили слоя
Drop Shadow: #000000
Gradient Overlay: #92b4b5, #FFFFFF
Навигация
Навигация будет содержать ссылки и разделители. Ссылки будут иметь расстояния по 18px слева и справа от перегородок. Навигация начинается на расстоянии 208px от логотипа. Отмерьте его, используя инструмент Ruler Tool.
Используя инструмент Rectangular Marquee Tool, создайте 1px выделение, начиная от указанного расстояния. Теперь выберите инструмент Gradient Tool, цвет фона установите прозрачным, цвет переднего плана #4f4f4f и, наконец, заполните выделение, начиная снизу вверх.
Используя Line Tool, создайте другую линию в 1px и заполните цветом #081010.
Как я уже говорил, ссылки будут на расстоянии 18px от перегородок. Для ссылок я использовал шрифт Helvetica Roman 14pt.
Обратите внимание на скриншот выше, все перегородки и ссылки я дистанцировал на расстоянии 18px. Просто повторяйте раз за разом, пока не закончите навигацию. Навигационные ссылки будут world, business, sports, tech, web, science.
Когда вы закончите, дублируйте текст, смените цвет текста на #1b1b1b и переместите его на 1px выше от оригинального.
Оставшееся место будет для нашей панели поиска.
Панель поиска
Для начала выберите Rounded Rectangle Tool, установите радиус на 20 пикселей, создайте форму, как показано на скриншоте ниже, с заливкой цветом #363636.
Примените стили слоя
Inner Shadow: #000000
Drop Shadow: #4f4f4f
Последним шагом добавьте иконку поиска, измените её размер и поместите как показано на скриншоте ниже.
Шаг 4: Работа над слайдером
Слайдер содержит изображение предварительного просмотра, превьюшки, название, содержание, кнопку читать далее и ползунок. Во-первых, мы создадим нашу базовую форму, чтобы вместить все содержимое. Используя инструмент Rectangle Tool с заливкой цветом #e1eaea, создайте форму размерами 620px на 1305px.
Мы добавим шума нашему базовому слою. Для этого перейдите в меню Filter - Convert to Smart Filter, перейдите в меню Filter - Noise - Add Noise - 1
Найдите любые примеры фотографий, размеры будут 300px на 200px для предварительного просмотра изображения и 60px на 60px для миниатюр. Поместите их, как показано на скриншоте ниже.
Продолжение здесь...
Ресурсы для этого урока:
Шаг 1: Создание документа
Начните с создания нового документа размерами 1200 х 1700px в Photoshop.
Инструмент Ruler Tool будет очень полезен для этого обучающего урока, убедитесь, что направляющие и линейки включены.
Линейки: Ctrl + R
Направляющие: Ctrl +;
Также очень важно при использовании Ruler Tool отображение Info (Информация) панели. Используйте её, когда вы измеряете нужные расстояния, информация будет отображаться в информационной панели. Убедитесь, что она активна в вашей панели справа. Если нет, Вы можете получить доступ к ней, переходом в Window - Info.
Общая ширина вашего сайта будет 960px. Итак, давайте создадим нашу первую направляющую, перейдя в View - New Guide, установите значение 120px. Повторите шаг, но теперь измените значение на 1080px, это разместит в общей сложности 960px в центре нашего холста.
Шаг 2: Работа над фоном
Начните с заполнения слоя с фоном цветом #081010. Далее мы создадим сетку. Создайте новый документ 20 x 20px с прозрачным фоном.
Используя инструмент Pencil Tool с заливкой цвета #FFFFFF, создайте Pattern, как показано на скриншоте ниже.
Чтобы сохранить этот шаблон, перейдите в меню Edit - Define Pattern. Теперь, когда мы создали образец, используйте инструмент Paint Bucket Tool, установив для него в свойствах "Pattern", и выберите наш шаблон, чтобы заполнить им холст, который мы создали. Убедитесь в том, что вы делаете это на новом слое.
После заполнения установите режим наложения для этого слоя на Soft Light и Opacity на 50%.
Шаг 3: Работа над шапкой
Раздел заголовка будет содержать логотип, навигацию и панель поиска. Чтобы создать его организацию, сделайте 3 папки для слоев логотипа, навигации и поиска.
Для начала мы сделаем базу формы для хранения всех элементов нашего заголовка. Используя Rectangle Tool, создайте прямоугольник размерами 960px на 50px. Залейте его любым цветом, потому что мы будем применять к нему стили слоя.
Примените эти стили для слоя
Gradient Overlay: #353535, #505050
Stroke: #081010
Логотип
Я использовал шрифт Helvetica Black 24pt. (кому нужен этот шрифт, скачать его можно - Прим.PS-Studio.Info)
Примените эти стили слоя
Drop Shadow: #000000
Gradient Overlay: #92b4b5, #FFFFFF
Навигация
Навигация будет содержать ссылки и разделители. Ссылки будут иметь расстояния по 18px слева и справа от перегородок. Навигация начинается на расстоянии 208px от логотипа. Отмерьте его, используя инструмент Ruler Tool.
Используя инструмент Rectangular Marquee Tool, создайте 1px выделение, начиная от указанного расстояния. Теперь выберите инструмент Gradient Tool, цвет фона установите прозрачным, цвет переднего плана #4f4f4f и, наконец, заполните выделение, начиная снизу вверх.
Используя Line Tool, создайте другую линию в 1px и заполните цветом #081010.
Как я уже говорил, ссылки будут на расстоянии 18px от перегородок. Для ссылок я использовал шрифт Helvetica Roman 14pt.
Обратите внимание на скриншот выше, все перегородки и ссылки я дистанцировал на расстоянии 18px. Просто повторяйте раз за разом, пока не закончите навигацию. Навигационные ссылки будут world, business, sports, tech, web, science.
Когда вы закончите, дублируйте текст, смените цвет текста на #1b1b1b и переместите его на 1px выше от оригинального.
Оставшееся место будет для нашей панели поиска.
Панель поиска
Для начала выберите Rounded Rectangle Tool, установите радиус на 20 пикселей, создайте форму, как показано на скриншоте ниже, с заливкой цветом #363636.
Примените стили слоя
Inner Shadow: #000000
Drop Shadow: #4f4f4f
Последним шагом добавьте иконку поиска, измените её размер и поместите как показано на скриншоте ниже.
Шаг 4: Работа над слайдером
Слайдер содержит изображение предварительного просмотра, превьюшки, название, содержание, кнопку читать далее и ползунок. Во-первых, мы создадим нашу базовую форму, чтобы вместить все содержимое. Используя инструмент Rectangle Tool с заливкой цветом #e1eaea, создайте форму размерами 620px на 1305px.
Мы добавим шума нашему базовому слою. Для этого перейдите в меню Filter - Convert to Smart Filter, перейдите в меню Filter - Noise - Add Noise - 1
Найдите любые примеры фотографий, размеры будут 300px на 200px для предварительного просмотра изображения и 60px на 60px для миниатюр. Поместите их, как показано на скриншоте ниже.
Продолжение здесь...
Всего комментариев: 0
Оставь комментарий первым!
