Как да си направим картинка за уебсайт? (Ръководство)

от Asen

Винаги ми е липсвало „Бързо онлайн ръководство за обработване на изображения“. Бъдещите собственици на уебсайт рядко се замислят, че ще им се наложи да обработват картинки преди да ги сложат на сайта. Дизайнерът, който прави сайта, трябва да им разясни ситуацията. Още по-рядко се случва клиентът да остане очарован след първия разговор, който почти задължително включва думата „фотошоп“ … която звучи така познато – хем „фото“, хем „шоп“. Въпросният „Фотошоп“ е професионален инструмент за манипулиране на изображения и като такъв не може да зарадва потребителите си с разумна цена.

Поне дузина пъти съм сядал да пиша такъв наръчник, който да е лесен за ползване и бърз за научаване. Като се замисля … явно е липсвало нещото, което открих преди неизвестно време …

Picnik - logo

Picnik e oнлайн приложение за обработка на картинки. Програмата е съвсем в духа на web 2 вълната от последните години. Приложението разполага с необходимият набор от инструменти, които непрестанно се обогатяват. Интерфейсът е много свеж и интуитивен, наистина приятен за ползване. Picnik е публична бета и всички функции са безплатни. За щастие инструментите и най-необходимите ефекти обещават да останат безплатни и във версия 1. Единствено не дотам бърза Интернет връзка, може да помрачи удоволствието от работата.

Ако си про с фотошоп-а надолу няма да ти е интересно.

За грижовни автори:

Кратко ръководство за обработване на изображения

#1. Отваряне на картинката

Избираме картинка от локалният компютър.

Отваряне на изображение

#2. Оразмеряване и композиране

  • Избери Crop от Edit таба.
  • Въведете размера на желаната картинка в полетата Actual size в нашият случай е 400 х 300. Ако не знаеш размера, задължително го научи, това е важно. Важно: Оригиналната картинка трябва да е по-голяма от крайната, не обратното.
  • След това маркирай Scale photo.
  • Сега с помощ на мишката оградете желаната част от картинката. Полезно: Нагласете(композирайте) важният обект около някой от възлите на решетката.

Оразмеряване и композиране

#3. Подобряване на цветовете и яснотата

Подобряване на цветовете

Подобряване на рязкостта

  • Нека поправим пресиленият оранжев оттенък на картинка (щорите са виновни!). Избери Colors от Edit таба. Saturation променя наситеността на цвета, а Temperature нюанса. Поиграй си докато ти хареса и скачай на ОК.
  • Картинката е загубила яснота при намаляването на размера й в точка #2. Сега е момента да си я върне. Избери Sharpen от Edit таба.
  • И нещо за душата. Избери Create таба. Там в ляво има разнообразни ефекти, бъди творец.

#4. Запазване

Запазване

Време е да запазим творението си. Избери Save to Computer от Save&Share таба. Формата на файла нека е JPG, a качеството от 6 до 8.

Важно: Тежестта на картинката е от голямо значение в Интернет. Моята се получи 24 KB, което не е лошо.

Помнете: Леките картинки правят потребителите по-щастливи :)

Резултът

Успех!

Ново по темата »

Коментари:4

  1. Хубаво ръководство, поздравления.
    Струва ми се, че повечето бъдещи уеб мастъри вероятно биха били по-щастливи, ако имат възможност да подготвят снимките си за публикуване offline. Използването на уеб приложение като Picnik несъмнено изисква повече ресурс.
    Први сте, че Adobe Photoshop е неоправдано скъп за такъв род прости операции. Може би добър вариант е Adobe Photoshop Elements (http://www.adobe.com/products/photoshopelwin/), който е на цена под $100, а и често идва като безплатен продукт при покупка на дигитален фотоапарат.
    Със сигурност има и напълно безплатни програми за обработване на изображения за уеб: питайте Google.

    Успех!

  2. Има има :) Прилагам едно кратко списъче с линкове към няколко напълно безплатни, уеб базирани приложения за обработка на картинки в реално време:

    1) http://www.myimager.com/

    2) http://snipshot.com/

    3) http://www.webbild.com/default.asp?pageid=13291

    4) http://pixenate.com/

    5) http://www.gifworks.com

    Надявам се да са в помощ на бъдещите (а и настоящи)собственици на уеб сайтове, потящи се над сложните системи за управление на съдържанието.

  3. Симеон, мерси за добрия коментар.

    Да, безплатни offline редактори има доста. Лично аз смятам, че са малко по-комплицирани от необходимото за начинаещи.

    За пълнота, ето няколко безплатни offline програми за обработка на изображения:

    1) http://www.gimp.org

    2) http://www.kanzelsberger.com/pixel/

    3) http://www.freeserifsoftware.com

    4) http://www.getpaint.net

    5) http://vicman.net/vcwphoto

    6) http://www.ultimatepaint.com

    Аз съм пробвал само GIMP, не лоша програма. Останалите пробвайте на свой риск.

  4. [...] Преди известно време публикувахме едно скромно но много полезно ръководство за обработване и подготвяне на изображени…. [...]

Коментирай