Меню

Как сделать ленту фотографий на сайте



Форум

Справочник

Эффект фото ленты 2 (html версия)

Здравствуйте Уважаемые читатели!
Вот и настал тот долгожданный момент выхода второй версии фото ленты. Скрипт писался около месяца, т.к. хотелось написать максимум, оптимизированный код и удобный для понимания и применения. Его можно скачать с нашего сайта http://fuzaylov.net/hr/HR_PhotoLine.rar
Приступим!
Первое, что хочется выделить, это разница между этой версией и предыдущей, то это реальное существование ленты состоящей и фотографий и которые реально прокручиваются, а не эмуляция эффекта прокрутки, как было в предыдущей версии. Первая задача, что стояла передо мной, это выстроить такую ленту на div-ах через html. Сначала мне казалось, что тут нужно манипулировать слоями, т.е. имеется два слоя один на другом. Верхний слой имеет прозрачную область по середине и не прозрачную по краями. А нижний слой это div c выстроенными рисунками и мне казалось, что просто надо будет каким-нибудь образом смещать горизонтальное положение нижнего div-а и таким образом добиться эффекта прокрутки. Долгое время я экспериментировал со слоями, но нечего так и не добился и понял, что это не так! Потом в голову пришла другая идея, что тут достаточно одного лишь слоя, а рисунки надо смещать с помщью margin-а. Но сразу нечего не получилось, т.к. я забыл о свойстве стиля overflow со значением hidden, который скрывает все дочерние элементы, оказавшиеся за пределами родительского элемента (далее на примере все будет понятно). Применив его, я получил первый положительный результат. Далее, перебирая разные варианты, я добился желаемого эффекта. Ниже приверед html код, того, что я получил в результате.

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

Все это работает следующим образом. Начнем с главного, родительского div-а. Поначалу я думал, что ширину div-а можно выставить как сумму ширины отображаемых в ленте рисунков. В нашем случае два рисунка по 250 пикселей. Но этого оказалось не достаточно, т.к. если имеется padding у рисунков и border у div-а, то их тоже следует учитывать, а в противном случае рисунки будут падать вниз. Поэтому я выставил ширину равной 522 пикселя, это 250+250+5+5+5+5+2=522. Далее рассмотрим два рисунка, которые имеют свойство margin-right равным -260px. Почему же именно -260? Свойство margin создает расстояние между внешней границей самого элемента с внутренней границей его родительского элемента. Если последний рисунок внутри div-а имеет свойство margin-right равным 10px, то расстояние между правой границей рисунка и правой границей div-а будет равным 10 пикселям. Если margin-right равно нулю, то рисунок плотно прилегает к правой границе div-а. А если установить минусовое значение, то рисунок уже уйдет за правую границу дива, а overflow обеспечит его невидимость. Значение нужно установить -260, т.к. нужно учитывать padding тоже, т.е. -250-5-5=-260. Вроде создать мы создали нашу неподвижную ленту, а теперь нужно обеспечить ее прокручивание. Этот момент реализовать уже не сложно. Представим, что пользователь кликнул по стрелке в левую сторону, у нас первый рисунок должен уйти за левую границу div-а, а третий рисунок должен выползти из правой границы. Значит нам следует просто установить margin-left первого рисунка -260px и он уйдет за левую границу дива, а установив margin-right равным 0px у третьего рисунка мы его вставляем на место и таким образом мы получаем эффект прокрутки. А если пользователь кликнул еще раз по левой стрелке, то уже второй рисунок получает margin-left равным -260px, а у четвертого рисунка margin-right приравнивается равным ноль пикселей. И напоследок рассмотрим клик по правой стрелке. Если перед кликом по правой стрелке был совершен клик по левой, то просто следует все вернуть назад. Первый рисунок получает margin-left равным 0px, а третий рисунок обратно получает margin-right равным -260px. Теперь разобравшись в html, нам полностью предстоит реализовать все это на javascript. Этому посвящен следующий пост.

Источник

LiveInternetLiveInternet

Фотоальбом

Метки

Рубрики

  • ВИДЕО (4)
  • ВСЕ ДЛЯ КОМПЬЮТЕРА (4)
  • ИНТЕРЕСНЫЕ И ПОЛЕЗНЫЕ ССЫЛКИ (3)
  • ИНТЕРНЕТ (2)
  • ЖИЗНЬ ПОСЛЕ СМЕРТИ (3)
  • СНОВИДЕНИЯ (2)
  • ЭЗОТЕРИКА (1)
  • КНИГИ (1)
  • СТИХИ (1)
  • КОМПЬЮТЕРНАЯ ГРАФИКА (24)
  • АНИМАЦИЯ (7)
  • НОВОЕ В ТВОРЧЕСТВЕ (3)
  • ТЕХНОС ИДЕТ (5)
  • ФОТОГРАФЫ (4)
  • ХУДОЖНИКИ (5)
  • МУЗЫКА (0)
  • ПЛАНЕТА ЗЕМЛЯ (32)
  • МИР ДЕНЕГ (6)
  • МИР ДИКИХ (7)
  • НАУКА И ИЗОБРЕТЕНИЯ (3)
  • НЕОБЫЧНО (8)
  • НОВОСТИ (4)
  • ПУТЕШЕСТВИЯ (1)
  • УРОКИ (48)
  • PhotoshopCS 5 (3)

Приложения

  • Я — фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • ТоррНАДО — торрент-трекер для блоговТоррНАДО — торрент-трекер для блогов
  • Сохранение видео с любого сервисаСохрани видео с любого видео хостинга!
  • Скачать музыку с контактаКачать музыку с контакта ЛЕГКО:)
  • Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее

Новости

Цитатник

Любопытная информация Хостинг и интернет-сервисы Бесплатный хостин.

Читайте также:  Лента новостей сделать стартовой

Удивительно-потрясающие фотографии Грегори Колберта Слон с поднятым хоботом – это письмо к з.

Как и чем редактировать видео? В своё время Игорь не поленился, сел и написал замечательный пост.

Художник-иллюстратор Ratinan Thaicharoen Художник-иллюстратор Ratinan Thaicharoen ака «ISE», 25 л.

Урок «Создание снега» АВТОР ИСКАТЕЛЬНИЦА Серия сообщений «уроки по фотошопу»: Ча.

Ссылки

Я — фотограф

природа. макро, цветы и насекомые

Друзья

Статистика

Создание фотоленты

Этот урок расскажет о том, как создать красивую фото ленточку с изображениями, такую как можно увидеть на изображениях ниже:


Для создания эффекта свертывания будет использоваться инструмент Warp (Деформация), поэтому для выполнения задания нам потребуется Photoshop версии CS2 и выше. После выполнения этого урока вы сможете создать фотоленту со своими собственными фотографиями или рисунками.

Урок рассчитан на пользователей со средним знанием Photoshop и навыками работы с векторным инструментом Pen (Перо).
Здесь можно скачать файл изображения в psd формате, что даст возможность более подробно ознакомиться с деталями работы.

Шаг 1. Создание ленточки (векторные линии).

Сначала создайте ленту с помощью инструмента Pen (Перо). Ее можно создавать в Photoshop или Illustrator. Мы будем использовать этот контур как направляющую линию и для создания маски.

Шаг 2. Склеивание фотографий

Выберите 3 фотографии или изображения на ваше усмотрение и склейте их вместе

Шаг 3. Деформация (инструмент Warp)

Сделайте прозрачность слоя с лентой равной 40 или 50%, для того что б вы могли увидеть линии сетки над контуром. Применяем инструмент Warp (Деформация) Edit > Transform > Warp (Редактирование > Трансформирование > Деформация). Вы должны увидеть сетку с 4 узловыми точками по углам. Что б согнуть ваше изображение из фотографий просто потяните за узловые точки, точки направления или линии сетки.

_________________
Рисунок — основа мастерства художника

Добавлено: Пн 15 Мар, 2010 10:43 pm | Откуда: Ужгород (Украина)

Iron_ Mouse
Хранитель

Сообщения: 288 Hаграды: 1

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

Шаг 4. Создание маски

Соедините слои в группы (по номерам сегментов линии 1, 2, 3, 4)

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

_________________
Рисунок — основа мастерства художника

Добавлено: Пн 15 Мар, 2010 10:50 pm | Откуда: Ужгород (Украина)

Iron_ Mouse
Хранитель

Сообщения: 288 Hаграды: 1

Шаг 5. Тени

В масочной группе 1 создайте новый слой над лентой. Используйте инструмент Gradient (Градиент) и протяните мышью сверху вниз, что б создать черный градиент.

Повторите этот шаг для других участков ленты.

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

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

Шаг 7. Контур ленты

Что б создать контур ленточки, загрузите выделение маски, создайте новый слой, заполните черным цветом, сдвиньте выделение влево на 1-2 пикселя, удалите выделенную область

Шаг 8. Завершающие штрихи

Что б сделать изображение более интересным обесцветьте кончик ленты I mage > Adjustments > Desaturate. (Изображение > Коррекция > Обесцветить)

_________________
Рисунок — основа мастерства художника

Источник

Как сделать ленту фотографий на сайте

Topic Starter
—>

Участник

Группа: User
Сообщений: 237
Регистрация: 23.9.2011
Поблагодарили: 17 раз
Репутация: 1

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

Заранее спасибо за любые идеи. И есть надежда на то,что есть какие-то решения)

Добавляю. Что-то похожее на ленту новостей в виде фотографий)

Источник

11 способов создать бесконечную ленту в Инстаграм

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

Читайте полную версию статьи с примерами редактируемых шаблонов на сайте .

Что такое бесконечная лента в Инстаграм

Бесконечная лента Инстаграм (вечная лента или мозаика) — довольно сложное, но тем более интересное решение для оформления аккаунта. Отдельные посты в ней визуально соединяются друг с другом. При создании бесконечной ленты, как правило, идут «от обратного». Сначала создают лист-шаблон, затем на нем размещают фото и надписи, а после — «разрезают» на отдельные квадратные картинки для постов.

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

Какие задачи решает бесконечная лента в Инстаграм

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

Создать эффектную страницу для продвижения краткосрочного проекта

Российский бренд Epica ведет свою основную страницу в Инстаграм в традиционном виде. Но для продвижения совместной с Иваном Дорном Youtube-кампании «The Most Epic Day» была создана отдельная страница в Инстаграм. Для каждой серии видеороликов было заготовлено 9 постов, которые совмещались в одну общую обложку.

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

«Сломать» привычный вид ленты

Если традиционные квадратные фото кажутся вам скучными, вы можете полностью сломать представление о том, как должна выглядеть лента в Инстаграм. Экспериментируйте с формами, шрифтами, соединяйте фото так, как вам нравится.

Выделить тематические посты и рубрики

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

Пользуйтесь этим приемом, если хотите привлечь больше внимания к тематическим постам. Но учтите важный момент, если планируете продвигать посты через рекламный кабинет Фейсбука: текст на изображении не должен занимать более 30 % от общей площади макета. Проверить, будет ли ваш пост продвигаться корректно, можно с помощью специального сервиса Facebook Text Overlay . Если доля текста окажется слишком высока, реклама может не охватить всю желаемую аудиторию. При необходимости уменьшите размеры надписей и запустите повторную проверку.

Скрыть «непрезентабельный» контент

Если вы хотите делиться в ленте видеозаписями, скриншотами с отзывами подписчиков или заметками, это может выглядеть не очень эстетично. Бесконечная лента — отличный вариант, чтобы скрыть «непрезентабельный» контент в Инстаграм. Публикуйте посты-карусели с несколькими фото, где на первом месте будет стоять красивый фрагмент вашей бесконечной ленты.

Держать интригу и подогревать интерес подписчиков

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

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

Как создать шаблон бесконечной ленты в Инстаграм

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

Шаг 1. Выбираем размер сетки

Оптимальный размер для получения четкого изображения одного поста в Инстаграм — 1080 на 1080 пикселей. При составлении бесконечной ленты на определенное количество постов мы должны задать размер, который будет соответствовать трем постам по горизонтали и N постам по вертикали. Перечислим некоторые варианты размеров, начиная от простой комбинации из трех постов, выстроенных в одну линию:

  • 3*1 – 3240 на 1080 пикселей
  • 3*3 – 3240 на 3240 пикселей
  • 3*6 – 3240 на 6480 пикселей
  • 3*9 – 3240 на 9720 пикселей

Чтобы задать нужный размер, на главной странице Canva нажимаем на кнопку «Создать дизайн». В меню «Настраиваемые размеры» задаем нужные размеры полотна. В этом примере мы будем создавать длинную ленту 3*6 в виде сетки из фотографий для блога стилиста. Поскольку работа предстоит довольно масштабная, удобнее пользоваться web-версией. Однако аналогичные функции вы можете найти и в мобильной версии Canva.

Шаг 2. Выстраиваем сетку

Переходим во вкладку «Элементы» и выбираем самый первый вариант из группы «Сетки» — он будет наиболее удобен для дальнейшей работы. Уменьшаем прямоугольную область, которая заполнила весь лист, до размеров, близких к размеру одного поста. Полученный квадрат копируем до тех пор, пока не заполним лист полностью. На этом этапе лучше придерживаться одного размера для всех элементов и размещать их симметрично относительно друг друга. Выстроить ровную сетку будет легко, так как приложение само будет «подсказывать» наиболее подходящее расположение элемента. Когда вся лента будет заполнена, произвольно изменим размеры и наклоны нескольких элементов. Это позволит более удачно размещать горизонтальные и вертикальные кадры. Удалим некоторые элементы чтобы оставить место под будущие надписи.

Шаг 3. Добавляем фото

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

Шаг 4. Добавляем декоративные элементы и надписи

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

Наш шаблон бесконечной ленты Инстаграм готов. Скачиваем его на компьютер или смартфон и «разрезаем» на нужное количество квадратов. Это можно сделать с помощью специальных web или мобильных сервисов:

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

Что следует учесть при создании бесконечной ленты в Инстаграм

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

Проверяйте визуал

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

Составьте контент-план

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

  • 1 октября — крем с улиткой, сиреневый фон;
  • 2 октября — пилинг салфетки, розовый фон:
  • 3 октября — крем для век, желтый фон и т. д.

Соблюдайте очередность и график публикаций

Обратите внимание, что при каждой публикации нового поста их общий порядок меняется, и композиция может «разбиваться» на несовместимые части. Если у вас получился сложный шаблон бесконечной ленты для Инстаграм с большим количеством элементов, имеет смысл публиковать посты не по одному, а блоками. Для удобства планирования можно пользоваться специальными сервисами отложенного постинга, например, SMMplanner .

Верхний и нижний ряд шаблона — самые важные

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

Оформляйте посты и сторис в едином стиле

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

Другие способы оформления ленты в Инстаграм

Дадим несколько советов, как вести Инстаграм, если идея работы с шаблонами бесконечной ленты кажется вам сложной.

Создайте страницу в стиле «колорблокинг»

Главные принципы создания яркой страницы стиле «колорблокинг» — это игра на контрасте и ритмичное сочетание макетов или фото. Это могут быть:

  • несколько полос постов в одном цвете с переходом в другой, как у Canva;
  • чередование цветов в шахматном порядке, как Global Marketing Pro;
  • чередование четырех контрастных цветов в точном порядке, благодаря чему посты визуально выстраиваются косыми линиями, как у TEDxNovosibirsk.

Оставляйте больше «воздуха» между фото

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

Используйте шаблоны для постов с заголовками

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

Ищите вдохновение и создавайте красивые аккаунты вместе с Canva .

Источник

АртЗацепка © 2021
Внимание! Информация, опубликованная на сайте, носит исключительно ознакомительный характер и не является рекомендацией к применению.