мащабирайте

Когато се позоваваме на мащабирайте изображения с 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 dpi, можете да пропуснете тази стъпка.

След като изображението се отвори в 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 screen path .

Мащабиране, преоразмеряване или преоразмеряване на изображение

След като имаме изображение със 72 dpi, време е да коригираме размера. Поглеждаме отново в горното меню Изображение> Размер на изображението .

Предишният прозорец ще се отвори отново.

С отметнати Пропорции за ограничаване променяме пикселите на изображението за тези, които искаме. За нашия уебсайт се препоръчва те да са с ширина 800 или 900 px.

Както имаме избра опцията за ограничаване на пропорциите промяната на ширината автоматично ще регулира измерването на височината.

Даваме добре и ще завършим процеса на мащабиране на изображението.

Лесно е да се интересувате и от:

Запазете преоразмереното изображение

След мащабиране на изображенията с Photoshop, можем да ги запазим само за мрежата. Ще го направим от горната лента с инструменти с пътя Файл> Запазване за мрежа и устройства .

В панела ще трябва да изберем в кой тип файл искаме да запазим изображението.

Ако има прозрачни области или текст, ние ще го запазим в .png (без компресия), ако това е нормална снимка, ще го направим в .jpg, като му придадем качество между 50% и 60%. Ще намалим теглото на изображението, следователно ще го оптимизираме за мрежата.

Запазваме и вече имаме файла, съхранен с новия размер.

Започнахме с изображение с тегло 18,2 мегабайта и при мащабиране в резултат имаме един от само 90,7 KB, който ще изглежда достатъчно добре и ще се зарежда по-бързо.

За да получите правилната компресия, преди да качите изображенията на вашия уебсайт, използвайте онлайн инструмента Tinypng, който ще намерите в този друг урок.

Ако след тази статия съм събудил любопитството ви към програмата, изтеглете този безплатен курс на Photoshop. Той ще ви предостави други инструменти, с които да манипулирате изображения, предназначени за вашия уебсайт.

Ако сте харесали споделете

Повече за автора

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

Посвещавам се на уеб дизайн Валенсия, и имам страст към инструментите за графичен дизайн, както и споделянето на съвети за уеб дизайн под формата на съвети и уроци "за всички аудитории".