Создание веб-страницы с элементами 3D с помощью Photoshop

(Еще не оценили)

Загрузка ...

Автор: Камель Nahdi

Я Камель Nahdi. Я пишу учебники для различных журналов и сайтов, когда я не проектирование концерт плакаты, футболки, каталогов, журналов и т.д.

Камель Nahdi был написал 46 статей для нас.

В этом уроке веб-дизайн, вы откроете для себя способ создания гладкой и профессиональной верстки веб-страниц, что включает в себя 3D тенденции дизайна ленты , а также некоторые другие увлекательные 3D-элементов, с помощью Photoshop.

Конечный результат

Вот предварительный просмотр того, что мы собираемся создать. Нажмите на картинку ниже, чтобы увидеть полное разрешение конечного продукта .

Создание документа Photoshop

1 Начните с создания нового документа (Ctrl + N), введите размеры 1200 пикселей на 1200 пикселей.

Создание фонового слоя редактируемые

2 По умолчанию Photoshop блокирует фоновый слой, так что вы не можете изменить его. Для того, чтобы редактировать его, дважды щелкните на фоновом слое в панели слоев (нажмите F7 для переключения панели слоев, если она не видна). Кроме того, можно щелкнуть правой кнопкой мыши на фоновом слое и выберите "Слои из фона". После двойного щелчка, вам будет представлен с помощью диалогового окна (как показано на рисунке ниже). Введите новое имя для фонового слоя и нажмите OK; делать это позволит нам изменить наш фоновый слой.

Создание фона

3 Теперь, когда наш фоновый слой доступен для редактирования, дважды щелкните по иконке слоя, чтобы добавить стиль слоя Gradient Overlay, используйте следующий рисунок в качестве руководства по настройке слою стиля.

4 Создайте новый слой (Ctrl + Shift + N) под названием "заголовок фоне". Выберите Rectangular Marquee Tool (M) на панели инструментов, а затем сделать выбор в верхней половине полотна, выбор должен быть примерно 150 пикселей в высоту и охватывают всю ширину полотна.

5 Залейте выделение (Alt + Backspace) с любым цветом, затем добавьте эти стили слоя.

6 Создайте новый слой (Ctrl + Shift + N) с надписью "навигация фоне". Повторите шаги 4 - 5, только на этот раз выбор должен быть около 50 пикселей в высоту, по-прежнему охватывает всю ширину наш холст, выбор должен быть непосредственно под последним.

7 Залейте выделение (Alt + Backspace) с любым цветом, затем добавить несколько стилей слоя (Наложение цвета и инсульта стиль слоя).

Теперь вы должны иметь что-то вроде этого.

Создание заголовка

8 Создайте новый слой (Ctrl + Shift + N) с надписью "заголовок", получить Rectangular Marquee Tool (M) на панели инструментов, а затем сделать выбор фиксированного размера, что является 850px широкий и 150px в высоту.

9 Место отбора в середине полотна, убедившись, что в нижней части выбора заканчивается на удар, который применяется в "навигации фон" слоя.

10 Залейте выделение (Alt + Backspace) с любым цветом, а затем добавьте следующие три стиля слоя.

Добавление заголовка название

11 Добавить ваше название сайта и слоган на левой стороне заголовка, используя инструмент Horizontal Type Tool (T). Настройки и цветовые коды приведены на рисунке ниже.

Вы должны иметь что-то вроде этого.

Создание панели навигации

12 Создайте новый слой (Ctrl + Shift + N) с надписью "навигация". Используйте Rectangular Marquee Tool (M), чтобы сделать выбор фиксированного это 850px широкий и 50px в высоту.

13 Сделайте выбор прямо под заголовок, затем залейте любым цветом.

14 Теперь, добавим эти три стили слоя к "навигация" слоя.

Вы должны иметь что-то вроде этого.

15 Используйте инструмент Horizontal Type Tool (T), чтобы добавить свои ссылки навигации на навигационной панели.

Создание навигации Hover кнопки

16 Выберите Rounded Rectangle Tool (U) на панели инструментов и установите его радиус 10px.

17 Нарисуйте маленький прямоугольник, это около 80px 50px х.

18 Используйте Rectangular Marquee Tool (M), чтобы создать прямоугольник над верхней половине прямоугольника. Заполните прямоугольник такого же цвета, что и прямоугольник с закругленными углами.

19 Продублируйте форму щелкнув правой кнопкой мыши на слое и выберите Duplicate Layer. Затем поверните дубликат на 180 градусов с помощью функции преобразования, Edit> Transform> Rotate ¹⁸⁰ °. Наконец, поместите форму рядом друг с другом уровне убедившись, что там, используйте Move Tool (V), чтобы переместить форму вокруг.

20 Сделайте выделение вокруг половины дублируется фигуру с помощью инструмента Rectangular Marquee Tool (M). После того как вы сделали выбор, нажмите Del, чтобы очистить площадь под выделения.

21 Используйте Move Tool (V) и клавиши со стрелками, чтобы выровнять форму немного рядом с большой формы, убедившись, что они непосредственно не совпадают. После перемещения на место, нажмите Ctrl + эскиз вашего маленького слоя фигуры в окне панели слоев, чтобы загрузить выделение вокруг нее.

22 Переключитесь на слой больше формы и нажмите клавишу Del, чтобы очистить площадь под ним. Повторите действия для другой стороны формы - и когда вы закончите - вы должны иметь что-то вроде этого.

Преобразование кнопку Hover

23 Если у вас есть при наведении кнопки можно удалить дубликат, а затем переименуйте оставшиеся слой "навигационной наведения". Теперь добавьте эти несколько стилей слоя к нему.

24 Перетащите "навигационной наведения" слой под слой с текстом навигации. Сдвиг "навигационные кнопки" слой за одну из ссылок навигации, а затем изменить цвет текста ссылки на белый (# FFFFFF).

25 Под ваши "навигационной наведения" кнопку слой, создайте новый слой (Ctrl + Shift + N) называется "навигационной наведения дополнительно". На этом слое создайте небольшой эллипс, используя Elliptical Marquee Tool (M) и заполните эллипс цветом # A3002F.

26 Разрежьте пополам эллипс, используя инструмент Rectangular Marquee Tool, чтобы сделать выбор в нижней половине, и удаление нижней части. Затем переместите половину эллипса под округлые части навигационной кнопки. Если эллипс висит над навигация, обрежьте ее еще больше. После того как эллипс нужного размера, не дублировать этот слой и поместите дубликат на другой стороне.

Вы должны иметь что-то вроде этого.

Создание области содержимого

27 Создайте новый слой (Ctrl + Shift + N) под названием "Содержание области". Используя Rectangular Marquee Tool, создаем выделение 850px в ширину, так же как и другие наши ящики, и так высоко, как нужно в зависимости от количества содержимого вашего придется, вы можете сделать его больше или меньше, позже, по мере необходимости. Залейте выделение любым цветом, а затем добавить эти три стиля слоя.

28 Перетащите "содержание области" слой под "навигация" слой и установить окно содержание области с помощью Move Tool (V), поэтому его выглядит красной строки, где площадь содержание и навигацию с концами.

Создание поле поиска графических

29 Создайте новый слой (Ctrl + Shift + N) называется "поле поиска" и создайте прямоугольное выделение шатер в области навигации по правой стороне использованием Rectangular Marquee Tool (M).

30 Залейте выделение, выбрав Edit> Fill (Shift + F5) с цветом белый (# FFFFFF), а затем добавьте стиль слоя Stroke.

31 Внутри манекена поле поиска, добавить текст в использовании инструмент Horizontal Type Tool (T).

32 Непосредственно рядом с манекена поле поиска, создать еще один выделение с помощью Rectangular Marquee Tool (M).

33 Залейте выделение любым цветом, затем добавьте Наложение градиента и обводки стиля слоя, используйте следующие цифры для указания на их параметры.

Вы должны иметь что-то вроде этого.

Создание Рекомендуемые район

34 Создайте новый слой (Ctrl + Shift + N) под названием "Лучшее области" и создать прямоугольник с закругленными углами области с помощью инструмента прямоугольник с закругленными углами с радиусом набора на 10 пикселей.

35 Используйте Polygonal Lasso Tool (L), чтобы создать стрелки на верхнем левом углу. Заполните стрелки на том же слое с тем же цветом, что и прямоугольник с закругленными углами.

36 Теперь добавим несколько стилей слоя (Наложение градиента и обводки) к признакам слой области.

Заполнение Рекомендуемые области с содержанием

37 Создайте новый слой (Ctrl + Shift + N) под названием "Лучшее границы" и с помощью Rounded Rectangle Tool (U), создайте прямоугольную форму внутри признакам области.

38 Добавить тонко наложение градиента признакам слой границы. Нажмите на миниатюру слоя, удерживая клавишу Ctrl на клавиатуре, чтобы загрузить выделение вокруг него, а затем перейти к "Select> Modify> Contract". Контракт выбор 10px, а затем нажмите кнопку OK.

39 Найти изображение / фотографию, которую вы хотите использовать (я использовал изображение некоторых цветов), откройте его в Photoshop, а затем скопировать изображение в буфер обмена (Ctrl + C). Затем с контрактной область выделения, которые мы сделали в предыдущем шаге по-прежнему активны, перейдите в Edit> Paste Into (Shift + Ctrl + V). Изображение затем будет вставить в выборе.

40 прикончить признакам область с некоторыми манекен текст и заголовки.

Создание 3D-ленты содержание района

41 Таким же образом, как наши навигационные кнопки при наведении создать левый номинальной стоимости, только на этот раз создать главную часть перекрытия намного дольше и горизонтально, а вертикально (переход обратно на внесении кнопки навигации Hover разделе руководства, чтобы обновить памяти, если это необходимо).

42 В конце ленты (правая сторона), создать треугольную форму, используя Polygonal Lasso Tool (L) и использовать клавишу Del, чтобы удалить нежелательные области. Наконец, добавьте слой Drop Shadow стиль этого слоя (используйте ваши любимые настройки) и некоторых манекен текст.

43 Дублируйте 3D слой ленты и переверните дубликат слоя, выбрав Edit> Transform> Flip горизонтально. С помощью Move Tool (V), чтобы расположить его справа, они будут служить в качестве заголовков для боковой панели содержания.

44 Под каждым заголовком, добавить текст и, возможно, фиктивный образ или два.

Создание Footer

45 Повторное кнопки при наведении снова (в качестве альтернативы, вы можете просто дублировать слои кнопки при наведении).

46 Заменить Gradient Overlay настройки с использованием цветов, перечисленных ниже.

47 объединить их в один слой и поверните его помощью Edit> Transform> Rotate ⁹⁰ ° против часовой стрелки. Перемещение объекта на левой стороне макета.

48 Продублируйте форму снова переверните его по горизонтали с помощью Edit> Transform> Flip горизонтально. Перемещение через форму на другую сторону макета.

49 Слияние и формы в один слой (Ctrl + E), зум (Z) в любой из форм, и сделайте прямоугольное выделение так же, как на рисунке ниже, и выберите Edit> Free Transform (Ctrl + T).

50 Выберите среднюю точку привязки и перетащить на другую сторону полотна.

Вы должны иметь что-то вроде этого.

51 Наконец, используя инструмент Horizontal Type Tool (T) добавить футер информации.

Конец!

Если вы следовали вдоль учебник, вы должны получить нечто похожее на следующем рисунке.

Скачать файл Photoshop

Вы можете скачать конечного файла Photoshop (PSD), используемые в данном руководстве для улучшения обучения и сравнить свою собственную работу с нашими.

• 3D-ленты layout.zip (ZIP, 1.24Mb)

Пожалуйста, поделитесь своими результатами!

Вы можете поделиться своими результатами на Flickr, присоединившись к группе шести ревизий и загрузки конечного продукта. Будь вы только начинающий или опытный пользователь Photoshop - мы хотели бы видеть, что вы есть!

• Дизайн стильный иконка почты в Photoshop
• Как формировать Paint Splatter для лица в фотошопе
• Трогательная история сцены в Photoshop
• Простые Coffee Cup Иконка Photoshop Tutorial
• Как создать Темный эмоциональной манипуляции фотографии