Как сделать качественные фото товара самостоятельно > Q-SEO

• Используйте штатив
• Добавьте «правильное» освещение
• Заполните или отразите свет, чтобы смягчить тени
• Выберете правильный фон
• Придерживайтесь единого стиля
• Делайте фотографии с нескольких ракурсов
• Продемонстрируйте товар в действии
• Используйте окружение

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

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

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

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

Используйте штатив

Фотографируете вы на камеру или на смартфон — неважно, главное пользоваться штативом.

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

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

Эконом-вариант

Штатив — это гарантия, что камера охватит одни и те же масштабы, товары будут находится на одинаковом расстоянии от объектива.

Добавьте «правильное» освещение

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

Плохой и правильный свет 

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

Дневной свет еще называют «мягкий свет», потому что солнце излучает более мягкий диапазон света, чем лампа, светящая прямо на изделие. Выгоднее всего при дневном свете смотрятся:

• Товары, которые будут использоваться на улице.
• Товары, которые будет носить человек (люди обычно выглядят лучше при естественном освещении).

Опытом решила поделиться Валентина Барда, владелица интернет-сайта «Алиби Джевелс»:

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

Иногда не обойтись без искусственного света.

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

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

Заполните или отразите свет, чтобы смягчить тени

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

Вот два способа, как это сделать:

1) Включите другой, менее интенсивный источник света, чтобы дополнить основной свет. Этот дополнительный свет называется заполняющим светом и используется в качестве противовеса для смягчения естественной тени, которая отбрасывается от источника света. Расположите заполняющий свет напротив основного, чтобы товар находился между ними.

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

Ваша цель — смягчить тень и подчеркнуть ценные для пользователя качества товара:

Выберете правильный фон

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

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

Самый простой вариант фона — это ватман или ткань, которую закрепили следующим образом:

На фото не будет видно лишних границ или изгибов:

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

Например, вот фото ручки с логотипом Q-SEO, сделанное с помощью выборочного фокуса:

Придерживайтесь единого стиля

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

Делайте фотографии с нескольких ракурсов

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

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

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

Продемонстрируйте товар в действии

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

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

Используйте окружение… или котиков

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

Валентина Барда рассказывает:

«Была суббота. Я работала дома за ноутбуком, окружив себя подвесами и кольцами и редактируя фото для сайта. Внезапно мой котик вскочил ко мне и лег на ноги. Недолго думая, я разместила возле него пару аксессуаров и зафоткала! Получились весьма эффектные кадры, которые я впоследствии отправила в Инстаграм.»

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

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

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

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

Комментарии

Комментарии

Фото для сайта — как подготовить изображение в Фотошопе и вставить картинку на сайт

Обновлено 30 сентября 2021 Просмотров: 73 153 Автор: Дмитрий Петров

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодняшняя статья будет посвящена подготовке в программе Фотошоп (можно и в его онлайн версии Pixlr, описанной здесь) графических файлов для их публикации на сайте. У меня чаще всего используются скрины сделанные на компе или телефоне, а затем прошедшие обработку (в основном в Снагите).

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

Сам я в Photoshop и даже в его упрощенной онлайн версии не силен (довольствуюсь возможностями простенького просмотрщика FastStone Image Viewer, про который речь шла тут и встроенного в него редактора), поэтому мне пришлось обратиться к любимой супруге с просьбой описать процесс подготовки моих фоток со всеми нюансами и тонкостями.

Создание изображения для сайта в Photoshop

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

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

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

1. Быть уникальными, а не взятыми с других ресурсов
2. Не слишком маленького размера и формата JPEG, GIF, PNG или BMP.
3. У них обязательно должны быть прописаны атрибуты Alt (и, при желании, Title), как написано в этой статье. Иначе поисковые системы просто не включат их в свой индекс поиска по картинкам.
4. В атрибуте Alt должны быть прописаны ключевые слова, по которым вы хотите продвинуть данную фотку.
5. Желательно, чтобы в названиях графических файлов тоже присутствовали ключевые слова (в виде транслита, по правилам описанных в этой статье о транслитерации)
6. Необязательным, но желательным условием является то, чтобы в каждом теге IMG ваших изображений были бы прописаны атрибуты WIDTH и HEIGHT. Они служат для задания ширины и высоты изображения и при определенном стечении обстоятельств могут способствовать ускорению загрузки вебстраницы.
7. Фото должны быть размещены на вашем сайте легально, иначе могут неожиданно возникнуть проблемы с правообладателями. Покупать графику я не агитирую, но можно найти вполне компромиссное решение — бесплатные фотобанки и микростоки, где размещены многие тысячи профессиональных фотоматериалов.

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

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

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

Для создания нового файла в Photoshop заходим в МЕНЮ и выбираем команду СОЗДАТЬ (в более новой версии Фотошопа: МЕНЮ — НОВЫЙ). У нас открывается вот такое диалоговое окно:

В нем мы задаем имя для будущей картинки; выбираем ее размер (ширину и высоту), нажав вкладку НАБОР; а также задаем единицу измерения (пиксели, сантиметры, дюймы…).

Далее задаем ФОН. По умолчанию всегда будет стоять БЕЛЫЙ. Если мы выберем ФОНОВЫЙ ЦВЕТ, то будущее изображение окрасится в тот цвет, который в данный момент находится основным в палитре цветов. Выбрав ПРОЗРАЧНЫЙ фон — поле окрасится шахматкой.

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

Слева в интерфейсе Фотошопа находится полоска с инструментами, которая называется ПАЛИТРА ИНСТРУМЕНТОВ. Как раз на ней, в самом низу, и живет описанная выше ПАЛИТРА ЦВЕТОВ.

Для того, чтобы открыть нужное нам фото, мы заходим в МЕНЮ и выбираем команду ОТКРЫТЬ. Далее ищем на своем компьютере папку с нужной фоткой и щелкаем по ней.

Теперь у нас открыто два изображения: созданное нами новое и то, которое мы хотим добавить на новое.

Добавляем слои и переносим их на наше изображение

Самый простой способ перенести одну картинку на другую — это обыкновенное перетаскивание его с помощью мыши. Сначала выбираем инструмент ПЕРЕМЕЩЕНИЕ, а затем хватаем вновь добавленное изображение левой кнопкой мыши и перетаскиваем на то, что создали (пустую заготовку нужного размера с прозрачным фоном), после чего отпускаем.

В моем случае видна лишь новая картинка на прозрачном фоне (показан шахматкой), а созданный документ (заготовка), под названием «Без имени-1», скрыт.

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

Там наш телефончик можно передвигать с помощью мышки в ту область шаблончика, которая нам нужна. Так же передвигать можно с помощью стрелочек на клавиатуре, при условии, что в палитре инструментов выбран инструмент ПЕРЕМЕЩЕНИЕ.

В окне НАВИГАТОР программы Фотошоп мы можем просмотреть наше результирующее изображение. Двигая ползунок — изменить масштаб просмотра, т.о. просмотреть документ как бы через лупу, дабы увидеть возможные недочеты. Изменить же реально масштаб можно, зайдя в МЕНЮ — ИЗОБРАЖЕНИЕ — РАЗМЕР.

В палитре СЛОИ отображается всё, что мы перенесли на наш слой. К примеру, в моем случае, в палитре СЛОИ находятся всего два: созданный шаблон изображения для сайта на белом фоне и одна перенесенная на него картинка (телефончик).

Ее на нашем документе можно не только перенести в любую область, но и наклонить/перевернуть. Для этого в МЕНЮ выбираем РЕДАКТИРОВАНИЕ — СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ.

Но перед этим, если у вас перенесено уже несколько картинок на нашу заготовку, нужно выбрать нужный слой в палитре СЛОИ, и только потом применять СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ. В противном случае, трансформирование применится к слою, который будет активным в данный момент, а не к тому, который вам необходимо наклонить/перевернуть.

Выбрав команду СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ, наше изображение выделится тоненькой рамочкой.

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

Добавление текста или логотипа на изображение в Photoshop

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

Для этого в панели инструментов Фотошопа выбираем ТЕКСТ. Ставим курсор на нужное место в заготовке (созданном документе) и начинаем вбивать нужный нам текст, к примеру, адрес вашего сайта.

В настройках инструмента ТЕКСТ (смотрим рисунок выше) можем задать следующие настройки, выделив мышкой то, что мы написали в документе:

1. изменить ориентацию текста, т.е. сделать из горизонтального вертикальный и, наоборот
2. задать жирность/курсив
3. задать размер
4. произвести деформацию текста, т.е. сделать его выпуклым, в виде флага и т.п.

Выбрав в окне Photoshop инструмент ПЕРЕМЕЩЕНИЕ (о нем писалось выше), с помощью мышки или стрелочек на клавиатуре, мы можем переместить в другое место текст логотипа на нашем шаблоне.

Рамка КАДРИРОВАНИЯ

Допустим, ваше изображение оказалось бОльшего размера, чем вам нужно (кстати, если фото не очень хорошего качества, то его можно использовать ретушь). Если вы будете уменьшать его с помощью команды в меню ИЗОБРАЖЕНИЕ — РАЗМЕР, то, изменив его по горизонтали, оно автоматически изменится и по вертикали, и наоборот.

Чтобы такого избежать и существует инструмент РАМКА КАДРИРОВАНИЯ. Выбираем его в окне Фотошопа, щелкам по нужному месту на заготовке и, зажав левую кнопку мыши, растягиваем рамочку, после чего отпускаем левую кнопку мыши.

Рамку кадрирования можно увеличить или уменьшить, ухватившись мышкой за ее уголочки. То, что мы хотим отрезать на итоговом изображении, будет затемнено. Выделили область, которую мы хотим оставить, и нажимаем кнопочку ПРИМЕНИТЬ КАДРИРОВАНИЕ (показано на рисунке выше).

Окно ИСТОРИЯ

В окне ИСТОРИЯ прописываются все наши действия в этой замечательной программе. В моем случае их было совершено пять: создание нового документа для последующей публикации на сайте, перетаскивание на него слоя с картинкой, перемещение рисунка телефончика в другое место на заготовке, перетаскивания туда же слоя с логотипом (в вашем случае — написание текста с помощью инструмента ТЕКСТ) и последующее его позиционирование в нужное место.

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

Так же шаг назад в Photoshop можно сделать с помощью: МЕНЮ — РЕДАКТИРОВАНИЕ — ШАГ НАЗАД.

Если у вас не наблюдается окна ИСТОРИЯ или какого другого описанного мною окна, то зайдите в МЕНЮ — ОКНО и поставьте галочку у нужного вам: история, слои, навигатор и т.д. Окна на рабочем столе в программе Фотошоп можно перемещать с помощью мышки.

Как добавить стиль слоя в Фотошопе

Если мы хотим добавить стиль одному слою, то делаем его активным и нажимаем кнопочку ДОБАВИТЬ СТИЛЬ СЛОЮ, если всему документу, то выделяем все слои с помощью удержания клавиши Shift на клавиатуре, а затем объединяем все три слоя в один, щелкнув по выделенным слоям правой кнопкой мыши и выбрав команду ОБЪЕДИНИТЬ СЛОИ, после чего нажимаем кнопку ДОБАВИТЬ СТИЛЬ СЛОЮ. Шайтанама.

При нажатии на кнопку ОБЪЕДИНИТЬ СЛОИ у нас откроется диалоговое окно с выбором стиля. Но есть и еще один способ открытия этого окна в Photoshop — двойной щелчок мышкой по уже единственному у нас слою в палитре СЛОИ. В этом случае у нас откроется вот такое диалоговое окно со всеми настройками задания стиля:

Данные настройки придадут вашему документу неповторимый стиль. Вы можете применить:

1. тиснение (сделать картинку объемнее)
2. наложить тени, как внутренние, так и внешние
3. задать свечение внутреннее или внешнее, а может и то, и другое
4. заключить наш документ в рамку
5. задать ее ширину
6. цвет и т.п.

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

Сохранение изображения для Web

JPG — это основной формат, в котором сохраняют фотографии. GIF лучше всего применять для сохранения растровых (состоящих из пикселей) изображений с количеством цветом не более 256. Этот формат отлично поддерживает анимацию, а так же часто применяется в web-дизайне.
PNG очень схож с GIF, только в отличии от него может отображать большее количество цветов. Подробнее о форматах Gif, Png, Jpg (Jpeg) растровой графики вы сможете прочитать тут.

Чтобы сохранить изображение в Фотошопе, заходим в меню и выбираем ФАЙЛ — СОХРАНИТЬ КАК, но для интернета лучше всего сохранить иным способом: заходим в меню и выбираем ФАЙЛ — СОХРАНИТЬ для Web устройств.

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

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

Как вставить созданную картинку на сайт

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

В этом случае графический файл загружается на сайт с помощью инструментов визуального редактора. Довольно удобно и просто. Но вот я, почему-то, всегда предпочитал другой способ вставки. Сначала подключаюсь к сайту по FTP c помощью моего любимого FTP клиента FileZilla, подробно описанного тут.

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

<img alt="" src="https://ktonanovenkogo.ru/image/25.10.png" />

Для класса img_center1 в моем стилевой файле (из папки с текущей темой оформления Вордпресс) прописано следующее правило:

.img_center1{display:block;background:#e0e0e0;padding:5px;margin:10px auto !important;}

CSS свойство display делает картинку блочным элементом. Ну, а затем с помощью margin:10px auto мы выравниваем ее по середине (по горизонтали). Про CSS свойства margin и padding читайте здесь. Ну, а background, которому посвящена эта публикация, задает серенький фон, который слегка проглядывает по краям, создавая эффект рамки.

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

Лично я пишу статьи в WordPress, используя только HTML редактор, в котором для удобства добавил кнопки, позволяющие быстро вставлять в текст штампы:

Таким образом можно очень быстро вставить фото на блог. Дополнительные кнопки в Html редактор можно добавить с помощью плагина Post Editor Buttons. Как нибудь опишу подробно работу с ним, а пока вы можете сами пробовать разобраться, тем более, что там ничего сложного нет.

Несколько советов, что и как снимать для сайта

1. Главное в фотографии – свет. Он может сделать кадр шедевром, а может погубить. Поэтому светом нужно грамотно управлять, не рассчитывая, что все ошибки исправит последующая обработка. Поверьте, если свет выставлен плохо, не поможет даже самая гениальная программа. Для съемки выбирайте первую половину солнечного дня и место у окна. Однако прямые лучи дадут слишком резкие тени и грубые очертания предметов. Роль рассеивателя может сыграть обычный лист белой бумаги, прикрепленный на оконное стекло. Наклеив тот же лист бумаги или фольгу на картонку, вы получите вполне пригодный отражатель. А немного попрактиковавшись, наверняка захотите приобрести и более профессиональные принадлежности.
   
2. Следующий по значимости элемент кадра – фон. Как ни странно это звучит, в первую очередь – он должен быть. То есть это не всё подряд, случайно оказавшееся на заднем плане. Фон нужно тщательно продумать, убрать лишние предметы (а если вам пока сложно составить хорошую композицию – уберите все). Светлый фон даст дополнительную естественную подсветку объекту. Еще один беспроигрышный вариант – деревянная фактура письменного стола или хотя бы ламината на полу.
3. Освоив съемку с простыми фонами, можно начать эксперименты с дополнительными предметами. Их главная задача – создать интересную среду вокруг основного объекта, подчеркнуть его стиль, цвет, фактуру и настроение кадра. Лайфхак: после того, как вы выбрали и разложили аксессуары – уберите последний (как правило, это уже лишняя деталь). Теперь можно снимать.
4. Без Photoshop и других «обработчиков» вам не обойтись хотя бы потому, что перед публикацией отснятые изображения нужно будет кадрировать и изменять их пиксельные размеры. Однако сейчас эти программы – мощный творческий инструмент, позволяющий создавать из «сырых» фотографий самостоятельные художественные произведения.
   
5. Сам собой напрашивается вывод, что ради уникальных и качественных снимков было бы полезно поучиться у профессионалов, пойти на фотокурсы. Получив базовые знания в технических и творческих основах фотографии, владении техникой и программами, можно продолжить обучение в интернете и практиковаться, практиковаться, практиковаться.
6. И только сейчас мы добрались до главного – чем снимать. Фотоаппарат должен быть безусловно качественным, принадлежать известному, достойному доверия бренду, а их не так много. Бывалые фотографы рекомендуют сразу начинать с зеркальной камеры. На первых порах можно ограничиться «телом» с двумя-тремя объективами, а пополнять коллекцию инструментов по мере необходимости. Зеркалки дороже «мыльниц», зато качество снимков несомненно выделит ваш блог среди других. Кстати, можете посвятить несколько статей тому, как вы выбирали аппарат и осваивали искусство фотографии.

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Как сделать потрясающие фотографии для вашего веб-сайта

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

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

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

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

1.

Встаньте дальше от объекта съемки, чем обычно.

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

Оставив пространство слева и справа от объекта, вы сможете использовать его как очень широкое фото, а оставив пространство над и/или ниже объекта, вы сможете обрезать его, чтобы сделать его еще шире.

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

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

Эта фотография Стива Джобса примерно 1978 года довольно негибкая, потому что вы не можете сделать ее шире.

Вот как это выглядит, обрезанное, чтобы быть красивым и широким. Не так хорошо, как хотелось бы!

Обрезанный. Выглядит неплохо!

2. Используйте низкое значение ISO, широкую диафрагму и штатив.

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

Низкое значение ISO

Высокие значения ISO могут осветлить изображение при прочих равных условиях, но они, как правило, вносят большое количество шума, делая изображения зернистыми и нерезкими. Он может сильно различаться в зависимости от модели камеры, но у большинства современных камер не должно быть проблем со значениями ISO ниже примерно 500. /2.0, если доступно) позволяет вашему объективу улавливать максимальное количество света, что также позволяет использовать более низкие значения ISO и более короткие скорости затвора.

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

Штатив

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

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

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

Прямой дневной свет создает резкие тени, а ваши объекты могут выглядеть как мистер Магу из-за их сморщенных лиц. Не делай этого.

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

4. Изучите основы композиции и фотографии и попрактикуйтесь в них.

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

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

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

5. Узнайте, как редактировать свои фотографии.

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

Но вы должны помнить, что фотография — это скорее форма субъективного искусства, чем наука. «Но закат не выглядел так в реальной жизни!» Вы могли бы сказать.

Вот маленький грязный секрет: восприятие субъективно. То, что видит один человек, отличается от того, что видит другой. И неотредактированная фотография почти никогда не оказывается такой, какой она «выглядела» для нас вживую. Редактирование устраняет этот пробел.

Если у вас есть программное обеспечение Photoshop/Adobe RAW, Lightroom или Apple, это подходящее место для редактирования. Но есть и бесплатные редакторы!

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

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

Раньше. Не на что смотреть.

После. Намного лучше! Может быть, не самый со вкусом сделанный, но это что-то. Я взял его кстати, так что не ненавидьте его слишком сильно.

6. Ваши фотографии должны быть максимально простыми.

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

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

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

В конце фотограф определяет качество фотографий. Но, надеюсь, это руководство помогло вам понять, как делать лучшие фотографии, какие только можно. Удачи на вашем сайте!

Как улучшить фотографии сайта с помощью смартфона — Блог Pagecloud

В ходе классического исследования того, как люди читают в Интернете, компания Nielsen Norman Group обнаружила, что 79 % респондентов «всегда просматривали любую новую страницу, на которую попадали; только 16 процентов читают слово за словом».

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

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

Вы можете не думать, что у вас есть навыки или инструменты для высококачественной фотографии. Однако, если у вас есть телефон с хорошим объективом камеры, вы можете использовать ресурсы, доступные в Интернете, чтобы делать отличные снимки. Вы можете начать с многочисленных руководств по фотографии (или iPhonography, если вы пользуетесь Apple iPhone).

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

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

Связанный:  Как начать бизнес в области фотографии

В этой статье мы пропустим общие советы («Очистите объектив! Используйте подставку!») и рассмотрим основные принципы, на которых фокусируются профессионалы. Эти принципы и навыки обеспечивают лучшую настройку и контроль как на телефонных камерах, так и на реальных камерах.

Освещение

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

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

Если камера на вашем телефоне не позволяет вам регулировать ISO, контролируя ее чувствительность к свету, вы можете загрузить такие приложения, как Camera+ или ProCamera, чтобы создать эту опцию. Обычно лучше использовать низкое значение ISO, поскольку оно позволяет делать более четкие фотографии с меньшим количеством шума (который выглядит как зернистые пиксели).

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

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

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

Позиционирование

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

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

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

Композиция 

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

Не нужно бояться приближаться к объекту (а не полагаться на зум камеры) и заполнять кадр. Напротив, иногда полезно оставить негативное пространство, что является еще одним способом привлечь внимание зрителя к объекту, на этот раз используя пустое пространство, чтобы сделать его ярким.

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

This entry was posted in Популярное