Создаём макет сайта в Фотошоп
Создаём макет сайта в Фотошоп
В этом уроке Вы узнаете, как создать макет сайта или портфолио в Фотошоп.Сложность урока: Средний
- #Шаг 1. Работа со структурой сайта
- #Шаг 2. Создание шапки сайта
- #Шаг 3. Создание логотипа
- #Шаг 4. Создание навигации
- #Шаг 5. Создание поля поиска и хлебных крошек
- #Шаг 6. Создание слайд-шоу
- #Шаг 7. Добавление кнопки «Читать далее»
- #Шаг 8. Добавление изображения в слайд-шоу
- #Шаг 9. Добавление переключателей слайдов
- #Шаг 9. Добавление контента
- #Шаг 10. Добавление блока «О нас»
- #Шаг 11. Добавление последних записей из Твиттера
- #Шаг 12. Создание футера
- # Комментарии
Итоговый результат:
Исходники к уроку:
- 960 Grid System
- Набор иконок
- Иконка 1
- Иконка 2
- Иконка 3
Шаг 1. Работа со структурой сайта
Для начала скачайте шаблон 960 Grid System. Откройте 960_download\templates\photoshop\960_grid_12_col.psd Нажмите Ctrl+Shift+C чтобы изменить размер холста.
Используя инструмент Заливка (Paint Bucket Tool) залейте фон цветом #151515. Теперь Вам нужно создать папку для каждой части макета.
Шаг 2. Создание шапки сайта
Создайте новую направляющую (Просмотр > Новая направляющая (View > New Guide)), Положение (Position) установите на 150px, Ориентация (Orientation) - горизонтальная. Повторите этот шаг и создайте ещё две направляющие с положением в 5 и 100 пикселей.
Внутри папки Header создайте новый слой и назовите его "header_top".
С помощью инструмента Прямоугольная область (Rectangular Marquee Tool) создайте выделение 5px в высоту, залейте чёрным цветом и добавьте к слою 1 пиксельную светлую тень.
Создайте новый слой и назовите его "header_bg". Возьмите инструмент Прямоугольная область (Rectangular Marquee Tool) и создайте выделение, как показано на скриншоте ниже.
Возьмите инструмент Градиент (Gradient Tool), цвет градиента #242424 - #151515, и залейте выделение градиентом.
Откройте окно Стили слоя (Layer Style) и активируйте Внутреннюю тень (Inner Shadow) со следующими параметрами:
Шаг 3. Создание логотипа
Внутри папки Header создайте новую папку "Logo". Возьмите инструмент Текст (Text Tool) и добавьте название сайта и слоган используя параметры со скриншота ниже.
Откройте Стили слоя (Layer Style) и активируйте Тень (Drop Shadow).
Возьмите инструмент Произвольная фигура (Custom Shape Tool) и следуйте подсказкам на скриншоте ниже.
К фигуре добавьте следующие стили:
Тень (Drop Shadow)
Градиент (Gradient Overlay)
Шаг 4. Создание навигации
Внутри папки Header создайте новую папку и назовите её "navigation". С помощью инструмента Текст (Text Tool) добавьте категории, используя параметры указанные на скриншоте ниже.
Дублируйте текстовый слой. Измените цвет оригинального текстового слоя на чёрный и переместите на 1px вверх.
Теперь нам нужно создать эффект для активной категории. Под слоём с категориями создайте новый слой, выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), радиус 10pх, и создайте прямоугольник. В панели слоёв уменьшите Заливку (Fill) до 0%.
Примените следующие стили слоя:
Тень (Drop Shadow)
Внутренняя тень (Inner Shadow)
Наложение градиента (Gradient Overlay)
Шаг 5. Создание поля поиска и хлебных крошек
Внутри папки Header, над слоём header_bg создайте новый слой и назовите его bg. Выберите инструмент Прямоугольная область (Rectangle Marquee Tool), создайте выделение как показано на скриншоте ниже и залейте его каким-нибудь цветом.
Затем добавьте стили слоя используя параметры указанные ниже:
Тень (Drop Shadow)
Внутреннее свечение (Inner Glow)
Наложение градиента (Gradient Overlay)
Обводка (Stroke)
Внутри папки Header создайте папку Search. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), радиус 10px, и создайте прямоугольник как на скриншоте ниже.
Добавьте стили слоя:
Тень (Drop Shadow)
Внутренняя тень (Inner Shadow)
Выберите инструмент Текст (Text Tool) и добавьте какой-нибудь текст в поисковое поле.
Теперь откройте набор соц. иконок и поместите их возле поиска.
Внутри папки Header создайте папку Breadcrumbs. Откройте иконку домика и поместите её, как на скриншоте ниже. Я добавил Наложение цвета (Color Overlay) #696969 к иконке и к текстовому слою.
Шаг 6. Создание слайд-шоу
Внутри папки Slideshow создайте новый слой и назовите его slide_bg. Создайте новую направляющую, для этого перейдите в Просмотр > Новая направляющая (View > New guide), Положение (Position) установите на 430px, Ориентация (Orientation) горизонтальная. Создайте выделение как на скриншоте ниже и залейте каким-нибудь цветом.
Добавьте следующие стили слоя:
Тень (Drop Shadow)
Наложение узора (Pattern Overlay)
Обводка (Stroke)
Над слоём slide_bg создайте новый слой и назовите его highlights. Выберите инструмент Перо (Pen Tool), нарисуйте фигуру как на скриншоте ниже и создайте выделение.
Залейте выделение белым цветом, измените режим наложения на Мягкий свет (Soft Light) и уменьшите Непрозрачность (Opacity) до 50%
Теперь нужно добавить какой-нибудь текст внутрь нашего слайд-шоу. Выберите инструмент Текст (Text Tool) и, следуя подсказкам на скриншоте ниже, добавьте свой текст.
Шаг 7. Добавление кнопки «Читать далее»
Внутри папки slideshow создайте папку read_more. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), радиус 10px, создайте прямоугольник и поместите как на скриншоте ниже.
Заливку (Fill) слоя уменьшите до 0%. Добавьте следующие стили слоя:
Тень (Drop Shadow)
Внутренняя тень (Inner Shadow)
Наложение градиента (Gradient Overlay)
Загрузите выделение для слоя, который мы только что создали. Перейдите в Выделение > Модификация > Сжать (Select > Modify > Contract), введите 5px и залейте выделение любым цветом.
Добавьте следующие стили слоя:
Тень (Drop Shadow)
Внутреннее свечение (Inner Glow)
Наложение градиента (Gradient Overlay)
Обводка (Stroke)
С помощью инструмента Текст (Text Tool) добавьте надпись «Читать далее» на кнопку и залейте тёмным цветом. Дублируйте текстовый слой, измените цвет текста на белый и сместите на 1px вниз.
Шаг 8. Добавление изображения в слайд-шоу
Выберите инструмент Прямоугольник (Rectangle Tool), создайте прямоугольник и поместите как на скриншоте ниже.
Уменьшите Заливку (Fill) до 0% и добавьте следующие стили слоя:
Тень (Drop Shadow)
Обводка (Stroke)
Я поместил изображение над слоем с прямоугольником. Таким образом у Вас должно получиться что-то вроде этого:
Шаг 9. Добавление переключателей слайдов
Создайте внутри папки Slideshow новую папку и назовите её prev_next. Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом в 10px. Создайте фигуру как показано на скриншоте ниже и переименуйте слой на "prev".
Уменьшите Заливку (Fill) до 0% и добавьте следующие стили:
Тень (Drop Shadow)
Внутренняя тень (Inner Shadow)
Наложение градиента (Gradient Overlay)
Дублируйте слой prev и переименуйте его на next. Отразите его по горизонтали и разместите в противоположной стороне.
Создайте ещё одну папку и назовите её Identifier. Внутри этой папки создайте слой и переименуйте его на inactive. Выберите инструмент Эллипс (Ellipse Tool), создайте несколько круглых фигур, залейте их чёрным цветом и разместите как на скриншоте ниже.
Добавьте им те же стили что и у кнопок prev_next.
Загрузите выделение для первой фигуры, перейдите в Выделение > Модификация > Сжать (Select > Modify > Contract) и введите 5px. Создайте новый слой, назовите его active, и залейте выделение каким-нибудь цветом.
Добавьте следующие стили:
Тень (Drop Shadow)
Внутреннее свечение (Inner Glow)
Наложение градиента (Gradient Overlay)
Шаг 9. Добавление контента
Внутри папки services создайте новый слой. Возьмите инструмент Текст (Text Tool) и добавьте заголовок используя параметры на скриншоте ниже.
Теперь давайте добавим разделитель. Выберите инструмент Линия (Line Tool), ширина 1px. Создайте две линии и разместите их как на скриншоте ниже.
Создайте новую папку и назовите её service1. Выберите инструмент Текст (Text Tool) и добавьте заголовок используя параметры указанные на скриншоте ниже. Откройте набор иконок, который Вы скачали в начале урока, и добавьте иконку возле заголовка.
Дублируйте несколько раз группу. Разместите их так же как на скриншоте ниже. В каждой группе измените иконку.
Шаг 10. Добавление блока «О нас»
Внутри папки about us создайте новый слой. С помощью инструмента Текст (Text Tool) добавьте заголовок. Дублируйте слой с разделителем, который мы создали в предыдущем шаге, и переместите его под заголовок.
Также добавьте какую-нибудь информацию о себе, используя параметры указанные на скриншоте ниже.
Перейдите в окно Стили слоя и добавьте следующие стили:
Тень (Drop Shadow)
Обводка (Stroke)
Шаг 11. Добавление последних записей из Твиттера
Внутри папки latest tweets создайте новый слой и с помощью инструмента Текст (Text Tool) добавьте какой-нибудь текст. С помощью инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) создайте прямоугольник и поместите его под какой-нибудь записью.
Для слоя с прямоугольником добавьте следующие стили слоя:
Тень (Drop Shadow)
Шаг 12. Создание футера
В папке footer создайте новый слой и назовите его footer_bg. Создайте выделение как на скриншоте ниже и залейте его каким-нибудь цветом.
Добавьте стили слоя:
Внутреннее свечение (Inner Glow)
Наложение градиента (Gradient Overlay)
Обводка (Stroke)
Возьмите инструмент Текст (Text Tool) и добавьте в центре футера свои копирайты.
Финальное изображение:
Автор: Michael John Burns
Источник: 1stwebdesigner.com
Комментарии 20
САСИБО
Спасибо!
кызылжар ерасыл света
Спасибо за урок!
Здравствуйте, у вас есть исходник данной работы?
Благодарю. Очень красиво и довольно таки легко
Юлия Сартакова, Здравствуйте, у вас есть исходник данной работы?
скромная проба пера)
Petelka123, Здравствуйте, у вас есть исходник данной работы?
а как это потом использовать на своем сайте?
Спасибо!
подкорректировал (пере залил) спасибо за урок
Спасибо!Очень интересно
Спасибо! Интересно.
Спасибо за урок, хорошая идея для корпоративного сайта)
Отличный урок! Спасибо)
Хороший урок! Интересный макет)
Спасибо большое за урок) Очень понравился)
Спасибо огромное!
Helena_todorova, Здравствуйте, у вас есть исходник данной работы?