<
  • Главная
Статьи

робимо аву

Цифрові фотокамери зараз всюди. У кожному будинку, і навіть майже в кожному телефоні. Відповідно, фотографією Зараз не займається тільки ледачий. Нині це, можна сказати, норма життя. Анітрохи не менше народу ходить на всілякі сайти, форуми, блоги та інші соц. мережі. Це теж норма. Ну а на форумах прийнято використовувати аватарки - маленькі графічні мініатюри, які, по-ідеї, повинні так, чи інакше характеризувати свого власника. Більшість форумів дозволяють як використовувати аватарки з "стандартного набору", так і вантажити в якості аватара картинку свого власного виготовлення - ось тут-то, згадавши першу фразу даного абзацу про достаток цифрової фототехніки на руках у населення, логічним було б припустити, що багато хто виявив бажання б використовувати в якості аватарки свої власні фотороботи.

Та ось біда: сучасні фотокамери, навіть ті, що стоять в самому зубожілому телефоні, видають картинку, розміри якої в пікселах виражаються чотиризначними числами, а розмір файлу такого фото може досягати сотень, і навіть тисяч кілобайт. Тоді як вимоги до картинки аватара зазвичай дуже жорсткі: розміри не більше, ніж 100..200 пікселів по обидва боки, "вага" - не більше 10..20 кБайт. І не було б це жодною проблемою, якби дуже багато користувачів Інтернету не мали б тільки самі базові знання в плані роботи з графікою.

Спробуємо заповнити цю прогалину знань - хоча б в плані приготування аватарок. Що нам для цього потрібно?

По-перше, звичайно ж, фотографія, на якій є те, що нам хотілося б помістити на аватарку. Якщо ви хочете аватарку з власної фізіономією, то вас не повинно бентежити, що фото групове, і крім вас, на ньому присутні ще два десятка гавриків, які вам на аватарке густо не впали - це зовсім не біда! Згадайте, що фотокамера видає картинку 3000х2000 пікселів, а аватарка буде розміром якихось жалюгідних 120х120: від великого маленьке можна обрізати! Вас більше повинно турбувати, щоб у вашій фізіі на фото було видно все очі, рожа її привітно посміхалася, а ззаду не стирчало ніяких стремних предметів, так як розповідати про те, як правити фотографії та прибирати з них компрометуючі подробиці я зараз не буду. Вибирайте будь-яку картинку, яка вам подобається - своє улюблене фото, фото улюбленого кіногероя, мультяшний кадр, фото домашнього улюбленця, та хоч навіть і піззяж або квяточек! Головне - щоб картинка вам подобалася. Ну і намагайтеся уникати картинок, що містять багато-багато-багато дрібних деталей: такі картинки по-перше дуже погано "скорочуються" в маленький файл, а по-друге - на аватарке всі дрібні деталі стануть ще дрібніше, і можливо - просто зіллються в нерозбірливу кашу.

Для прикладу я вибрав три своїх фото, з яких і спробую зробити по картинці, придатної для завантаження в якості аватарки:

Для прикладу я вибрав три своїх фото, з яких і спробую зробити по картинці, придатної для завантаження в якості аватарки:

Тепер - по-друге. А по-друге, нам знадобиться програма, яка вміє обробляти графіку. Таких програмок дуже багато насправді - я спробую показати, як використовувати три безкоштовні IrfanView і GIMP , А також знаменитого монстра фото і видавничої справи, універсальний графічний редактор Adobe Photoshop . Всякий раз я буду припускати, що вже базовими навичками роботи з програмами ви володієте - тобто вмієте відкрити в програмі потрібний файл, вибрати потрібний пункт меню і виділити мишкою потрібну область; я буду звертати вашу увагу тільки на ті моменти, знання яких критично для вирішення конкретного завдання створення аватари з довільного фото.

А завдання це має на увазі виконання трьох дуже простих процедур.

По-перше, вихідне зображення прямокутне, а можливо, що і містить багато зайвого, що нам на аве не потрібно. А тому фото спочатку потрібно обрізати (відкадрувати). Хоча "квадратно-гніздовий" місце під аватарку на форумі і задає лише обмеження за розмірами, але не форму картинки, з моєї точки зору просто нерозумно не скористатися всією наданою нам площею (адже її і так мало!), А тому будемо робити аватарку квадратної.

По-друге, вихідне фото величезне, а нам потрібен квадратик зі скромними розмірами 120х120 (це вимога конкретного даного форуму), а тому обрізане фото потрібно зменшити ( "ресайз").

Ну і по-третє, нам потрібен файл графічного формату, розміром не більше 10 кбайт (це теж вимога форуму Харків-Туриста), а тому результуючу картинку потрібно записати в форматі, який передбачає упаковку даних. Для повнокольорових фотографій найкраще підходить формат JPEG, а тому будемо наші Ави зберігати в jpg-файли.

Почнемо з самого простого.

IrfanView - це, взагалі-то, ніякий не графічний редактор. Це хороша і потужна програма для перегляду фотографій. Крім фото, вона вміє показувати відео, програвати музику і ще багато чого іншого. Однак крім функцій чисто перегляду фото, IrfanView містить і деякі функції редагування зображень. Нам зараз знадобляться з них всього дві: кадрування і зміна розміру.

Завантажте вибране фото в Irfan - воно тут же відобразиться на екрані. Якщо тепер "протягнути" курсором мишки по картинці, утримуючи ліву кнопку, в віконці з зображенням буде виділена прямокутна область.

Розмір її (в пікселах) виводиться в заголовку програми поруч з ім'ям файлу

Розмір її (в пікселах) виводиться в заголовку програми поруч з ім'ям файлу

Бачите "710 х 710" на зображенні? Нам, власне, неважливо, які там зараз будуть стрибати ціферькі - головне стежити, щоб вони були рівні один одному. Ну і, зрозуміло, за тим, щоб всередину рамки потрапило саме те, що ми хочемо розмістити на аватарі. Змінити розміри області виділення можна, "тягаючи" її кордони мишкою, а її положення на зображенні - притопивши клавішу "Shift" на клавіатурі і орудуючи клавішами-стрілками. Якщо масштаб відображення картинки на екрані недостатній для того, щоб точно виділити те, що вам потрібно - натисніть "+" на клавіатурі; якщо ж все, що хочете виділити не поміщається на екрані - натисніть там же "-". Виділили? Простежили за тим, щоб виділення було квадратним? Чудово! Тепер натискаємо на клавіатурі комбінацію клавіш "Ctrl + Y" - і все зайве тут же обрізається!

Тепер натискаємо на клавіатурі комбінацію клавіш Ctrl + Y - і все зайве тут же обрізається

Аватар майже готова - залишилося її тільки зменшити. Для цього натисніть на клавіатурі комбінацію "Ctrl + R" - на екрані з'явиться діалогове віконце:

Для цього натисніть на клавіатурі комбінацію Ctrl + R - на екрані з'явиться діалогове віконце:

Все, що потрібно зробити - це встановити "галочку" "Set new size", і трохи нижче задати 120 для ширини і висоти картинки. Решта галочки можна не чіпати, хоча краще, якщо буде стояти галочка "Resample (better quality)", а трохи нижче в рядку фільтра буде вибрано "Lanczos filter (slowest)". Точно так, як на картинці вище. Після чого - тиснемо "Ок", і картинка зменшиться до потрібних нам розмірів - можливо, що доведеться кілька разів жати сірий "+", щоб побачити її в натуральному вигляді. Після зменшення, картинка зазвичай кілька втрачає чіткість - підвищити різкість можна комбінацією клавіш "Shift + S"; правда, таке збільшення може виявитися і зайвим для настільки дрібної картинки. На будь-якому етапі - обрізка, зміна розміру, збільшення різкості - скасувати останню дію з картинкою можна, натиснувши комбінацію "Ctrl + Z".

На будь-якому етапі - обрізка, зміна розміру, збільшення різкості - скасувати останню дію з картинкою можна, натиснувши комбінацію Ctrl + Z

Все, наша аватарка остаточно готова - тепер її потрібно зберегти. Для цього тиснемо комбінацію "Ctrl + S" (або просто "S" - в даному випадку це не має значення) - з'явиться діалог збереження файлів, що складається з двох віконець.

Для цього тиснемо комбінацію Ctrl + S (або просто S - в даному випадку це не має значення) - з'явиться діалог збереження файлів, що складається з двох віконець

У великому віконці потрібно вибрати папку, ім'я файлу, а також тип "JPEG". А ось в маленькому - повзунком вибрати значення "75" (це якість упаковки картинки - якщо зробити його більше, то файл може перевищити потрібні 10 кбайт, а якщо менше - можуть вилізти артифакти стиснення, які сильно зіпсують картинку), а все "галочки" біля опцій обов'язково прибрати! (Якщо дуже хочеться, можна залишити галочку біля "Save as progressive JPEG" і подивитися, що з цього вийде) Після чого тиснемо "Зберегти" - і наша аватарка буде записана в файл в обрану папку. Відразу ж знайдіть її в Провіднику, або ще де, і подивіться на її розмір: якщо він не перевищує вожделеемие 10 кбайт - мета досягнута, а ось якщо більше - доведеться намагатися зберегти файл по-новій, зменшуючи якість стиснення тим самим повзунком. Хоча не можу не відзначити, що мені поки не траплялося картинок 120х120 точок, які при якості 75 не влізли б в 10 кілобайт - навіть коли спеціально намагався "сконструювати" таку картинку.

Примітка. У старій версії IrfanView (якщо ви полінувалися оновити його) діалог збереження файлу може відкритися і без додаткового віконця з настройками параметрів збереження. Тоді на ньому буде третя кнопочка - "Налаштування" або "Параметри", або "Опції", яка виведе на екран додатковий діалог налаштувань параметрів збереження файлу. Там будуть всі ті ж опції, про які я писав вище.

Чорт забирай, я, звичайно, розумію, що якщо ви таки використовуєте GIMP, то навряд чи ви потребуєте моїх інструкціях по виготовленні аватарки, і "плюсик" в оцінці статті я від вас навряд чи дочекаюся. Бог з ним - все одно напишу - для кумплекту.

GIMP (GNU Image Manipulation Program) - це повноцінний, і дуже потужний графічний редактор. Який, з моєї точки зору, вміє майже все те, що вміє горезвісний Photoshop, але при цьому - абсолютно безкоштовно ... Ну, якщо висловитися трохи обережніше - майже все те, що може понадобітсья нормальній людині.

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

Завантажте картинку в програму. При цьому вона з'явиться в середньому з "плаваючих" віконець. Або панелей - називайте, як вам зручніше. Завантажилася? Відмінно! Тепер зверніть увагу на ліву панельку з інструментами:

Тепер зверніть увагу на ліву панельку з інструментами:

Бачите якусь подобу ножичка в третьому зверху ряду, друга праворуч піктограммка? Це і є потрібний нам інструмент "кадрування". Тикніть в нього мишкою. Піктограммка інструменту відзначиться рамочкою - це значить, що інструмент активований, і їм можна користуватися. Тепер можна мишкою виділити на зображенні прямокутну область - просто затискаємо ліву кнопку мишки в одному кутку, і, не відпускаючи її, тягнемо курсор до другого - слідом за курсором, точно так же, як в Irfan-е, буде тягнутися рамочка виділення:

Тепер можна мишкою виділити на зображенні прямокутну область - просто затискаємо ліву кнопку мишки в одному кутку, і, не відпускаючи її, тягнемо курсор до другого - слідом за курсором, точно так же, як в Irfan-е, буде тягнутися рамочка виділення:

Тут, однак, слід звернути увагу на панель настройки інструменту, яка з'явилася нижче панелі з піктограммка: там з'явився напис "Обрізати", а нижче - кілька опцій, числових полів і рядків вибору. Приберіть все галочки, крім "Затемнити невиділення"; два числових поля "Розмір" показують поточний розмір виділеної області - нагадаю, що потрібно стежити, щоб ці значення були рівні один одному для того, щоб обрізати фото до квадрата. Нюанс: якщо за допомогою мишки важко домогтися цього рівності, то можна просто вбити потрібне числове значення в одне з полів (або в обидва). Розміри області можна змінювати, хапаючи і тягаючи мишкою її краї або кути, а положення її на фото - хапаючи і тягаючи мишкою за середину рамки. Трохи нижче опції "Затемнити невиділення" знаходиться рядок вибору режиму відображення допоміжних ліній; якщо вибрати "Золотое сечение", то в рамці виділення будуть відображені чотири лінії відповідно до "правилом Золотого перетину" (яке придумав, за чутками, сам Леонардо да Вінчі), які можуть допомогти вибудувати гармонійну композицію кадру: вважається, що знімок краще сприймається , якщо сюжетно-важливі деталі розташовуються в ньому на перетині цих самих ліній, а лінію порізонта, стіни будівель і т.п. пустити вздовж самих ліній ... Коротше, у вас є чудова можливість поекспериментувати, і вирішити - чи це так. Хоча при створенні аватарки дана фіча, мабуть, що і зайва.

Коли ви закінчите гратися з виділенням потрібного квадрата з вихідного фото - просто зробіть подвійне клацання на будь-якому місці виділеної області - GIMP обріже і викине все інше. Тепер - саме час зменшити наш фрагмент до необхідного розміру. Для цього потрібно скористатися пунктом "Розмір зображення" з меню "Зображення":

Відкриється діалог:

в якому потрібно встановити ширину і висоту в 120 пікселів (точок растра). Ну а інтерполяцію найкраще встановити в Lanczos, як і в випадку з IrfanView (див. Малюнок). Вибрали - і тиснемо кнопку "Змінити" - розмір картинки тут же стане 120х120 точок.

Якщо вам здається, що картинка втратила чіткість - спробуйте їй цю саму чіткість повернути. Для цього служить пункт "Нерізка маска" з меню "Фільтр -> Поліпшення". При цьому відкриється діалог:

При цьому відкриється діалог:

Перший ( "Радіус") і останній ( "Поріг") має сенс затягнути в самий початок, а ось другим ( "Величина"), тягаючи його приблизно від 0,4 до 1,5, можна домогтися прийнятного збільшення різкості картинки (результат при це відображається тут же, в віконці - якщо, звичайно, устоновлена ​​опція "Перегляд". Домоглися потрібної різкості - натиснули кнопку "Ок" - і картинка остаточно перетворилася в аватарку.

Домоглися потрібної різкості - натиснули кнопку Ок - і картинка остаточно перетворилася в аватарку

Залишилося її тільки зберегти. Для цього, цілком природним чином, служить пункт "Зберегти як ..." з меню "Файл". У першому діалозі просто вибираємо тип файлу, папку, куди його зберегти і ім'я:

У першому діалозі просто вибираємо тип файлу, папку, куди його зберегти і ім'я:

При натисканні на "Зберегти", програма може заявити вам, що ваша картинка-де містить якусь інформацію, кою в обраному форматі зберегти ну ніяк не можна, і потрібно попереднє зведення та копіювання - погоджуйтеся на все! В кінці-кінців, з'явиться друге діалогове віконце, з яким доведеться трохи поворожити:

В кінці-кінців, з'явиться друге діалогове віконце, з яким доведеться трохи поворожити:

Знову-таки, ставимо "Якість" в "75", залишаємо обраної опцію "Оптимізувати", а опції "Зберігати Exif" і "Зберігати ескіз" ОБОВ'ЯЗКОВО прибираємо! На настройки в правій частині панелі можна поки не дивитися - натискаємо "Зберегти", і файл виявляється записаним на диск. Шукаємо його в провіднику або ще де, і дивимося розмір: вклалися в 10 кілобайт - відмінно; не вклалися - знову тиснемо "Зберегти як", і граємося з іншими опціями. По-перше, можна в рядку "Субвиборка" вибрати ту, де написано "Мінімальний розмір файлу". Якщо цього не вистачить - можна спробувати встановити опцію "Прогресивна", потім - погратися з повзунком "Згладжування", і в кінці-кінців - спробувати знизити якість. Повинно допомогти, а як інакше?

Вважаю, у вас CS5. Ну - або, накрайняк, CS4, як той, що зараз переді мною. Картинки скріншотів будуть з російської версії - де зможу, я спробую дати і англійський варіант пунктів меню.

Взагалі, за ступенем креативності, виготовлення аватар за допомогою фотошопу - це приблизно те ж, що глушити кільку за допомогою ядерних торпед. Але якщо ніяких інших торпед, крім ядерних, немає, а кілька знахабніла - то чому б і ні? Тобто якщо ніякого іншого засобу, крім ФШ немає в наявності, то необхідні Ави цілком можуть бути виготовлені і за допомогою фотошопу. Отже - поїхали.

Зрозуміло, що в першу чергу потрібно запустити фотошоп і завантажити в нього фото. Далі, потрібно скористатися інструментом "Обрізати" (який в моїй російської версії чомусь називається "Рамка") для обрізки картинки до квадрата. А що особливо приємно, до речі, так це те, що фотошоп, на відміну від двох попередніх програм, дозволяє обрізку об'єднати зі зміною розміру, скорочуючи кількість потрібних нам операцій з трьох до двох! Потрібний нам інструмент знаходиться, як неважко здогадатися, на палітрі інструментів - вертикальної панелі, зазвичай розташованої в лівій частині вікна програми:

Потрібний нам інструмент знаходиться, як неважко здогадатися, на палітрі інструментів - вертикальної панелі, зазвичай розташованої в лівій частині вікна програми:

На зображенні потрібний інструмент вже активований, про що говорить світла рамочка навколо його піктограмки.

Тепер зверніть увагу на те, що як тільки ви активували інструмент, змінився вигляд панелі налаштувань інструменту, яка знаходиться трохи нижче головного меню програми. Тепер там є поля "Ширина" та "Висота". В які ми можемо вбити потрібні нам значення. Нам потрібна картинка 120 х 120 пікселів? Відмінно, так і пишемо в обох віконцях: 120 пікс. Ось як є, з крапкою в кінці, російськими буквами. Якщо у вас англійська версія, напишіть "120 pix" в обох полях - і в Width, і в Height. Решта поля не чіпаємо, і йдемо з мишкою на картинку - виділяти її шматок. Зверніть увагу, що як би ви тепер не тягали мишку, що виділяється область все одно залишається квадратної! Адже ми тільки-що повідомили фотошопу, що нам потрібен неодмінно квадрат! "Золотого перетину" і інших милиць тут немає - ну так не дуже й хотілося. Виділили що потрібно? Відмінно, клікніть на обрану область двічі - і картинка одночасно і обрізане до квадрата, і зменшиться до 120 точок. Якщо її після цього не видно - натисніть "Ctrl ++" ( "плюс" треба тиснути на додатковій, "цифровий" клавіатурі!) Кілька разів, поки картинка не збільшиться до натурального розміру.

Знову ж - можна збільшити різкість, якщо при зменшенні вона "попливла" (а в фотошопі вона "попливе" майже гарантовано!). Для цього є меню "Фільтр -> Різкість -> Контурна різкість" ( "Filter -> Sharp -> Unsharp mask"):

Движок "Радіус" (Radius) рекомендую встановити в 0,3..0,5; "Поріг" (Tresould) - в 0, а движком "Ефект" (Amount) домогтися необхідної різкості картинки. Домоглися - натиснули "Так" (Ok) - нічого складного.

Власне, аватарка готова. Залишилося її зберегти. Для цього потрібно використовувати пункт меню "Файл -> Зберегти для WEB і пристроїв" (File -> Save for WEB); врахуйте, що просте "Зберегти як ..." не підійде, так як завжди зберігає в результуючому файлі Exif, коментарі, копірайт і ще купу всякої тельбуха, яка для аватарки не потрібна, зате помітно збільшує розмір файлу.

Відкриється приблизно ось такий діалог:

Відкриється приблизно ось такий діалог:

Зліва, на віконці перегляду повинна бути обрана закладка "Optimized" - тоді внизу перегляду буде відображатися розмір результуючого файлу, а в самому вікні ми будемо бачити аватарку саме так, як вона буде виглядати на форумі; праворуч виберіть тип файлу "JPEG"; трохи нижче - якість Quality поставте таке, щоб розмір файлу, який показаний внизу вікна перегляду, не перевищував потрібних 10 кілобайт - тому може допомогти установка опцій "Progressive" і "Optimized", а ось опцію "Embed Color Profile" встановлювати не слід. Коли добилися прийнятного розміру файлу в поєднанні з нормальною якістю картинки - тисніть "Save" - ​​відкриється стандартний діалог вибору папки для збереження і імені файлу, після чого файл з аватарки буде збережений на диску.

Ось, власне, і все, що я хотів сказати.

Повинен сказати, що зробити все це буде набагато швидше, ніж прочитати статтю

Дякую за увагу!

Що нам для цього потрібно?
Виділили?
Простежили за тим, щоб виділення було квадратним?
Завантажилася?
Повинно допомогти, а як інакше?
Але якщо ніяких інших торпед, крім ядерних, немає, а кілька знахабніла - то чому б і ні?
Нам потрібна картинка 120 х 120 пікселів?
Виділили що потрібно?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

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

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

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью