Создание изображения для сайта в 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. Ваши фотографии должны быть максимально простыми.

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

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

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

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

Шаг 5 Как сделать снимок для веб-сайта

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

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

На этом этапе мы поделимся некоторыми советами, которые мы узнали на этом пути, о том, как сделать снимок для веб-сайта!

Оборудование

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

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

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

Canon Line Up

Корпус камеры — Если вы планируете использовать изображения только для своего веб-сайта, мы рекомендуем использовать кроп-сенсор Canon SL2.

Кроп-сенсор Canon SL2

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

Полнокадровый датчик Canon 6D

Существуют и другие бренды, такие как Nikon, которые предлагают корпуса камер с аналогичными характеристиками, но у нас есть опыт работы только с Canon, поэтому мы рекомендуем именно их.

Опять же, поскольку это руководство должно быть как можно более простым, мы не будем вдаваться во все различия корпусов этих камер, но в целом Canon 6D обеспечивает более качественные снимки с более высоким разрешением, чем Canon. SL2 при тех же условиях освещения.

Линза — Если вы слышали поговорку «все дело в объективе», это правда. Мы бы сказали, что ваш объектив легко отвечает за 70-80% качества изображения.

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

Небольшое примечание: камеры с креплением EF-S (кроп-датчик) могут использовать объективы как EF, так и EF-S, тогда как камеры с креплением EF (полнокадровый датчик) могут использовать только объектив EF.

Линейка объективов Canon

Еда/крупный план — Если большинство ваших изображений будут сняты крупным планом, например еда, украшения или ремесла, вам нужно инвестировать в макрообъектив (крупный план) и лучший один из них — Canon EF 100mm f/2.8.

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

Путешествия / Пейзаж / Семейный / Мамин сайт — Для путешествий или возможности сфотографировать ваших детей, вам понадобится универсальный объектив с функциями полного масштабирования и один мы рекомендуем Canon EF 24-70mm F/2.8 или Tamron SP 24-70mm F/2.8 для полносенсорных камер. Оба они похожи по спецификациям, где Canon является «известным брендом», а Tamron — «небрендовым».

Если у вас камера с кроп-сенсором, эквивалентным объективом будет Canon EF-S 17-55mm F/2.8 или Tamron SP AF 17-50mm F/2.8 Di II.

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

Макияж / Портрет – Если вы сосредоточены на съемке портретов или демонстрации советов по красоте, вам повезло, потому что этот объектив самый дешевый из всех. Объектив, который мы рекомендуем, это Canon EF 50mm F/1.8, и он хорошо подходит для кропнутых и полносенсорных камер.

Этот объектив известен как «Удивительный пластик», потому что вы не можете превзойти соотношение цены и качества. Объектив снимает с приятным боке (мягкостью), который вы ищете на портретах, при этом сохраняя резкость вокруг точки фокусировки. Long Lens / Wildlife — если ваши изображения будут вращаться вокруг съемки объектов издалека, то есть дикой природы, вам лучше всего подойдет Tamron 18-200mm F/3. 5-6.3 Di II для датчика кадрирования с байонетом EF-S или Tamron 70. -300 мм F/4.0-5.6 Di для полносенсорной камеры с байонетом EF. Это отличные объективы начального уровня, которые сделают нужные снимки, сохраняя безопасное расстояние от объектов съемки.

Освещение и постановка

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

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

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

Пример освещения окна

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

Если вы снимаете на улице, поместите объект в тень. Вы никогда не должны снимать с солнечным светом прямо на объекте, так как вы получите «резкое» освещение или изображения будут слишком контрастными.

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

Пример освещения «Золотой час»

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

Убедитесь, что кадр кадра выбран так, как вы хотите, и что на заднем плане нет ничего, что вы не хотите видеть.

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

Настройки камеры

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

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

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

Ручной режим состоит из трех элементов ISO, F-Stop и Speed ​​Shutter Speed. То, как вы настроите каждую из этих настроек, повлияет на «тип» изображения, которое вы собираетесь создавать.

Треугольник экспозиции

ISO означает, насколько чувствителен ваш датчик к свету. Вы используете меньшее число (ISO 100), когда у вас много освещения, и большее число, когда у вас ограниченное освещение (ISO 16000).

F-Stop управляет разницей между фокусом объекта и фоном (а также освещением, но это сложная тема). Более низкий F-Stop (1,2) означает, что между вашим объектом и фоном будет большой разрыв, а более высокий F-Stop (5,6) означает, что объект и фон будут ближе друг к другу на изображении.

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

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

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

Еда / Крупный план

ISO 500 – 1000
F-Stop 4,0 – 6,3
Выдержка > 1/160

Примечание – если изображение слишком яркое, увеличьте выдержку. Если изображение слишком темное, уменьшите выдержку, но не ниже 1/160 (фокус может быть размытым).

Крупный план

Путешествия / Пейзаж / Семья / Мамочки в блоге

ISO 400–800
F-Stop 3,5–5,6
Скорость затвора > 1/100

Примечание — если изображение слишком яркое, увеличьте выдержку. Если изображение слишком темное, уменьшите выдержку, но не ниже 1/100 (фокус может быть размытым).

Travel Images

Make Up / Portrait Images

ISO 100 – 800
F-Stop 2. 0 – 3.5
Shutter Speed ​​> 1/100

Примечание – если изображение слишком яркое, увеличьте выдержку. Если изображение слишком темное, уменьшите выдержку, но не ниже 1/100 (фокус может быть размытым).

Портретные изображения

Длиннофокусный объектив / Дикая природа Изображения

ISO 800 – 1600
F-Stop 5,6 – 7,1
Скорость затвора > 1/400

Примечание – увеличьте выдержку затвора. Если изображение слишком темное, уменьшите выдержку, но не ниже 1/400 (фокус может быть размытым).

Телефото (большое расстояние) Изображения

Постобработка Редактирование

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

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

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