Подпишись на наши RSS Уроки по Фотошоп , просто щелкнув по иконке.


Новинка! Узнайте о Самом Результативном Способе Изучения Фотошопа, Без Посещения Дорогих Курсов, Без Черно-Белых Самоучителей и Без Метода Тыка!

10 Часов Практических Уроков Записанных с Экрана Монитора с Подробными Аудио-Комментариями сделают из Вас настоящего Учителя Фотошоп!

Подробнее..


Создаём новогоднюю поздравительную открытку
Создаём сложное выделение волос
Превращаем современную фотографию в старую
Создаём разноцветную светящуюся спираль
Наносим естественную татуировку в Фотошопе


Качественная галерея на jQuery в стиле поларойда


Несколько лет назад был популярен фотоаппарат "Полароид", который делал моментальные снимки. Эти снимки были уже как бы оформлены в белую картонную рамочку.


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


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


Нужно отметить, что этот эффект основан на сочетании двух мощных технологий: jQuery и CSS3 (CSS3 в этой галерее уже встроен в скрипт). К сожалению, CSS3 пока не является общепринятым стандартом, поэтому не все эффекты этой галереи будут работать в большинстве браузеров (а точнее не будет работать тень, т.к. именно она в данном случае основана на CSS3).


На сегодняшний день полноценную поддержку CSS3 имеют только браузеры Safary и Google Chrome. В них эта галерея будет смотреться особенно эффектно.


Еще одним замечанием будет то, что тестировать галерею на локальном компьютере необходимо при активном подключении к интернет, т.к. скрипт соединяется с сайтом google.


Пример галереи Вы можете посмотреть здесь.


Итак, начнем:


Шаг 1.


Скачаем картинки, используемые в галерее (или возьмем свои).


Шаг 2.


Скачаем и подключим необходимые для работы скрипты и файл таблицы стилей.


<link rel="stylesheet" type="text/css" href="stylepolar.css"/>
<script type="text/javascript" src="jsapi.js"></script>
<script type="text/javascript" src="script.js"></script>


Шаг 3.


В таблице стилей CSS изменим пути к фоновой картинке страницы и к фоновой картинке полароидной рамки. Если вы поместили картинки в корень, то ссылки будут выглядеть так:


body { overflow:hidden; background-image:url(bg.jpg); }
.polaroid { width:368px; height:376px; background-image:url(polaroid-bg.png); position:absolute; }


Шаг 4.


Вставим картинки следующим образом:


<div class="polaroid">
<img src="01_colosseum.png" alt="Colloseum" />
<p>Coloseum in Rome</p>
</div>
<div class="polaroid">
<img src="02_vatican.png" alt="Vatican" />
<p>Vatican</p>
</div>
<div class="polaroid">
<img src="03_forum_romanum.png" alt="Forum Romanum" />
<p>Forum Romanum</p>
</div>
<div class="polaroid">
<img src="04_fiat_500.png" alt="Fiat 500" />
<p>Fiat 500 - Typical Italian car</p>
</div>
<div class="polaroid">
<img src="05_me_gf.png" alt="Me and my girl in Florance" />
<p>My girl and me in Florance</p>
</div>
<div class="polaroid">
<img src="06_venetian_gondolas.png" alt="Venetian Gondolas" />
<p>Venetian Gondolas</p>
</div>
<div class="polaroid">
<img src="07_pizza.png" alt="Pizza" />
<p>Delicious pizza - <strong>the</strong> Italian food</p>
</div>
<div class="polaroid">
<img src="08_pool.png" alt="Swimming pool" />
<p>Swimming pool near our house</p>
</div>
<div class="polaroid">
<img src="09_florence.png" alt="Florence" />
<p>Bridge in Florence - Ponte Vecchio</p>
</div>
<div class="polaroid">
<img src="10_tower_of_pisa.png" alt="Tower of Pisa" />
<p>Leaning Tower of Pisa</p>
</div>


Галерея готова! Надеюсь, она привлечет внимание посетителей Вашего сайта, и они с интересом будут рассматривать Ваши картинки, перетаскивая их с места на место.


Данный урок подготовлен для Вас командой сайта http://ruseller.com




Если хотите не упустить данный урок, добавьте его в закладки:  

Хотите освоить весь Фотошоп с нуля?

Рекомендую Вам курс "Учитель Фотошопа в видеоформате", который состоит из 2-х частей: теоретической и практической. Все уроки даны в видеоформате с подробным озвучиванием всех выполняемых действий. Именно такой подход в изучении, позволит Вам в максимально короткие сроки овладеть всеми аспектами работы в Фотошоп.

Узнать подробнее

Рейтинг:     Добавлено: 2009-04-03    Просмотров: 1045    Сайт-источник: www.marcofolio.net

Оцените урок: 1   2   3   4   5   6   7   8   9   10    



Комментарии (1)


Комментарий by Ser, От 2010-02-15

очень интересно реализованная галерея!

Оставить комментарий:

Ваше имя:

Комментарий:

Введите число показаное на картинке (проверка от автороботов):

  


 

Рассылка - "Лучшие видеоуроки Фотошоп даром". Подписавшись на неё, Вы 2 раза в месяц будете получать на свой почтовый ящик, ссылки на лучшие уроки по работе в программе Adobe Photoshop совершенно бесплатно!

Лучшие уроки по Фотошопу 2 раза в месяц!

Ваше имя на русском: *
Ваш Email адрес: *

Подпишитесь сейчас и получите доступ к разделу "Лучшие уроки Фотошопа".


Если Вы давно мечтаете о создании собственного сайта на движке Drupal, то советую Вам обратить внимание на мой новый видеокурс "Drupal - Как создать профессиональный сайт с нуля". Это более 100 видеоуроков из которых Вы узнаете, как создать 4 сайта различной напрвленности, сложности и функционнальности.

Узнать подробнее


Для ретуширования обязательно создайте копию изображения, чтобы оригинал на всякий случай оставался нетронутым. В дополнение к этому создайте копию слоя Background (Задний план), чтобы не править его непосредственно. Так будет легче отме- нить нежелательные исправления.

Узнать больше


Внимание!
X
Хотите Получать 2 Видеоурока по Работе В Программе Фотошоп ЕЖЕМЕСЯЧНО?
Ваш e-mail: *
Ваше имя: *