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

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

1. Сразу следует заметить, что не каждая фотография подходит для миниатюры! Наиболее удачным является вид сверху-сбоку (если не ошибаюсь, в играх это называется – third person view). Хорошая и реальная миниатюра получится лишь при правильном выборе угла обзора. Если сложно сориентироваться и не совсем понятно о чем я говорю, то можете посмотреть мои примеры в конце поста или заглянуть на Flickr.

2. Загружаем нужную нам фотографию в Photoshop, выбираем на панели инструментов режим Quick Mask Mode (или просто нажимаем на клавиатуре Q) – шаг 1 на рисунке ниже. Затем выбираем инструмент градиента (G). Удостоверьтесь, что выбран режим reflected gradient (четвертая иконка – см. шаг 2).

3. Далее проводим линию от центра фокуса (шаг 1) до места, где он будет заканчиваться (шаг 2). Я не специалист в фотографии и дизайне, поэтому не судите строго, если какие-то термины неправильно использую, рассказываю так, как понял с англоязычного мануала. Как только мы закончим с линией, появится красная маска.

4. После этого выходим из режима Quick Mask Mode все тем же нажатием Q. На изображении останется выделение пунктиром. Заходим в меню Filter > Blur > Lens Blur.

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

5. После сохранения эффекта, снимаем выделение нажатием CTRL-D. Далее заходим в меню настроек Image > Adjustments > Hue/Saturation (для увеличения насыщенности цвета).

Автор в своем примере ставит для поля Saturation значение +40, хотя, в принципе, вы можете настроить данный параметр по своему, смотря при этом результат применения свойства.

6. Дальше увеличиваем контраст изображения в меню Image > Adjustments > Curves. В английском руководстве приведены следующие параметры (хотя сказано, что от данного пункта можно и отказаться):

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

Итак, после вышеперечисленных манипуляций в Photoshop, получилась такая миниатюрная картинка:

Вот еще несколько миниатюр Киева, сделанных на скорую руку:

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

P.S. Хорошая возможность получить пиар и трафик для своего блога практически ничего не делая! Для блоггеров, не социальная сеть:)

Кстати, напоминаю, что сейчас в блоге идет конкурс с призовым фондом в 50у.е. Кто еще не в курсе – читаем условия и принимаем участие. На этой неделе будут разыграны очередные 10 баксов.

Спонсоры поста:

• На свадьбе нужен свадебный фотограф!
• Секреты и хаки для Blogger.com
• Постовые и ссылки для ваших проектов/блогов.

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

В такт настроению данный пост будет не очень серьезным, но весьма полезным, я надеюсь. Тут мне передали эстафету и попросили рассказать о 5-ти блогах, что я читаю, не связанных с заработком, блоггингом, бизнесом или SEO. Открыл свой RSS (Google) ридер, и на ум сразу пришла тематика для ссылок – расскажу о дизайн-блогах! Всего я читаю около 10-ти сайтов, выберу, пожалуй, самые значимые и крупные. Как ни странно в большинстве это англоязычные блоги, переводы с которых очень часто можно встретить в рунете.

WebDesignerWall

Самый оригинальный блог в данной области, который я когда-либо видел. Тематика – дизайн, идеи, веб-тенденции, разработка.

Design You Trust

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

Outlaw Design Blog

Честно говоря, ничего конкретного о сайте сказать не могу, подписался когда-то, увидев интересную статью. Если судить по лучшим постам, то там есть чем «поживиться»: «100 Premium WordPress Themes», «Free Developer Icon Sets», «26 Free Icon Sets We Love», «63 Must have Grunge Fonts», «63 Wallpapers for Designers», «Great Illustrator Designs».

DezinerFolio

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

Smashing Magazine

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

Не буду ограничиваться 5-тью ссылками, приведу еще несколько. Есть в моем скромном ридере и русскоязычные блоги:

• Mmaxis – блог о дизайне. Есть полезные заметки, только вот автор куда-то пропал более чем на 2 недели.
• Dejurka – «дизайн-журнал номер один». Русский аналог «смэшина», но тексты собственные! Проект был выбран мной в качестве блога-открытия мая.
• Mannodesign – авторский блог Насти Манно, которая страстно увлекается веб дизайном. Один из победителей блогов-открытий за апрель.
• DesignForMasters – несмотря на название, проект посвящен достаточно широкому кругу тем, кроме самого дизайна – начиная от кодинга и заканчивая бизнесом.

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

P.S. Предлагаю ознакомиться со статьей «Как заработать в интернете НЕ продавая информацию» – 10 шагов построения сети сайтов для заработка. Описано все достаточно подробно и доходчиво.

Дмитрий Наумов опубликовал интервью со мной, за что ему спасибо:)

При поддержке спонсоров:

• А ты уже зарегистрировался в социальной сети для блоггеров? Поспеши!
• Блоги под ключ от Эскхостинг. Домен в подарок с каждым тарифом.
• Софт для email рассылки – эффективно, качественно.

Для начала, наверное, следует упомянуть о значимости и применении иллюстраций в блогах. Параллели можно проводить с виртуальными СМИ, а точнее новостными порталами, где к каждой заметке или тематической статье добавляется небольшая картинка в самом начале. Уж не знаю, с каких пор это повелось, но сейчас такая тенденция встречается у разных западных блоггеров, в том числе и Дарена Роуза. Кстати, использование графики часто рекомендуется во всевозможных сборниках советов «как сделать свой блог лучше» и т.п.
Действительно, картинки помогают оживить сухой текст, внести немного разнообразия и красоты. Изображения, которые сходятся с тематикой заметки – и вовсе могут служить дополнительным элементом для зрительного восприятия текста. Лично я полностью поддерживаю и разделяю данную идею, чего и вам советую.

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

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

2. Поисковики. Первые 6-7 месяцев ведения собственного блога я активно использовал поиск по картинкам от Google. При работе с ним советую вводить англоязычные слова – результатов будет на порядок больше. Конечно, некоторые фотки приходилось дорабатывать, что-то придумывать, поскольку иногда выдача не представляла ничего интересного, но для начала мне этого хватало с головой.

Аналогичный механизм поиска по картинкам есть у Яндекса, Yahoo и других. Сюда я бы отнес также сервисы, которые специализируются исключительно на поиске изображений. Например: picsearch.com (англоязычная версия) и русскоязычная – picsearch.ru. Внешний вид сервиса в стиле Google – сплошной минимализм, хотя по моим наблюдением, дело знает.

Куда более симпатично выглядит проект everystockphoto. Во-первых, он ищет одновременно по несколькии источникам – flickr + паре фото-архивов, о которых я расскажу в следующем пункте. Во-вторых, обладает дополнительной социально-направленной функциональностью – после регистрации вы сможете голосовать, комментировать изображения, а также задавать им тэги. Лично мне сервис понравился, однозначно заслуживает место в закладках. Ведь гораздо удобнее искать изображения в одном месте, используя при этом сразу несколько баз.

3. Фото-архивы. Существуют бесплатные и платные архивы. Последние предназначенные для торговли изображениями – одна из разновидностей онлайн заработка на фотках. Определенный человек загружает на сайт собственные работы, а потом кто-то их покупает с правами использования для своих нужд. Занятие, честно говоря, весьма сомнительное, учитывая стоимость некоторых экземпляров около $50-$100. Сложно представить, кто будет платить такие деньги за обычную фотку.

Так вот на этих платных сервисах иногда могут также размещаться изображения «для общего пользования». Хорошим примером может послужить сайт – sxc.hu, который имеет достаточно большой выбор качественных бесплатных образцов. Кстати, за $219 вы можете купить абонемент для скачивания фоток в течении месяца.

Alamy.com – содержит 12,5 миллионов! изображений. В течении последнего месяца я пользовался сайтом с величайшим удовольствием, напрочь забыв об остальных ресурсах – там можно было найти абсолютно все. Цены на фотки, конечно, зверские – в зависимости от способов использования и размеров нужного изображения могли достигать $300! Тем не менее, до недавнего времени там была очень удобная система предварительного просмотра изображений, где можно было скачать картинку размером где-то около 500х500 пикселей. Согласитесь, этого более чем достаточно. Теперь же разработчики добавили защиту от копирования (полупрозрачный логотип сервиса), и доступными остались только самые маленькие превьюшки (в результатах поиска) – 170х170 пикселей. Возможно, кому-то этого хватит.

В западном Интернете можно часто встретить различные сборники лучших бесплатных сервисов с картинками, но, к сожалению, там все не просто – в погоне за количеством часто страдает качество. Так, например, в из двух статей Top 25 Free Stock Image Resource Sites и Top 30+ Free Stock Photo Sites, кроме упомянутого выше sxc.hu, я нашел всего 4 более менее приличных сайта. Количество изображений в других сервисах не очень велико. На мой запрос «internet» многие выдавали по 5-20 изображений, тогда как alamy.com – 38 тыс и sxc.hu – 37 тыс. Всем, думаю, понятно, что искать иллюстрации для блога в мелких архивах слишком накладно и неэффективно. Итак, обещанные 4 сервиса (в порядке убывания по степени полезности с моей стороны):

• Pixelio.de
• Imageafter.com
• Freepixels.com
• Stockvault.net

Первый, кстати, тоже показал достаточно неплохие результаты.
В процессе подготовки статьи вдохновился и почерпнул немного информации из заметки Где найти картинки для поста-2 от блога Международная блогопанорама.

Достаточно скользкий вопрос относительно используемых изображений возникает с копирайтом. Многие указывают имя автора, когда берут фотку с flickr.com, но ведь совсем другое дело – Google поиск. Там можно встретить не оригиналы. Поэтому тут уж каждый сам для себя определят нужно указывать источник или нет.

P.S. Я добавил в блоге новую страницу – «Спонсорство». Каждый желающий может купить там ссылку навсегда. Количество мест ограничено, действуют правила аукциона – кто заплатил больше, тот располагается выше. На данный момент минимальная сумма взноса 1 WMZ. Страница будет существовать столько, сколько проживет этот блог, спешите занять места подешевле.

Смотрите также по теме – бесплатные картинки (headers) для сайта или блога.

При поддержке спонсоров:

• Добро пожаловать в социальную сеть для блоггеров! Здесь все свои:)
• Эскхостинг – лучший веб хостинг для Вашего блога.
• ePochta – все что нужно для эффективной email рассылки.