Фотоэффекты, фоторамки и фильтры для фото. Практика: создаем фотогалерею на CSS

Долго выбирал тему для сегодняшнего топика. В итоге заметил, что мы еще не делали подборок с галереями изображений . По моему отличная тема, так как галереи присутствуют у множества сайтов. Откровенно говоря, все они не очень привлекательны. Учитывая нынешние тенденции развития jquery, html5 и т. д. я подумал, ведь должны быть уже намного привлекательней решения чем те, которые встречались мне раньше. Итак. Потратив день, удалось найти огромнейшее количество скриптов. Из всей этой горы я решил отобрать только , ведь я люблю , как вы уже заметили по предыдущим постам.
Галерея изображений применима не только в случае с фотоальбомами . Скрипт можно использовать, думаю, что это даже правильней будет, в качестве портфолио для фотографов, дизайнеров и т. д. Jquery эффекты помогут привлечь внимание посетителей и просто придадут изящности вашему сайту.
Итак. К вашему вниманию коллекция jquery плагинов галерей изображений для сайта .
Не забываем комментировать и помните, чтоб не потерять эту подборку, вы можете добавить ее в избранное, нажав на звездочку внизу статьи.

PHOTOBOX
Бесплатная, легкая, адаптивная галерея изображений , в которой все эффекты, переходы сделаны средствами css3. Идеальна для создания сайта-потрфолио фотографа.

S Gallery
Привлекательный Jquery плагин галереи изображений . Анимация работает с помощью css3.

DIAMONDS.JS
Оригинальный плагин для создания галереи изображений . Миниатюры имеют форму ромба , что в данный момент очень популярно. Такая форма сделана с помощью css3. Единственный минус этой галереи - это отсутствие лайтбокса, в котором бы открывалось фото в полный размер. То есть потребуется раками прикрутить плагин лайтбокса. Данный скрипт формирует адаптивную сетку изображений в форме ромба.

Superbox
Современная галерея изображений с использованием Jquery, css3 и html5 . Мы все привыкли, что при клике на превью полное изображение открывается в лайтбоксе (всплывающем окне). Разработчики данного плагина решили, что лайтбокс уже отжил свое. Изображения в этой галереи открываются ниже превью. Посмотрите демо и убедитесь, что такое решение выглядит на много современней.
|
Smooth Diagonal Fade Gallery
Современная галерея изображений в которой превью распределяются по всему пространству экрана . Скрипт умеет сканировать папку с фото на сервере, то есть не нужно вставлять каждое изображение по отдельности. Достаточно загрузить картинки в папку на сервере и в настройках указать путь к директории. Далее скрипт все сделает сам.

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

THUMBNAIL GRID WITH EXPANDING PREVIEW
Плагин представляет собой адаптивную сетку изображений . При клике ниже выводится фото побольше и описание. Хорошо подойдет для создание портфолио.

jGallery
jGallery - это полноэкранная, адаптивная галерея изображений . Легко настраиваются эффекты, переходы и даже стиль.

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

Mosaic Flow
Простая, адаптивная галерея изображений с сеткой в стиле Pinterest .

Galereya
Еще одна стильная галерея с сеткой в стиле Pinterest с фильтром по категориям. Работает в браузерах: Chrome, Safari, Firefox, Opera, IE7+, Android browser, Chrome mobile, Firefox mobile.

least.js
Отличная бесплатная галерея изображений с использованием JQUERY, 5 и CSS3. Она имеет очень привлекательный внешний вид и, несомненно, привлечет внимание ваших посетителей.

flipLightBox
Простенькая галерея изображений. При клике на превью, в лайтбоксе открывается полное изображение.

blueimp Gallery
Гибкая галерея. Способна выводить в модальном окне не только изображения, но и видео . Отлично работает на сенсорных устройствах. Легко кастомизируется и есть возможность расширения функционала с помощью дополнительных плагинов (См. следующий плагин).

Готовы поупражняться в использовании новых знаний о CSS? В этом практическом уроке вам предстоит узнать, как сделать адаптивную галерею в виде квадратных плиток, применяя полученные навыки. Ознакомьтесь с планом урока, после чего приступим к делу.

План практического урока

Итак, вам наверняка интересно, как будет выглядеть результат ваших трудов по завершению практики. Мы сразу продемонстрируем вам макет будущей фотогалереи:

Пошаговый план создания этой галереи следующий:

  1. Разработка адаптивной сетки.
  2. Оформление миниатюр.
  3. Стилизация подписей.
  4. Финальные штрихи.
  5. Дополнительно: подключение плагина для всплывающих окон.

Загрузка файлов

Скачайте архив с файлами и откройте в удобном для вас редакторе кода файлы gallery.html и style.css (из папки css). Как и в предыдущей практике, в теге мы заранее подключили файл сброса стилей (на этот раз Reset.css вместо Normalize ) и основную таблицу стилей (пока что пустую), а также шрифт Google Fonts. Дополнительно мы добавили еще одну таблицу стилей lightbox.min.css , а в конце документа - скрипт lightbox-plus-jquery.min.js . Зачем нужны эти два файла, мы скажем позже.

Создание фотогалереи

Изучите структуру HTML-страницы. В теле документа расположен блок-контейнер, в котором есть заголовок

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

Перед началом работы хотелось бы сразу упомянуть о нескольких моментах:

  • В создаваемой нами тестовой галерее все миниатюры фотографий были подготовлены заранее: они имеют одинаковую форму (квадрат) и одинаковые размеры (300×300 пикселей). При этом оригинальные фото могут иметь совершенно другие размеры и пропорции. Квадратные миниатюры одинакового размера позволяют создать элегантную ровную сетку, без необходимости подгонять оригинальную фотографию под форму квадрата, тем самым искажая ее вид. В реальной жизни созданием миниатюр чаще всего занимается специальный скрипт, поскольку фотографий на сайте может быть много и обрезать каждую вручную очень долго.
  • Как упоминалось ранее, каждая миниатюра служит ссылкой на полноразмерное фото. На данном этапе, если вы кликните по ней, фото откроется на новой странице. На современных сайтах такое уже встречается нечасто: скорее всего, вы замечали, что просмотр увеличенной фотографии реализовывается во всплывающем окне, и пользователь остается на той же странице, что весьма удобно. Поэтому, несмотря на то, что наш учебник не посвящен языку JavaScript, всё же в конце урока мы познакомим вас со специальным плагином, который поможет реализовать красивое открытие полноразмерного снимка. Обещаем, сложно не будет, и вам обязательно понравится!

А пока что просмотрите веб-страницу gallery.html в браузере. Вот эту разметку, пока что весьма невзрачную и скучную, нам сегодня и предстоит превратить в красивую фотогалерею. Поехали!

1. Разработка адаптивной сетки

Первое, с чего мы начнем, это создание сетки нашей галереи. Сетка является своего рода каркасом, определяющим расположение элементов на веб-странице. Ширина блока-контейнера будет иметь максимальную ширину 960 пикселей, а миниатюры будут выстраиваться в три столбца одинаковой ширины (помните, что мы опираемся на макет). Каждая сторона миниатюры будет иметь внутренний отступ в размере 10 пикселей.

Основываясь на словах выше, запишем первый стиль в файл style.css:

Container { width: 100%; /* ширина блока-контейнера */ max-width: 960px; /* максимальная ширина контейнера */ margin: 0 auto; /* этот стиль центрирует контейнер */ } .photo { float: left; /* говорим элементам выстраиваться один за другим */ width: 33.333333%; /* устанавливаем ширину элемента */ padding: 10px; /* добавляем отступы с каждой стороны */ box-sizing: border-box; /* меняем способ вычисления ширины */ }

Обновив страницу в браузере, вы увидите первые изменения. Миниатюры уже выстроились плиткой по три в ряд. Возможно, вы хотите узнать, почему мы указали такое странное и дробное число для ширины элемента? Всё весьма просто: нам нужно, чтобы в строке помещалось три миниатюры, которые занимали бы отведенное место по максимуму (все 100% ширины контейнера). Мы делим 100 на 3 и получаем число 33 и 3 в периоде. Округление числа до 33.333333 в нашей ситуации приводит к тому, что ширина миниатюры становится 319.98 пикселей. 319.98 × 3 = 959.94, что практически совпадает с шириной контейнера (к сожалению, совсем без погрешностей обойтись нельзя, когда речь идет о дробных числах в CSS).

Проверим адаптивность нашей сетки. Измените ширину окна браузера несколько раз и понаблюдайте за поведением элементов. При ширине менее 977 пикселей элементы начинают некорректно себя вести. Это происходит потому, что изображения миниатюр не подстраиваются под ширину контейнера. Добавьте следующий стиль для обеспечения адаптивности картинок:

Photo img { display: block; max-width: 100%; height: auto; }

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

2. Оформление миниатюр

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

Способ I: свойство border

Первый способ - создать рамку нужного цвета и ширины для каждого тега .
Добавьте этот код к селектору.photo img:

Border: 10px solid #eee; box-sizing: border-box;

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

Обновите страницу в браузере и запомните результат.

Способ II: свойства background-color и padding

Второй способ заключается в том, чтобы имитировать вид рамки посредством создания 10-пиксельных внутренних отступов и закрашивания фона в светло-серый цвет. Замените код из первого способа на следующий:

Padding: 10px; background-color: #eee; box-sizing: border-box;

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

Первый способ занимает на одну строку меньше (если, конечно, использовать сокращенную запись border). Второй способ чуть более громоздкий, но он позволяет играться с фоном, заменяя его, например, на фоновый рисунок либо градиент, добиваясь дополнительных интересных эффектов. Однако свойство border тоже позволяет устанавливать фоновые рисунки и градиенты, поэтому разница здесь невелика.

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

Стиль при наведении

Пора нам вспомнить о псевдоклассах и псевдоэлементах, которые мы изучали еще в первой части учебника. Сегодня нам понадобится псевдокласс:hover , чтобы определить стиль миниатюры, когда на нее наведен курсор, а также псевдоэлемент:after для добавления определенного контента после каждой миниатюры.

Для улучшения юзабилити (удобства использования) сайта принято добавлять дополнительные эффекты к активным элементам веб-страницы. Например, все мы привыкли к тому, что при наведении курсора на ссылку стандартная стрелка меняется на pointer - курсор в виде руки. Таким образом мы понимаем, что элемент кликабелен и клик по нему приведет к какому-то событию.

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

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

Запишем стиль для псевдокласса.photo a:hover:

Photo a:hover { opacity: 0.5; }

А также заставим тег вести себя как блок, иначе мы не увидим, как предыдущий код срабатывает на миниатюре:

Photo a { display: block; }

Теперь, когда вы сохраните таблицу стилей, обновите страницу в браузере и наведете курсор на любую из фотографий, то увидите, что она стала полупрозрачной. За это поведение отвечает свойство opacity , чье значение может варьироваться от 0 (полная прозрачность) до 1 (полная непрозрачность), включая дробные числа, устанавливающие полупрозрачность. Уберите курсор, и фото вернется к своему первоначальному виду (т. е. к значению по умолчанию, а именно opacity: 1).

Займемся добавлением иконки глаза. Для этого нам понадобится задействовать псевдоэлемент:after . Добавьте следующие стили в вашу таблицу, после чего мы объясним, зачем нужен каждый из них:

Photo a:after { content: ""; background: transparent url(../img/icons/eye-icon.png) no-repeat center; width: 52px; height: 35px; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; visibility: hidden; }

Помимо этого допишите свойство position: relative; к селектору.photo a .

Итак, разберемся с вышенаписанным кодом. Обычно псевдоэлемент:after добавляется к элементу для того, чтобы вывести нужный текст после его содержимого. Этот текст добавляется через свойство content . Веб-разработчики используют возможности:after для вывода дополнительных графических элементов. В этом случае значение свойства content остается пустым, а нужное изображение добавляется с помощью свойства background . Именно это мы и сделали по отношению к псевдоэлементу.photo a:after , добавив иконку глаза как фоновый рисунок.

Но после проделывания этих шагов вы еще не увидите никакого изображения. Чтобы оно показалось, мы добавляем ширину и высоту элемента, а также позиционируем его (позже эта тема будет рассматриваться более детально). Мы установили размеры, идентичные размерам самой иконки (52×35 пикселей) и задали свойство position: absolute .

Иконка уже видна, однако она расположена не по центру миниатюры. Чтобы иметь возможность позиционировать иконку относительно элемента.photo a , мы добавили этому элементу свойство position: relative . Повторимся, что со свойством position мы немного забегаем вперед, поэтому пока что вы можете просто скопировать этот код и наблюдать, что получается.

Следующим шагом будет центрирование иконки по вертикали и горизонтали. Элемент со стилем position: absolute и четко определенными размерами можно легко центрировать, указав для свойств top , bottom , left и right значение 0 , а для свойства margin - значение auto .

Последнее, что осталось разобрать - это свойство visibility: hidden . Оно отвечает за видимость/невидимость элемента. Его значение hidden можно сравнить с плащом-невидимкой - элемент становится невидимым, но при этом находится на странице и занимает место.

Зачем мы скрыли псевдоэлемент с иконкой? Чтобы делать его видимым только при наведении курсора на ссылку-миниатюру. И для этого мы снова обратимся к псевдоклассу:hover . Запишем следующий код:

Photo:hover > a:after { visibility: visible; }

Этот на первый взгляд странный селектор сообщает браузеру, что при наведении курсора на элемент.photo необходимо применить стиль к псевдоэлементу:after тега , являющегося дочерним именно для.photo . Сам стиль visibility: visible означает, что иконка глаза становится видимой.

Обновите страницу и посмотрите, как теперь реагируют элементы на наведение курсора. Так выглядит гораздо лучше, не правда ли? Нам осталось стилизовать подписи к фотографиям, добавить финальные штрихи и реализовать открытие фото во всплывающем окне.

3. Стилизация подписей

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

Photo figcaption { font-family: "Open Sans", sans-serif; color: #999999; text-align: center; margin-top: 20px; }

4. Финальные штрихи

Мы еще не стилизовали заголовок над галереей. Давайте сделаем это:

H1 { font-size: 36px; text-transform: uppercase; color: #cccccc; text-align: center; margin: 30px 0; }

Чтобы не дописывать свойство font-family к каждому элементу, будет лучше задать его для всего тега , после чего стереть эту строку из стиля для.photo figcaption - она там теперь лишняя:

Body { font-family: "Open Sans", sans-serif; }

А чтобы сам блок галереи не упирался в низ веб-страницы, добавим ему небольшой отступ снизу:

#gallery { margin-bottom: 50px; }

Обновим страницу и проверим результат. Но что это? Отступ снизу не появился. И если проверить высоту блока #gallery , мы увидим, что она равна нулю. Как такое может быть, если этот блок не пустой, а внутри него находятся миниатюры? Ответ следующий: свойство float исключает элемент из нормального потока. Поэтому, когда дочерним элементам задано обтекание float , родительский элемент сжимается по высоте, словно игнорируя присутствие float-элементов. Высота родителя становится равной нулю, либо, если внутри находятся дочерние элементы без обтекания, высота родителя приравнивается к высоте этих элементов. Отключить игнорирование float-элементов родителем можно с помощью следующего стиля:

#gallery:after { content: ""; display: block; height: 0; clear: both; }

Это один из нескольких CSS-«хаков», позволяющих решить проблему исчезнувшей высоты контейнера. Немного позже мы еще вернемся к обсуждению этой проблемы и изучим ее более подробно. А пока что сохраните изменения в таблице стилей и обновите веб-страницу. Добавленный нами нижний отступ в 60 пикселей теперь находится там, где и требовалось.

5. Подключение плагина для всплывающих окон

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

Плагин Lightbox, работающий на базе JavaScript-библиотеки jQuery, используется для наложения изображений поверх текущей страницы. Это удобный инструмент, который работает в любом современном браузере.

В начале урока мы уже сказали, что подключили необходимый скрипт и таблицу стилей к нашему HTML-документу. Вам останется лишь инициализировать его, добавив атрибут data-lightbox="roadtrip" к каждому тегу , который ссылается на изображение. Этот код говорит плагину, что ссылку нужно открыть во всплывающем окне, а также добавить возможность переключаться между фотографиями, используя боковые стрелки.

Итак, продублируйте атрибут для каждой из девяти ссылок нашей галереи:

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

При желании вы можете сделать так, чтобы плагин отображал в открытом окне и подпись к фотографии. Для этого добавьте к ссылке еще один атрибут - data-title="" , а внутрь его кавычек поместите текст подписи, скопировав из тега

:

Повторите эти действия для остальных ссылок и проверьте результат.

Заключение

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

Если по какой-то причине у вас что-то не получилось, вы всегда можете посмотреть и изучить готовый код, который включен в общий архив с файлами. Также вам доступно демо галереи:

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

Медиа-платформа Cincopa предлагает программу для создания фотогалереи, которая совместима, практически с любым сайтом или блогом. Создайте фотогалерею, используя пошаговый интерфейс (wizard) и вставляйте ее в любые веб-страницы, которые принимают HTML или опубликуйте ее в качестве RSS канала. Она также полностью совместима с несколькими CMS системами, такими как WordPress, Drupal, Joomla, TypePad, MediaWiki, Ning, Blogger, vBulletin, Weebly, WordPress MU и Buddy Press.

СОЗДАТЬ ФОТОГАЛЕРЕЮ ДЛЯ ВАШЕГО САЙТА ИЛИ БЛОГА ПРОСТО И БЕСПЛАТНО!

Приложение Cincopa для создания фотогалереи, является бесплатным и очень простым в использовании и установке. Зарегестрируйтесь на бесплатном аккаунте и используйте наше интернет-веб-приложение для создания роскошных и динамических фотогалерей в течение нескольких минут, в три простых шага:

Как это работает

1 Выбери один из наших удивительных скинов

2 Загрузи свои файлы на,облако” Cincopa

3 Получи простой код и вставь на своем сайте

ВЫБЕРИ СКИНЫ ДЛЯ СВОЕЙ ФОТОГАЛЕРЕИ

Более 40 скинов на выбор, включая Flash, Cooliris 3D, Lightbox, jQuery и многие другие. Настрой параметры и просмотри фотогалереи в другом окне.

Загрузи свои фотографии

Автоматическое изменение размеров фотографий. Загрузи несколько фотографий сразу на «облачный» диск и распредели их в папки используя grag-and-drop. Открой их позже с любого устройства.

СОЗДАЙ ПРОСТОЙ КОД ФОТОГАЛЕРЕИ ДЛЯ РАЗМЕЩЕНИЯ НА ВЕБ-САЙТЕ

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

Cincopa это самая
полная платформа мультимедии

НАЧАТЬ СЕЙЧАС »

ВЗГЛЯНИ НА НАШИ УДИВИТЕЛЬНЫЕ СКИНЫ ДЛЯ ФОТОГАЛЕРЕЙ

Проверьте эти удивительные демо фотогалерей:

  1. Адаптивная фотогалерея HTML5

    Новый адаптивный дизайн фотогалереи совместим с любой HTML веб-страницой,со всеми популярными CMS системами и сотнями социальных сетей.

  2. Флеш (FLASH) ФОТОГАЛЕРЕЯ

    Создай флеш фотогалерею и добавь фоновую музыку. Посмотри на Iphone или другом мобильном устройстве. Cincopa автоматически преобразует вашу фото галерею в наиболее подходящий формат для любого устройства, такой как.mp4 и 3gpp.

  3. 3D COOLIRIS ФОТО ГАЛЕРЕЯ

    Удиви свою аудиторию Cooliris 3D Wall фотографиями. Cincopa добавит ссылку на ваших фотографиях, что позволит вашим посетителям просматривать их в потрясающем Cooliris 3D просмотре.

  4. Карусель (CAROUSEL) ФОТОГАЛЕРЕЯ

    Авто-продвижение, клик или hover-эффект чтобы просмотреть свои фотоснимки. Это галерея на основе JQuery с Лайтбокс зумом в функциональности и плавающей панелью управления.

  5. ТАМБНЕЙЛ (THUMBNAIL) ФОТОГАЛЕРЕЯ

    Отобрази список эскизов, чтобы продемонстрировать свои фотографии. Контролируй размер своих тамбнейлов для автоматического предварительного просмотра. Увеличь, авто-скролл, вид в любом порядке или вид на весь экран.

  6. Переходные ФОТОГАЛЕРЕИ

    Разнообразие переходов доступных для вашей фотогалереи добавит уникальность вашей презентации. Установите время перехода между фотографиями на 1/1000-ой секунды. Выбери из автопрокрутки, поворот изображений, выцветание в/ из, петля и т.д.

  7. Лайтбокс (LIGHTBOX) ФОТОГАЛЕРЕЯ

    Лайтбокс является одним из самых популярных способов, для демонстраций своих фотографий и приложений в Интернете. Легкий и элегантный - эти два слова часто используются для описания фотогалереи Lightbox.

  8. ФОТОГАЛЕРЕЯ С МУЗЫКОЙ

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

ВЫДЕЛЕННЫЕ СЕРВЕРА CINCOPA БЫСТРО,НАДЕЖНО И БЕЗОПАСНО ХРАНЯТ И ОБЕСПЕЧИВАЮТ БЕСПЕРЕБОЙНЫЙ ДОСТУП К ВАШИМ ФОТОГРАФИЯМ В ИНТЕРНЕТЕ

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

  1. 44 скина на выбор
  2. Полнoе резервнoе копирование,чтобы сохранить ваши фотографии в безопасности
  3. Облачные вычисления - надежный доступ к файлам с любого компьютера или другого устройства
  4. Показатели использования хранения и использования трафика
  5. Автоматическое изменение размера фотографий
  6. Полная масштабируемость - от персональных блогов и малого бизнеса, до крупных предприятий
  7. Полная поддержка для IPhone, IPad, Blackberry и других КПК и смартфон технологий
  8. 100% бесплатный аккаунт дает 400 Мб онлайн хранения и 200 Мб использования трафика в месяц, гораздо больше, чем нужно для большинства фотогалерей
  9. Покупка пакета увеличения дискового пространства и трафика, в любое время, без риска
  10. Бесплатные ознакомительные версии профессиональных пакетов!

Ребята, мы вкладываем душу в сайт. Cпасибо за то,
что открываете эту красоту. Спасибо за вдохновение и мурашки.
Присоединяйтесь к нам в Facebook и ВКонтакте

Главная заповедь смартфонографии: неважно, насколько крут фотоаппарат, - важно, у кого он в руках. И на самую шикарную зеркалку можно сделать четкие, но скучные фотографии. Такие, что лежат на диске и никто их годами не открывает.

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

сайт собрал для вас несколько советов, как делать крутые фотографии, снимая на смартфон.

Программы

Фотоаппарат в смартфоне - это прежде всего программа, обслуживающая линзу и матрицу. Поэтому не стоит останавливаться на том, что диктует вам Android или iOS. Возможно, вы захотите пользоваться разными программами для разных случаев съемки. Одни дают более интересную цветопередачу, другие - чуть более крупные планы: Pudding Camera, CameraMX, Photosynth, VSCO Cam, Slow shutter cam, Pro HDR, Camera+ и т. д. Зачем себя ограничивать, если есть выбор?

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

Зум

Кадрирование как замена зума.

О том, что в смартфоне есть цифровой зум, лучше забыть раз и навсегда. Такое увеличение в большинстве случаев достигается серьезными потерями в качестве изображения. Лучший зум - это ноги: подойти ближе, отойти дальше.

Если это невозможно, то разумнее в процессе постобработки вырезать из большой фотографии нужный вам кадр. Функция кадрирования есть даже в самых простых программах. Плюс вы не теряете времени на подгонку размера, а просто снимаете. А уже в спокойной обстановке вы грамотно выстраиваете кадр, не пропуская детали, которые вы могли случайно обрезать, орудуя зумом в полевых условиях.

Серии

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

Если не получается интересно, стоит поменять угол съемки.

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

Свет

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

В то же время свет - это главный инструмент фотографа. Это важно и для профессиональных камер, но для смартфонов - это важнее в разы. Поэтому всегда ищите свет, присматривайтесь, как он ложится на объект, и будет вам кадр.

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

Предметная съемка

Слева снимок при недостатке освещения, справа - с фонариком.

Если хочется сфотографировать что-то или кого-то дома, смартфон может заупрямиться - в помещении редко бывает достаточно света. Зато можно взять простой светодиодный фонарик и лист белой бумаги, чтобы компенсировать слишком резкую тень. Скажем, сверху справа светит фонарик, слева подносим лист белой бумаги, который отражает свет фонарика и дополнительно подсвечивает объект, и нажимаем кнопку на телефоне.

Чистота объектива

Кадр сквозь отпечаток пальца.

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

Задержка срабатывания

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

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

Программы постобработки

Простейшее редактирование в Instagram.

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

  • VSCO Cam . Позволяет применять самые разные фильтры и настройки. Распространяется бесплатно.
  • Afterlight . Хороша для цветокоррекции. Стоит 34 рубля.
  • Touch retouch . Этот простой инструмент позволяет убирать мелкие недостатки на снимке и клонировать части изображения. Есть бесплатная и платная версии.
  • SnapSeed . Огромное количество фильтров и эффектов, таких как tilt-shift и корректировка фокуса, настройка резкости и цветопередачи. Распространяется бесплатно.
  • Pixlr Express . Большой выбор фильтров, рамок, эффектов. Полностью бесплатная.
  • Photoshop Express . Никаких особых настроек не дает, но зато очень много разных фильтров, которые делают процесс обработки максимально быстрым. Может работать с файлами RAW. Условно бесплатна.
  • Rookie . Есть как бесплатный, так и платный набор функций. В стандартном пакете приложения множество винтажных фильтров, адаптированных под разные жанры фотографии: портреты, пейзажи, городские зарисовки, макро и т. п.
  • Phonto . Позволяет добавлять на фотографию любые шрифты по желанию. Распространяется бесплатно.
  • Moldiv . Бесплатное приложение на русском языке, которое позволяет делать коллажи, объединяя до 9 снимков.
  • MultiExpo (для iOS). Интересное приложение для создания эффекта мультиэкспозиции. Распространяется бесплатно.
  • Photo Grid . Бесплатное приложение для создания коллажей. Может работать с файлами в высоком разрешении.
  • LensLight . Приложение позволяет добавлять эффекты бликов, свечений и боке на фотографии. Стоит 99 рублей.

Прикалывайтесь, улыбайтесь и творите вместе с нашими фотоэффектами!

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

Как это работает? Вы выбираете эффект и нажимаете на него. Затем загружаете свое фото (или несколько фотографий) и готово! Загрузить фотографии можно с компьютера или с телефона, из Facebook, или добавить по ссылке. Также вы можете применять эффекты к картинкам-примерам с сайта и к ранее загруженным фотографиям. Все фотоэффекты работают в автоматическом режиме, а результаты сравнимы с обработкой в фотошопе! Если вам нужна более тонкая настройка итогового изображения, можете воспользоваться нашим онлайн фоторедактором : добавить стикеры и текст, произвести цветокоррекцию. Сохранить обработанное фото можно на десктопный компьютер или мобильное устройство, а также опубликовать фото в соцсетях: Вконтакте, Facebook, Twitter и Google+.

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

  • Безграничное веселье с портретными снимками!

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

  • Не можете выбрать одно фото? Коллажируйте!

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

  • Сменить задний план на фото - это просто

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

  • Арт-эффекты: превращайте фотографии в произведения искусства

    Выберите технику рисования или живописи, которая вам по душе, и мгновенно “нарисуйте” свое фото: простой карандаш и уголь, пастель и цветные мелки, рисунок шариковой ручкой, акварель, сангина и масло… Добро пожаловать в нашу галерею