Как правильно уменьшить размер картинки в Фотошопе

или о чем я часто забываю :).

Уменьшать размер фотографий (собственных или позаимствованных на бесплатных фотостоках) приходится всем – и дизайнерам, и баннермейкерам, и блогерам.

В Фотошопе сделать это элементарно:
Image > Image Size и выбираем нужный нам размер в пикселах или сантиметрах.
Главное – при уменьшении размера фотографии не забыть сделать активной опцию Resample Image и в выпадающем меню выбрать опцию Bicubic Sharper.

Несколько примеров того, как различные опции влияют на качество уменьшенного имиджа (примеры взяты с сайта http://www.sitepoint.com/blogs/2009/08/23/resize-an-image-in-photoshop/)

Bicubic Sharper (оптимальный результат)

Bilinear значительно искажает края:

Nearest Neighbor опция дает самый плохой результат:

Если уменьшать размеры имиджей в Фотошопе приходится постоянно, можно выбрать правильные настройки по умолчанию:
Preferences> General >  Image Interpolation и выбрать Bicubic Sharper в выпадающем меню

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

Объемные буквы без Фотошопа (letterpress effect)

Буквально вчера наткнулась на интересную информацию – как на веб-сайте сделать буквы объемными. Причем не делая их картинкой в Фотошопе :).

Автор статьи, в которой описана данная функция (http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow), называет этот эффект letterpress effect.

Полезность очевидна – заголовки постов или разделов сайта можно сделать красивее и заметнее, при этом текст остается текстом и доступен поисковикам. Да и Фотошоп лишний раз запускать не надо.

Минус – не все браузеры поддерживают CSS3, в котором есть необходимая опция text-shadow. Зато плюс – Safari и Firefox (3.1+) поддерживают эту опцию, а Firefox становится все более и более популярным браузером (в то время как Эксплорер сдает свои позиции).

Чтобы сделать буквы объемными, им надо добавить тени. Чтобы сделать тени, используется стиль text-shadow:

text shadow

Тень описывается 4 параметрами: x-offset, y-offset, blur и цвет тени. Можно задать цвет тени темнее цвета букв, тогда в результате получаем выпуклые буквы (“Line 25” на вышеприведенной картинке).

Для получения  letterpress эффекта тень должна быть немного светлее, чем текст. В данном случае (первый имидж в этом посте, темный текст) использованы #555555 для тени и более темный  #222222 для текста:

color: #222;
text-shadow: 0px 2px 3px #555;

Для тех, кому нужна работа в москве – сайт job.ru. Поиск вакансий, подписка на новые вакансии, советы по составлению резюме. Подробная информация о ярмарках вакансий в Москве. Если вам нужен работник – разместите объявление бесплатно за 3 минуты.

Бесплатные фотостоки

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

Клипарт можно покупать на фотостоках. Можно воровать :). А можно использовать бесплатный клипарт с бесплатных фотостоков. Коллекция таких фотостоков собрана в недавнем посте в SmashingMagazine.com.

Многие бесплатные фотостоки требуют регистрацию на сайте. Некоторые требуют наличие обратной ссылки на сайт-фотосток.

Бесплатные фотостоки и коллекции текстур

Free Range Stock
Бесплатный фотосток. Для загрузки имиджей высокого качества (минимум 2400 x 1600 пикселов) необходимо зарегистрироваться на сайте.

Stock.XCHNG
Stock.XCHNG – один из самых известных фотостоков в Интернете. 400,000 имиджей, каждый имидж в 5 раздичных размерах, для каждого имиджа указано количество скачиваний.


MorgueFile
Бесплатные цифровые фотографии для личного и коммерческого использования.

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

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

Free Stock Photos
Категории имиджей:
Athens, Christian, Egypt, Israel, Near East, Rome, Scenery, Sky, Weather, Wildflowers, Plants, Wildlife, Animals.

ImageBase

Kave Wall
Бесплатные фотографии, имиджи и текстуры.

Turbo Photo
2,000 бесплатных имиджей для скачивания в 10 категориях.

Free Stock Photography
100 категорий – от животных до игрушек и игр.

Freepixels
Более 3000 имиджей, некоторые из них продаются на платных фотостоках.

Stock Vault
Более 13000 имиджей плюс полезные уроки, статьи и видео для дизайнеров.

FreeFoto
Коллекция бесплатных фотографий. Более 100 000 имиджей. Использование некоторых имиджей предполагает наличие ссылки на фотосток.

BigFoto
Коллекция бесплатных фотографий различных городов и стран.

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

Mayang’s Free Textures
Mayang’s Free Textures – библиотека бесплатных текстур (более 3,800): кирпичные стены, камни, вода, листья, эффект краски и т.д.

Every Stock Photo
Every Stock Photo – поисковик бесплатных фотографий.

Может быть, именно поэтому вы и не получили заказ?

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

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

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

Заказчик: ты кстати с заказами завязала или делаешь банеры еще?

Я: время от времени 🙂

Заказчик: мне пара нужна на флаше, до завтра смогешь?

Я: неужели выгнал своего придворного баннермейкера? 🙂

Заказчик: тот в отпуске до середины августа. Я другого пряника присмотрел, заказик дал – вроде даже круто сваял.

Я: и что?

Заказчик: да ну его, он на …(название сайта)… всем предлагал бесплатно делать банеры. А теперь я должен платить ему бабки за то что он всем делал даром?

На этом месте я немного смутилась… вот черт, а я ведь тоже предлагала за отзыв, получается, обо мне тоже кто-то так подумал? И сколько заказчиков думают так же?

В общем, пища для размышления тем, кто грешит работами за отзыв (мне первой :)).

А кандидаты наук пишут диссертация на заказ, но могут написать и реферат. Интересно, как долго пишется диссертация? Свою я писала года 4, правда, не на заказ :).

Как стать фрилансером – 17 советов дизайнеру

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

С чего начать? О чем надо подумать до того, как пополнить ряды фрилансеров?

И что по этому поводу думают ТАМ?

Как стать фрилансером – 17 советов дизайнеру

Очередной перевод статьи с сайта DesignM.AG (поскольку сайт ориентирован на дизайнеров, советы даются именно дизайнерам, однако универсальность советов позволяет применить их к любой специализации).

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

Немного рутины:

О бедных баннермейкерах замолвите слово

В своем блоге дизайнер dobrodoov недавно выложил баннер, который он сотворил сделал своими руками для своего блога (картинка внизу справа).

dobrodoov-design

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

Баннер, как правило, нужен для того, чтобы:

  • кому-то что-то сообщить (“Пиплы, тут какие-то пидары и кошелки прикатили из столицы, петь нам будут дикими фанерными голосами, давайте, подтягивайтесь за билетами в ближайшую филармонию“)
  • кому-то напомнить о себе (“Ты еще не забыл, что наша “Пепси” делается из червяков?“)
  • заставить зрителя кликнуть по себе и привести на свой сайт (“Мужик там такое… да ты только посмотри, чего там есть!“)

Первые 2 пункта еще иногда называют имиджевой рекламой. Но, в основном, баннеры нужны для того, чтобы нах них (или по ним?) кликали.

Теперь смотрим на баннер dobrodoov. Вы знаете, кто такой dobrodoov? Рискну предположить, что, скорее всего, нет. При всем уважении к его работам его имя – это еще не такой раскрученный бренд, как Тема Лебедев и Ксюша Собчак. Поэтому тут одним именем на баннере посетителя не заманишь (“Алла Пугачева покинула сцена. Сцена отделалась легким испугом” – и кликабельный баннер готов, причем независимо от того, какая на нем картинка и какого цвета буквы. Лишь бы побольше Пугачевой).

А кроме имени? Еще есть картинка. Да не какая-нибудь, а вебдванольная, с градиентиками и бликами. Красивая картинка, даже спорить не буду. Одна беда – таких картинок в инете много и одной картинкой никого не удивишь и не заманишь. А удивить и заманить надо, работа у баннера такая.

Но главное – “а мужики-то не знают”, куда ведет этот баннер. Ну кликну я, и что? Куда попаду? Нужен ли мне тот сайт, на который ведет этот баннер? Пойти и узнать, нужен ли – это было хорошо лет 20 назад, когда сайтов было мало.

Суммирую: баннер – это не только ценный мех не картинка. Баннер – это прежде всего реклама. И только потом красивая картинка, текст без ошибок и все такое. Оценивая баннер, надо прежде всего задавать вопрос: “А привлек ли он внимание? А заставил ли заметить себя?”. Если заставил, то плевать на то, что без перламутровых пуговиц градиентов.

Кстати, этот пост навел меня на мысль написать мемуары статью “Основные ошибки клиентов, заказывающих баннеры” (попутал меня мелкий бес, делаю я баннеры). Если не хотите такое пропустить – подпишитесь на рассылку моего блога. Да и вообще подписка на рассылку этого блога – дело богоугодное и ощутимо улучшает вашу карму :).

Статьи по теме в моем блоге:

Ну и зачем такой баннермейкер?” – в чем же должна заключаться работа настоящего баннермейкера?

Если бы баннеры были правдивыми… – баннермейкеры переквалифицировались бы в управдомы?

Так рождаются анекдоты о дизайнерах

Формы – дизайн с точки зрения юзабилити

Удобство для пользователя – основа основ дизайна. А как узнать, что именно удобно в каждом конкретном случае? Спрашивать, изучать и исследовать :). То есть отходить от бытового понятия о том, что дизайн и юзабилити – это наитие и интуиция, и больше полагаться на результаты исследований.

Целый ряд исследований юзабилити провел Matteo Penzo, результаты он опубиковал на сайте uxmatters.com. Данным, которые я хочу привести в этом посте, уже более двух лет (http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php), но используются они в реальной жизни совсем нечасто, к сожалению. Именно поэтому мне показалось, что будет полезным сделать краткий перевод этих результатов для своего блога.

Кому будет интересна и полезна эта статья? Дизайнерам, специалистам по юзабилити, баннермейкерам, маркетологам.

Целью исследования было установить, как пользователи заполняют он-лайн формы.

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

Текст в форме слева, равнение по левому краю:

наиболее популярное расположение элементов формы: подписи слева, равнение по левому краю.

Цифры на рисунке показывают, в какой последовательности пользоватль просматривает элементы формы.

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

Если в форме есть открывающийся список, он привлекает максимум внимания к себе.

Текст слева, равнение по правому краю:

Если текстовые метки были выровнены по правому краю (right alignment), пользователю нужно было значительно меньше времени (примерно в 2 раза меньше) и шагов, чтобы заполнить форму. В этом случае переход зрачка от текстовых меток к полям формы занимал всего 170 миллисекунд для опытного пользователя и 240 – для новичка.

 

Текст над полями ввода:

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

Там, где пользователи все же переводили взгляд от текста к полю ввода, они тратили всего 50 миллисекунд (сравните с 500 для текста слева, первый рисунок).
Раскрывающийся список по-прежнему привлекал максимум внимания пользователей.

Текст над полями ввода, набран болдом:

Если текст сделать более жирным (bold), время перехода от текста к полю ввода увеличивается с 50 до 80 миллисекунд. Пользователям было труднее читать и распознавать текст, набранный болдом.

Основные выводы:

  • Текстовые метки лучше всего размещать над полями ввода. Это позволяет пользователям не рассматривать текст и поля ввода отдельно друг от друга.
  • Если текст размещается слева от полей ввода, лучше применить к нему выравнивание по правому краю.
  • Не делать текст жирным (bold) либо делать рамки полей ввода как можно тоньше, чтобы они не конкурировали с «жирным» текстом.
  • Раскрывающиеся списки привлекают к себе особое внимание, поэтому использовать их надо только для важных элементов формы.

Немного о WEB 2.0: в Web 2.0 дизайне больше градиентов, чем склонов в Альпах

Что такое Web 2.0, точно сказать не может никто, как мне кажется. Но каждый постоянно произносит эти слова, вкладывая свой сокровенный смысл в этот магический термин. “Сделайте мне вебдванольно” – говорит заказчик, который просто хотел сказать “сделайте мне пи так, чтобы смотрелось круто и дорого”. Этот удобный прием позволит ему в любой момент отвергнуть работу: “Это – не веб 2.0” (читай – “мне это просто не нравится, но я не понимаю, почему, потому что я вообще ничего не понимаю в дизайне”).

На самом деле я не планировала писать такое длинное вступление, потому что я тоже не до конца понимаю, что иногда подразумевают под многозначительным “сделай мне в стиле веб 2.0”. Поэтому с большим интересом прочла сегодня статью Дизайн в стиле Web 2.0 (вот здесь designformasters.info/posts/web20-design/).

web 2.0

Если мне нужно будет описать дизайн в стиле Web 2.0 одним словом, то это будет слово «Простота», так что с нее и начнем.

Я верю, в простоту и думаю, что это передовое направление в веб дизайне.

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

Дизайн в стиле 2.0 чистый и простой, это не обязательно означает минимализм…

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

 ***

Большинство современных сайтов используют центральное позиционирование относительно окна браузера. Значительно уменьшилась доля резиновых и левосторонних сайтов, по сравнению с прошлыми годами. Стиль «2.0» простой, смелый и четкий. Сайты, которые размещаются по центру окна браузера, создают именно такое впечатление.

***

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

***

  

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

***

Mногие сайты используют цвет, чтобы обозначить свои функциональные зоны.

***

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

***

Большинство сайтов в стиле Web 2.0 используют легкие 3d эффекты, чтобы придать дизайну более качественный вид.

***

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

В Web 2.0 дизайне больше градиентов, чем склонов в Альпах.  Градиенты смягчают области, которым иначе пришлось бы сделать однотонными.

   

Ну и просто Трафальгар-сквеар с видом на Биг Бен.

Трафальгарская площадь, Лондон

И еще раз о божественной пропорции

пишет SmashingMagazine. И вроде написано об этом много, но тема настолько интересная, что не грех и перечитать.

Ниже привожу краткий конспект статьи. Рисунки взяты из статьи в SmashingMagazine “Applying Divine Proportion To Your Web Designs” (www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/).

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

Как достичь такой четкости и интуитивности? Вот тут на выручку и приходит божественная пропорция (или золотое сечение).

Считается, что золотое сечение нам кажется таким красивым и гармоничным потому, что оно постоянно встречается в естественной природе. Золотое сечение (божественная пропорция) – это то, что мы чувствуем, а не воспринимаем логически.

Что такое божественная пропорция / золотое сечение? Это соотношение между размерами объектов, равное 1.618033988749895 ≈ 1.618.

divine-proportion

На приведенном выше примере показано, как использование золотого сечения помогает дизайнеру. Допустим, у вас есть экран шириной 960 пикселов. Дизайн будет состоять из широкого блока-текста (content) и более узкого блока-меню (sidebar).

Для начала расчитываем ширину текстового блока. Делим 960 px на 1.62 и получаем 593 px. Таким образом, ширина текстового блока будет 593 пиксела, тогда ширина сайдбара (960 – 593) = 367 пикселов.

В этом примере отношение длины контент-блока и сайдбара равно (593 px : 367 px ≈ 1.615), отношение ширины всего экрана к ширине текстового блока также равно золотому сечению: 960 px : 593 px> ≈ 1.618.

Если под рукой нет калькулятора, можно использовать простое соотнощение 5 : 3 – это не совсем золотое сечение, но близко к идеалу.

Реальный дизайн сайта не обязательно подчиняется божественной пропорции. Как видно на следующем рисунке, соотношение между блоками не равно золотому сечению: 630 : 330 px ≈ 1.91 ≠ 1.62. Соотношение между текстовыми блоками в правой и левой части равно: 583 : 299 px ≈ 1.92 ≠ 1.62.

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

Ищем дизайнера-дальтоника :)

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

color

У меня результат – 3. Не фонтан, конечно, в идеале нужен 0. Но и далеко не ужас, бывает и 1425. Интересно, зависит ли результат от качества монитора? Я проверялась на работе, монитор оставлял желать лучшего (или просто пыль с него надо было стереть… :)).

Нашла ссылку на этот тест в ЖЖ дизайнера-маньяка miu mau. Кстати, кто еще не видел ее работы – это из серии маст си.