Читать
Главная » Архив » Урок7. Рисуем слайдер

Урок7. Рисуем слайдер

01.12.2014 / Уроки

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

Но мы нарисуем немного другой слайдер - на фэнтезийную тему. Представим, что рисуем слайдер для данного сайта.

Итак, я подготовил скрин главной страницы и на нём нарисовал фигуру с закруглёнными углами (радиус 7 пикс.)

Урок7. Рисуем слайдер

Сразу же разместим картинку в слайдер, чтобы иметь верное представление о конечном результате. Допустим, это будет анонс предстоящей кинопремьеры года! Открываем понравившееся изображение в фотошопе (простым перетаскиванием), выделяем его (Ctrl+A), копируем (Ctrl+C), закрываем его (Ctrl+W) и вставляем скопированную в буфер обмена картинку поверх ранее нарисованной фигуры. Жмём комбинацию Ctrl+Alt+G, чтобы картинка приняла форму лежащей под ней фигуры.

Урок7. Рисуем слайдер

Придадим нашему слайдеру объёма, добавив интересную тень! Дублируем слой с фигурой (Ctrl+J) и перейдём на слой-источник (под дубликатом). С помощью инструмента "Перо" (P) создадим на нижней линии фигуры ровно посередине точку.

Урок7. Рисуем слайдер

Теперь инструментом "Стрелка" (A) подвинем добавленную точку вниз.

Урок7. Рисуем слайдер

Осталось размыть её. Взяв инструмент "Размытие" (R), кликаем по фигуре (в появившемся окне соглашаемся растрировать фигуру) и проводим по низу, размывая больше середину (кликая несколько раз), чем левую и правую части.

Урок7. Рисуем слайдер

Тень слишком густая. Уберём прозрачность на 25-30%.

Урок7. Рисуем слайдер

Осталось всего-ничего - добавить стрелки переключения слайдов. Для начала перейдём на слой с фигурой, служащей подложкой для изображения и опустим сверху линейку, так чтобы она  поделила фигуру пополам (в середине линейка должна примагнитится сама). Затем создадим над слоем с картинкой новый чистый слой (Shift+Ctrl+N) и вновь воспользуемся инструментом "Прямоугольник со скруглёнными краями" (U), чтобы нарисовать этакую сосиску:

Урок7. Рисуем слайдер

Трансформацией (Ctrl+T) повернём её на 45 градусов. Жмём Entert.

Урок7. Рисуем слайдер

Теперь копируем фигуру (Ctrl+C) и вставляем сюда же (Ctrl+V). Дубль фигуры сразу же трансформируем (Ctrl+T) и, кликнув правой кнопкой мыши в области трансформации, из списка выбираем "Отразить по вертикали".

Урок7. Рисуем слайдер

Снова Enter. И уже "Стрелкой" (А) двигаем вторую сосиску так, чтобы один их конец совпал друг с другом. Затем инструментом "Перемещение" (V) подвигаем получившуюся стрелку посередине поставленной ранее линейки.

Урок7. Рисуем слайдер

Теперь сольём две части одной фигуры. Для этого выберем другую вариацию  инструмента "Стрелка" (А) и выделим ею обе части фигуры, нажмём "Объединить".

Урок7. Рисуем слайдер

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

Урок7. Рисуем слайдер

При выделенном слое с кругом, зажимаем Shift, кликаем по слою со стрелкой и правой кнопкой по одному из выделенных слоёв - выбираем "Дубликат слоёв". Трансформацией по знакомой схеме отражаем дубли по горизонтали и перемещаем в другую сторону слайдера:

Урок7. Рисуем слайдер

Но обычно стрелки имеют два состояния - "рядовое" и "при наведении". Считаем что первая стрелка у нас находится в рядовом состоянии, а вторую стрелку мы видоизменим, поменяв цвета, чтобы показать как она будет выглядеть при наведении.

Такой вот простенький слайдер готов!

Урок7. Рисуем слайдер


И конечно, прикладываю исходник запакованный в архив весом 790 КБ
Скачать


Всего комментариев: 0
avatar


НЕКОТОРЫЕ ПУБЛИКАЦИИ БЛОГА