Як "полегшити" картинку для інтернет банера?
Казимир Малевич. Піксел в масштабі 10 000: 1
Відома картина - домовився з одним про баннерообменной, намалював офигительно (!) Картинку, а вона, гадина, важить 300 кіло і вантажиться по півгодини.
Зрозуміло, що толку від такого банера ніякого - відвідувач ні за що не буде чекати закінчення завантаження.
Значить, картинку треба полегшити. Давайте розберемося, як це зробити.
Інструкція
Що вам знадобиться:
- Adobe PhotoShop (бажано не нижче CS2)
1 крок
Як намалювати картинку, статичну або анімовану, розбирати не будемо - це тема для іншої інструкції. Давайте полегшувати вже готову.
Тут є 2 шляхи:
Або знизити розмір файлу за рахунок зменшення кількості квітів, або прибрати згладжування при колірних переходах.
Будемо вважати, що картинка статична.
Спочатку переконаємося, що розмір картинки точно відповідає розміру місця під наш банер.
Для цього в меню "image" (зображення) виставимо розмір зображення в пікселах (важливо!). Це верхня частина вікна "Image size" (розмір зображення) (Alt + Ctrl + I).
УВАГА !!! На нижню частину цього вікна ми не дивимося взагалі!
Тобто, якщо розмір банера у нас, наприклад, 420 на 80 (Один із стандартів), то ширину (width) ми виставляємо саме 420 PIXELS, а висоту (height) саме 80 PIXELS.
Виставили. І наша картинка неймовірно сплющилася (або навпаки, витягнулася). Блін ... У сенсі, особи як млинці. А букви взагалі не читаються.
Виходить, ми підемо іншим шляхом.
2 крок
Обрізка.
Щоб змінити розмір, не змінюючи пропорції, картинку слід обрізати в потрібні параметри.
Як це?
Зараз поясню. Вибираємо інструмент "crop" (обрізка) (клавіша "С") Він якраз виділений на малюнку. В полях "ширина" і "висота" виставляємо потрібні нам параметри. Зверніть увагу! Параметри треба виставити в пікселах (px)
Після чого проводимо по нашій картинці по діагоналі зліва направо.
Полкартінкі залишилися за кадром? Треба було думати про розміри раніше! Скасовуємо (Ctrl + Z). Перекомпоновувати елементи картинки, щоб все вкладалося і повторюємо процедуру.
3 крок
Власне стиск.
Тут є 2 варіанти: Або зберегти картинку у форматі JPEG (Jpg), або перевести її в GIF.
JPEG зберігає вихідні кольору, але при сильному стисненні геть ліквідує плавні переходи між квітами. Звідси ці неприємні світло-сірі плями навколо контурів, а при ДУЖЕ сильному стисненні - пикселизация, що перетворює обличчя в набір кольорових плям.
GIF - той взагалі працює тільки в системній палітрою (до 256 кольорів), зате дозволяє створювати анімовані картинки (ті самі гифки)
Давайте спробуємо зберегти кольору.
У меню "file" (файл) вибираємо "save as" (зберегти як) (Ctrl + Shift + S). У вікні збереження відзначаємо формат (jpg) і вибираємо місце збереження.
Все зробили, натиснули "зберегти" і побачили меню стиснення. Поперек всього меню проходить бігунок, графічно відображає ступінь стиснення. Праворуч / внизу від нього вказаний вийшов розмір файлу.
Зрозуміло, що чим менше цей розмір, тим краще. АЛЕ! Зверніть увагу на картинку. Якість самої Катринки на основному робочому столі програми, тієї самої, яку ми зберігаємо, змінюється з кожним рухом бігунка. Треба домогтися гармонії: мінімального розміру при максимальній якості.
4 крок
Зробимо GIF. У анимированной зображенні взагалі немає інших варіантів.
У меню "file" (файл) вибираємо пункт "Save for web and devices" (зберегти для веб) (Ctrl + Alt + Shift + S). Вибираємо формат GIF (На картинці зазначено, де) і кількість квітів. Слід врахувати, що чим більше вибрано квітів, тим важче Катринка. Якщо гифка графічна, без елементів фото, її краще зробити спочатку з меншою кількістю квітів (16 наприклад).
Тепер вибираємо ім'я файлу і зберігаємо.
Все готово.
Як зробити фото для web сторінки? таку квітку вийшовЯкщо ви хочете розмістити своє фото, або фото квітки, що представляє вас на вашій Web сторінці, а фотографії, на яких ви виглядаєте краще за всіх, тільки групові, не біда, за допомогою Photoshop-а це справа поправимо. Головне є…
Як зробити анімовану картинку або як зробити анимашку. Що вийшло в мене.Не можете вибрати, яку картинку поставити на заставку? Зробіть анимашку. Детальна інструкція як Зробити анимашку.ІнструкціяРівень складності: НескладноЩо вам знадобиться:ІнтернетКартинки не менше 21 крокВиберемо картинки. Вони…
Як прибрати у фотографії фон? (Photoshop) Прибираємо фон з фотографії, або скачав картинки!ІнструкціяРівень складності: ЛегкоЩо вам знадобиться:Photoshop. у мене - версія CS3Стандартний набір інструментівПрямі руки і трохи часу1 крок (Будуємо з батьком дачу)))Беремо фотографію (завантажуємо…
Як зберігати картинки з інтернету у себе на комп'ютері. це нескладно)Дуже часто трапляється, що треба завантажити ту чи іншу картинку з інтернету і надіслати другу або зберегти у себе і використовувати де-небудь.ІнструкціяРівень складності: Легко1 крок ось такВідкрита сторінка з картинкою, яку ви хочете…
Як зробити юзербар? Їх величезна безліч ...Юзерба? Р (англ. Userbar) - графічне зображення, призначене для розміщення в підписі на веб-форумах, інтернет-конференціях та інших засобах інтернет-спілкування. Основною метою розміщення картинки-юзербара є вираз будь-яких…
Як створити стерео картинку (sirds)? Пам'ятаю в 90х коли я вчився в школі в класі так напевно в третьому у мене та й не тільки в мене були зошити на обкладинці яких і знаходилися ці картинки. Ми годинами намагалися розглянути закодоване послання (ну об'єкт "закодований" в картинці) у…
Як зменшити розміри фото без втрати якості? Для зменшення розміру фото без втрати якості користуюся програмою adobe photoshopІнструкціяРівень складності: Легко1 крок Ctrl + O або перетягуємо зображення у вікно PhtoshopВідкриваємо через Adobe Photoshop потрібне нам зображення.2 крок Зверху…
Як зробити професійне меню в вконтакте? Частина 1. Ось що у нас вийде.Частина 1. Посилання на частину 2-http: //yakszrobiti.ru/recipes/16113-kak-sdelat-professionalnoe-menyu-v-vkontakte-chast-2 Ви вже створили групу Вконтакте? Але не знаєте як її оформити ... Тоді ця тема для Вас!…
Як вставити картинку в картинку різними способами? Якщо ви хочете зробити новий аватар для свого облікового запису в соціальній мережі або вставити картинку в картинку для колажу з фото, то ви можете скористатися однією з популярних програм для обробки зображень або онлайн-сервісом в Інтернеті.…
Як зробити аватарку? Я покажу вам як зробити аватарку в photoshop. Вам знадобитися potoshop, картинка або фотографія.ІнструкціяРівень складності: Нескладно1 крок Я взяла цю картинку. Це Лайт.Насамперед потрібно вирішити, з чого ми хочемо зробити аватарку, ця картинка…
Як зменшити вагу фотографії Завжди хочеться поділитися хорошими знімками зі своїми друзями та знайомими. Досить часто, при використанні електронної пошти, нас просять зменшити розмір відзнятих файлів, та й на багатьох сайтах не гребують подібними обмеженнями. Ось і доводиться…
Як змінити розмір фотографії Нерідко при відправці фотографій з дзеркальної камери потрібно змінити розмір зображень. Відправляти друзям 15-20 мегапіксельні знімки об'ємом 30 мегабайт просто безглуздо, та й процес передачі займе велику кількість часу. Втім, можуть виникнути й…
Як накласти картинку на картинку? Поєднання двох картинок в одне зображення набагато складніше звичайної обрізки картинки або склеювання двох зображень в одне. Нерідко хочеться відобразити себе на фоні Ейфелевої вежі або з'єднати 2-3 фотографії улюбленої актриси в одне полотно.…
Як перевести jpg в pdf? Формат JPG на даний момент вважається найпопулярнішим в інтернеті. У ньому вивантажуються практично всі фотографії в соціальних мережах. PDF ж у свою чергу є стандартом для перегляду документації. Наприклад, документи Word-форматів можуть з…
Як зменшити розмір зображення? За допомогою сучасних цифрових камер ви можете отримувати дуже красиві фотографії, яке можна зберігати на диску, передавати на флешці і інших носіях інформації. А ось відправити подібне зображення по мережі Інтернет буде досить проблематично,…
Як зменшити картинку в фотошопі? Сучасні цифрові фотоапарати та сканери мають дуже високим дозволом і створюють зображення, які занадто великі для передачі їх по електронній пошті або для завантаження по мережі Інтернет на форуми і блоги. Вважається правилом хорошого тону стиск…