Как подготовить портрет для фона блога

  Автор:
  3221
kak-podgotovit-foto

Когда я писала видеоинструкция с примером как создать дизайн бренд блога на шаблоне AB-inspiration, то совершенно упустила из виду очевидную вещь. Точнее я ее не упустила, а просто посчитала само собой разумеющееся и не требующей дополнительного объяснения. Речь идет о подготовке изображения.

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

foto-ready

Фото хорошее, профессиональное, портрет.

Но, размер фото: высота 450px ширина 600px. Понятно, что такое фото ну никак не заполнит пространство экрана, а если заполнит, то это будет выглядеть вот так. (в настройках фона указать «Размер фона» — «Фон покрывает все поле»).

foto-ready2

Тоже интересно :), но не совсем то, что нам нужно.

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

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

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

1. Уменьшить изображение (наберите запрос на youtube «Как уменьшить изображение в фотошоп»)
2. Обрезать изображение (наберите запрос на youtube «Как обрезать изображение в фотошоп»)
3. Выделить объект и вырезать его из общего фона (наберите запрос на youtube «как выделить объект в фотошопе» «как вырезать объект в фотошопе»)
4. Создать дополнительный слой и наложить фон (как создать градиент в фотошопе)

Все это можно научиться за несколько занятий. Море видеоинструкций в интернет на Youtube. А также есть платные видеокурсы.

Итак, кратко опишу, что в этом конкретном случае нужно сделать с фото, чтобы оно превратилось в фон.

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

foto-ready3

2. Увеличить холст (Canvas) (не изображение, а холст!) по ширине до 1280px минимум (справа или слева, в зависимости от расположения фото), и добавить отступ сверху, если необходимо (для меню и шапки).

foto-ready4

foto-ready5

foto-ready6

3. Создать второй слой, который будет фоном

foto-ready7

4. Подобрать цвет по технологии создания палитры из изображения — http://www.cssdrive.com/imagepalette, затем создать палитру основного цвета от темного до белого http://colllor.com/. Я подробно об этом рассказываю здесь: Пример создания дизайна бренд-блога и здесь: Как подобрать цвет для дизайна блога используя фоновое изображение

5. Создать градиент из основного цвета и оттенков или можно просто однотонный фон.

foto-ready9

foto-ready8

6. Сохранить изображение для веб (для оптимизации размера)
7. Назвать изображение латинскими буквами (никакой кириллицы!)

Все, изображение готово к использованию. Теперь его можно вставить в виде фона и настроить внешний вид.

Вот видеоинструкция, как я это делаю:

Вот кстати, пример с этим фоном. Получилось здорово. Хотите подробное видео, как реализовать этот внешний вид? Если будут запросы, запишу отдельное видео.

foto-ready1

Если есть вопросы, не стесняйтесь, пишите здесь в комментариях.

P.S. Данный материал написан в рамках конкурса «Самый эффектный дизайн блога на шаблоне AB-Ispiration». Больше о конкурсе можно узнать здесь:Конкурс на самый эффектный дизайн блога на шаблоне AB-Inspiration

Как подготовить портрет для фона блога
   6 голосов
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:
Самые Важные Оповещения Блога + Четкий Комплект Ценных Подарков ДЛЯ БЛОГЕРОВ И ФРИЛАНСЕРОВ
Комментарии на блоге
10 комментариев
  1. Здравствуте Анфиса!
    Большое спасибо за статью. ФШ для меня остается ещё большой загадкой. Но после Вашей статьи все стало понятно и прошел страх, что у меня не получится .
    Я Вами просто восхищаюсь, как Вы можете просто объяснить, порой такие «трудные» задачи.
    И вообще, это мистика какая-то. Когда у меня появляется задача, вдуг на глаза попадается ответ в Вашем исполнении.
    Вы, наверное, добрая волшебница. Спасибо Вам.

  2. Возможно у меня наивный вопрос, но он есть. Почему в названии картинки нельзя использовать кириллицу? Все поисковики ее понимают уже… Отображение в соц. сетях в виде картинки (сама ссылка «замаскирована»)… Да, адрес выглядит странно, но где его видно человеку?.. а машине все равно как он выглядит…
    Ну, вот)))

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

      • Спасибо. Дела… Как же быть с поисковиками то… Они ведь название файла тоже анализируют. Хм… теперь все менять. ужОс)))

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

  3. Анфиса, на счет твоего предложения:
    «хотите подробное видео, как реализовать этот внешний вид? Если будут запросы, запишу отдельное видео» ОЧЕНЬ хотим.
    Спасибо тебе даже за скрины. Но я тут их в фотошоп попробовала применить (правда еле нашла этот градиент), получилось, только не совсем так как у тебя.
    Можно посмотреть в моем ролике, я туда в конце картинку вставила (делала градиент первый раз) :-[
    https://www.youtube.com/watch?v=bAQqQKmOP8U
    Так что ВИДЕО инструкция как это сделать в фотошоп пригодится больше *ROSE*

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

  5. Лена Заворотная

    Анфиса и Василий! Какую же великую работу вы делаете для людей! Спасибо вам огромное! Очень благодарна, что вы всегда быстро отвечаете и реагируете на вопросы. Но остался еще один вопрос, на который, думаю, не только мне одной, будет интересен ваш ответ по поводу бренд-обложки. Хорошо молодым ребятам , да и просто стройным красивым людям: они прекрасно выглядят на фото , которое размещают где угодно!
    А вот что делать нам: не совсем молодым и стройным?! Прикрываться красотками, которые не имеют к тебе никакого отношения или обходиться какими стандартными, уже всем приевшимися картинками?
    Может быть, у вас есть примеры с которых стоит брать пример ( сорри за тавтологию)? В данном случае, меня интересуют где есть взрослые женщины, а не мужчины ( те, вообще не заморачиваются, не имеют проблем с лишним весом, морщинами, ну и проч. ).
    Заранее благодарна за ответ. :)

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

      И еще, не обязательно делать именно фото. Можно в живой форме поставить видео-обращение с формой подписки. Это будет тоже бренд-блог:). Так например у Боба Проктора сделано.

  6. Анфиса! Спасибо за урок. Буду осваивать фШ с Вами, хотя и есть диск с уроками

Комментарии в Фейсбук
Комментарии в Вконтакте