зображення

Коли ми маємо на увазі масштабуйте зображення за допомогою Photoshop ми говоримо про змінити розмір або змінити розмір зображень, хоча і в цьому випадку теж ми зменшимо роздільну здатність відповідно до потреб веб-сторінок.

Це один з перших кроків у процесі адаптація зображень до веб-сайту або блог.

Як змінити розмір зображень за допомогою Photoshop, Крім того, не маючи жодного уявлення про використання програми, це допоможе нам при спробі розмістити наш веб-сайт у пошукових системах, ми зосередимося на цій проблемі, хоча очевидно, що масштабування зображення не завжди буде для цього призначення.

Photoshop для масштабування зображень

Photoshop - це сучасна програма для редагування фотографій і цей випадок не буде відрізнятися, тому вам потрібно буде встановити його на свій комп’ютер, щоб слідувати підручнику.

Якщо у вас немає програми, ось посилання, з якого ви можете завантажити Photoshop у його пробній версії та користуватися ним безкоштовно протягом 30 днів.

Відкрийте зображення для масштабування з Photoshop

  1. Відкрийте програму Photoshop.
  2. Угорі ви побачите панель інструментів, а зліва - верхній пункт меню Файл .
  3. Якщо натиснути на нього, з’явиться випадаючий список, в якому вам доведеться шукати Open. З'явиться спливаюче вікно, де ви зможете переходити, поки не знайдете та не відкриєте потрібну фотографію.
  4. Клацніть на зображення, яке вас цікавить, і натисніть кнопку Відкрити .

Ще два швидких способи відкрити зображення у Photoshop:

  • Перетягування файлу з папки із зображеннями до Photoshop.
  • Клацнувши правою кнопкою миші, розмістивши вказівник на фотографії. У спадному меню виберіть: Відкрити за допомогою> Photoshop .


Отримуйте новинки щомісяця

та дізнайтеся більше про теми, які вас цікавлять, безпосередньо зі своєї скриньки електронної пошти.

Масштабуйте зображення за допомогою Photoshop

Для прикладу ми починаємо із зображення 19,200px x 10,880px при 300 dpi та вазі 18,2 Мега.

Звичайно, як ми вже бачили в статті про оптимізацію веб-зображень, вона занадто велика для використання на веб-сторінці.

Робота масштабування зображень за допомогою Photoshop матиме два етапи:

Знизьте роздільну здатність зображення

Якщо ваше зображення має 72 точок на дюйм, ви можете пропустити цей крок.

Коли зображення відкрито у Photoshop, подивіться на верхню панель інструментів: Зображення> Розмір зображення .

Вийде таке вікно, яке дозволить вам змінити розмір та роздільну здатність зображення.

Переконуючись у тому, що перевірено Resample Image, ми переходимо з роздільної здатності 300 dpi до 72 dpi.

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

Даємо нормально і бачимо отриманий результат.

Щоб побачити його в реальному розмірі, натисніть клавіші Control + numpad 1 (1 на цифровій клавіатурі) на ПК або Command + numpad 1. на Mac. Ви також можете зробити це у верхньому меню інструментів у меню Перегляд> Реальні пікселі .

У прикладі зображення все ще занадто велике! Воно має розмір більше 4500 пікселів!.

Щоб зображення відповідало екрану, натисніть клавіші Control + numpad 0 на ПК або Command + numpad 0 на Mac. Або перейдіть до верхнього меню в меню View> Fit on path .

Масштабуйте, змінюйте розмір або змінюйте розмір зображення

Коли у нас є зображення із роздільною здатністю 72 dpi, настав час налаштувати розмір. Знову переглядаємо у верхньому меню Зображення> Розмір зображення .

Попереднє вікно знову відкриється.

Перевіривши Пропорції обмеження, ми змінюємо пікселі зображення на потрібні. Для нашого веб-сайту рекомендується, щоб вони мали ширину 800 або 900 пікселів.

Як ми маємо вибрано опцію обмеження пропорцій зміна ширини автоматично регулює вимірювання висоти.

Ми даємо нормально, і ми закінчимо процес масштабування зображення.

Вас легко цікавить також:

Збережіть розмір зображення

Після масштабування зображень за допомогою Photoshop ми можемо зберегти їх лише в Інтернеті. Ми зробимо це з верхньої панелі інструментів із шляхом «Файл»> «Зберегти для Інтернету та пристроїв» .

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

Якщо на ньому є прозорі області або текст, ми збережемо їх у форматі .png (без стиснення), якщо це звичайна фотографія, ми зробимо це у форматі .jpg, надавши йому якість від 50% до 60%. Ми зменшимо вагу зображення, тому оптимізуємо його для Інтернету.

Ми зберігаємо, і ми вже маємо файл, збережений у новому розмірі.

Ми почали з зображення, яке важило 18,2 мегабайт, і при масштабуванні у нас вийшло одне лише 90,7 КБ, яке буде виглядати досить добре і швидше завантажуватися.

Щоб отримати належне стиснення перед завантаженням зображень на свій веб-сайт, скористайтеся онлайн-інструментом Tinypng, який ви знайдете в цьому іншому посібнику.

Якщо після цієї статті я викликав у вас цікавість до програми, завантажте цей безкоштовний курс Photoshop. Він надасть вам інші інструменти, за допомогою яких можна маніпулювати зображеннями, призначеними для вашого веб-сайту.

Якщо вам сподобалося поділитися

Детальніше про автора

Ернесто Баррачіна

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