Как создать слайдер изображений с помощью Photoshop и jQuery

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

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

Звучит как сложное, но на самом деле это довольно просто и очень легко понять, тогда давайте начнем!

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

• Слайдер изображений: 23 слайдера jQuery
• Слайдер изображений: 18 плагинов WordPress

Начиная

Для этого урока вам понадобятся следующие ресурсы:

• 26 повторяющихся пиксельных паттернов из PSDfreemium.
• библиотека jQuery
• Плагин Nivo Slider
• Modernizr
• Найденные бумажные текстуры от VandelayPremier
• (Альтернатива) 13 HQ Старые бумажные текстуры от передозировки
• Ринджани от Ciaciya
• Ступа Агнес Сим
• Талли Нино Сатрия
• Предложения Тимо Балка
• Улувату-Бали от Арис Уэй

Часть I - Разработка слайдера изображений

Шаг 1: Настройка фона

Начните с создания нового файла размером 1000 × 700 пикселей. Залейте фон цветом # efc89e.

Добавьте Pattern Overlay, используя бесплатный шаблон пикселей от PSDfreemium.

Шаг 2: Ползунок

Активировать инструмент Прямоугольник. Создайте прямоугольник размером 940 × 450 пикселей. Вы можете использовать любой цвет, это не имеет значения.

Дважды щелкните слой, чтобы открыть диалоговое окно «Стиль слоя». Добавить тень слоя, внешнее свечение и обводку.

Это результат. База слайдера теперь имеет красивую рамку с мягкой тенью позади нее.

Шаг 3

Добавьте фотографию и поместите ее над основанием слайдера. Нажмите Ctrl + Alt + G, чтобы преобразовать его в обтравочную маску и вставить фотографию в слайдер.

Шаг 4: Лента

Нарисуйте прямоугольник с цветом # f4e1ae для использования в качестве ленты.

Дважды щелкните слой формы и активируйте Bevel and Emboss, Gradient Overlay и Pattern Overlay со следующими настройками.

Это результат после добавления стилей слоя.

Шаг 5

Давайте добавим текстуру бумаги на ленту, чтобы сделать ее более реалистичной. Поместите текстуру поверх формы ленты. Преобразуйте его в обтравочную маску, нажав Ctrl + Alt + G.

Шаг 6

Давайте нарисуем несколько теней и бликов на ленте. Создайте новый слой над лентой. Нарисуйте черным в нижней части ленты. Преобразуйте его в Clipping Mask (Ctrl + Alt + G), а затем уменьшите непрозрачность до 10%..

Шаг 7

Повторите предыдущий процесс для верхней части ленты. Но на этот раз добавьте подсветку, закрасив белым, а затем уменьшите непрозрачность до 50%..

Шаг 8: Швы

Активируйте Pencil Tool. Нажмите F5, чтобы открыть настройки кисти. Установите размер кисти на 1 px и увеличивайте интервал, пока мы не получим пунктирную линию в области предварительного просмотра.

Шаг 9

Нарисуйте 1 px черную линию поверх ленты. Уменьшите непрозрачность до 20%. Дублируйте слой, нажав Ctrl + J. Нажмите Ctrl + I, чтобы инвертировать его цвет. Увеличьте непрозрачность до 50%. Активируйте Move Tool и затем нажмите стрелку вниз и стрелку влево один раз, чтобы подтолкнуть его.

Вот результат при 100% увеличении.

Шаг 10

Повторите этот процесс, чтобы нарисовать другие стежки на другой стороне ленты.

Шаг 11: добавь богато украшенную форму

Установите цвет переднего плана на серый. Используйте мягкую кисть размером 1 px, чтобы нарисовать богато украшенную форму. Будьте изобретательны, вы можете использовать любую форму, которая вам нравится. Рядом с ним нарисуйте линию размером 1 пиксель, а затем сотрите ее внешний край с помощью мягкого инструмента «Ластик». Дублируйте линию, переверните ее горизонтально и поместите на другую сторону.

Шаг 12

Выделите все декоративные слои и объедините их в один слой, нажав Ctrl + E. Дублируйте форму, а затем поместите ее под исходную декоративную форму. Нажмите Ctrl + I, чтобы инвертировать его цвет. Активируйте Move Tool и затем нажмите стрелку вниз один раз, чтобы подтолкнуть его на 1 px вниз.

Шаг 13: Информация о фотографии

Введите данные фотографии внутри ленты.

Шаг 14: Навигация

Далее мы нарисуем несколько кругов для навигации по слайдам. Нарисуйте форму круга с цветом: # 8d877c на нижней части ленты.

Добавьте Inner Shadow, используя следующие настройки.

Это результат. Круг превращается в неглубокую дыру.

Шаг 15

Удерживайте Alt, а затем перетащите слой в форме круга, чтобы дублировать его.

Шаг 16

Давайте установим активное состояние на одну из этих ссылок. Выберите один из кругов и измените его цвет на # bebbb5. Добавьте Inner Shadow, Gradient Overlay и Stroke.

Шаг 17

Удерживайте Ctrl, а затем щелкните миниатюру основы ленты на панели «Слои». Создайте новый слой под лентой и залейте его черным. Активируйте Move Tool и несколько раз нажмите стрелку влево и вниз.

Шаг 18

Смягчите его, выполнив фильтр Gaussian Blur. Нажмите Фильтр> Размытие> Размытие по Гауссу.

Шаг 19

Поместите тень ленты над слоем рамки слайдера. Преобразуйте его в обтравочную маску, нажав Ctrl + Alt + G.

Шаг 20

Уменьшите непрозрачность тени до 40%.

Шаг 21

Краска ленты тени на фоне. Уменьшите его непрозрачность до 20%.

Шаг 22

Используйте Pen Tool, чтобы нарисовать часть ленты. Установите его цвет # b68f63. Поместите это позади ползунка.

Это результат просмотра при 100% увеличении.

Шаг 23

Дублируйте фигуру, которую мы только что создали, и поместите ее за верх ленты. Переверните его вертикально.

Шаг 24: Окончательный результат в Photoshop

Это наш окончательный результат в Photoshop. Далее мы продолжим кодировать его в функциональный слайдер.

Часть II - Преобразование в HTML / CSS

Шаг 25 - Настройка файлов

Создайте новую папку с именем My-Photo-Slider. Внутри этой папки создайте новый пустой документ HTML (index.html), пустая таблица стилей (style.css) и папка для изображений (IMG). Нам также необходимо включить в папку библиотеку jQuery и плагин Nivo Slider. Поскольку мы используем разметку HTML5, нам нужно добавить взлом IE, чтобы включить элементы HTML5 в IE 8 или ниже. Мы будем использовать скрипт Modernizr для размещения IE.

Шаг 26 - Базовая разметка HTML

открыто index.html в вашем любимом редакторе кода. Определите DOCTYPE (мы используем HTML5), голова элементы (где мы добавляем заголовок документов и связываем CSS и JavaScript (jQuery Library, Nivo Slider и Modernizr). Мы также добавляем ДИВ обертка (для центрирования макета), заголовок элемент и слайдер.

Шаг 27 - Срез PSD

Откройте макет PSD и нарежьте все необходимые изображения. Для изображения давайте возьмем следующие изображения с sxc.hu (требуется вход в систему, если у вас еще нет учетной записи, вы можете зарегистрироваться бесплатно). Измените размер всех изображений до 920 × 430 пикселей. Поместите все изображения в папку изображений (IMG).

1. Ринджани от Ciaciya
2. Ступа Агнес Сим
3. Талли Нино Сатрия
4. Предложения Тимо Балка
5. Улувату-Бали от Арис Уэй

Шаг 28 - Создать заголовок

Добавьте следующий код между

а также

.

 
 Мои фото слайды 
 

Теперь давайте добавим стиль в заголовок. Мы также добавляем стиль для элементов body и wrapper. Поместите все стили в таблицу стилей, style.css.

 / * Basic Styling * / body background: прозрачный URL (img / bg.jpg); шрифт: 15px / 2 'Adobe Caslon Pro', Грузия, с засечками; Маржа: 0; обивка: 0;  a outline: 0 none #pagewrap margin: 120px auto; обивка: 0; позиция: относительная; высота: 100%; ширина: 960px;  header display: block; плавать: право; Маржа направо: 40px; ширина: 192px; г-индекс: 52; позиция: относительная;  h1 background: прозрачный URL (img / separator.png) без повтора центра снизу; / * Добавить разделительную линию под заголовком * / font-size: 18px; начертание шрифта: жирный; высота: 70px; высота строки: 1,1; поле: 55px 10px 0; выравнивания текста: центр; текст-преобразования: заглавные буквы;  

Шаг 29 - Добавить фото слайдер

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

.

А затем добавить ленту и подпись к фотографиям.

 
 
 Фотограф:
 Энрико Нунциати
 Место нахождения:
 Пустыня Намиб
 Модель:
 Мертвый Влей
 Дата:
 18 марта 2011 г. 
 
 Фотограф:
 Лина Дхамманари
 Место нахождения:
 Остров Ломбок, Индонезия
 Модель:
 Гора Ринджани
 Дата:
 8 мая 2008 г. 
 
 Фотограф:
 Агнес Сим
 Место нахождения:
 Боробудур, Индонезия
 Модель:
 Большая Ступа
 Дата:
 12 июня 2008 г. 
 
 Фотограф:
 Нино Сатрия
 Место нахождения:
 Taman Safari Индонезия
 Модель:
 Талли Жираф
 Дата:
 16 августа 2009 г. 
 
 Фотограф:
 Тимо Балк
 Место нахождения:
 Убуд, Бали, Индонезия
 Модель:
 Предложения
 Дата:
 20 декабря 2009 г. 
 
 Фотограф:
 Арис Уэй
 Место нахождения:
 Uluwatu-Бали
 Модель:
 Красивый пляж
 Дата:
 20 июля 2011 
 

Теперь, если мы откроем index.html в браузере у нас есть что-то вроде этого:

Шаг 30

Нам все еще нужно исправить внешний вид слайдера с помощью CSS.

 #slidewrap position: absolute; #slider position: относительный; высота: авто; ширина: 920px; рамка: 10px solid #fff; тень от рамки: 0 0 5px # 444; Маржа: 10px;  .ribbon фон: прозрачный URL (img / info-bg.png) no-repeat; высота: 482px; ширина: 192px; позиция: абсолютная; право: 40px; верх: -3px; г-индекс: 50;  #slider img position: absolute; топ: 0px; Слева направо: 0px; Дисплей: нет;  

Это то, что мы имеем сейчас.

В настоящее время мы связали плагин слайдера Nivo, но мы не подключили скрипт. Итак, давайте подключим скрипт, добавив эти функции JavaScript между а также элемент.

Шаг 31: Стиль слайдера

Последний шаг - добавление стиля слайдера..

 / * Стили ползунка Nivo * / .nivoSlider позиция: относительная;  .nivoSlider img position: absolute; топ: 0px; Слева направо: 0px;  / * Если изображение заключено в ссылку * / .nivoSlider a.nivo-imageLink position: absolute; топ: 0px; Слева направо: 0px; ширина: 100%; высота: 100%; граница: 0; обивка: 0; Маржа: 0; Z-индекс: 6; Дисплей: нет;  / * Срезы и поля в ползунке * / .nivo-slice display: block; позиция: абсолютная; Z-индекс: 5; высота: 100%;  .nivo-box display: block; позиция: абсолютная; Z-индекс: 5;  .nivo-directionNav показ: нет! важно .nivo-html-caption показ: нет;  .nivo-caption позиция: абсолютная; право: 20px; выравнивания текста: центр; топ: 130px; ширина: 192px; г-индекс: 60;  .nivo-caption p margin: 0 .nivo-caption .title font-style: italic .nivo-controlNav position: absolute; внизу: 10px; право: 20px; высота: 15px; ширина: 192px; выравнивания текста: центр; Дисплей: блок; г-индекс: 51;  .nivo-controlNav a background: transparent url (img / button.png) центр центра без повтора; Дисплей: встроенный блок; высота: 14px; ширина: 14px; Текст-отступов: -9999px; курсор: указатель;  .nivo-controlNav .active background: прозрачный URL (img / button_active.png);  

Финальный результат + Скачать

Это наш окончательный результат, нажмите здесь, чтобы увидеть рабочую демонстрацию.

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

• PSD файл учебника по слайдеру изображений
• Изображение Slider Tutorial Завершить проект