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

click fraud protection

Една от най-критичните функции, които Photoshop предлага, е Запазване за уеб/устройства особеност.

Защо да го използвате? Докато можете просто да запазите файла си по стандартен метод, като например Файл / Запиши като, функцията Запазване за уеб/устройства прави важни три неща.

  • Той оптимизира размерите на файла (например: 150 px X 150 px), което му позволява да се побере в уеб страниците по-чисто и да изглежда по-добре и по-малко изкривено.
  • Той оптимизира размера на файла (например: 23 kb), което му позволява да се изтегля по-бързо.
  • Той записва във формат RGB (или монитор) за разлика от формата CMYK (печат).

Този инструмент работи чудесно за извеждане на икони в Twitter, профилни снимки във Facebook, продуктови файлове, изображения на блогове и изходни файлове за favicons.

Отворете своя изходен файл

Файл Отворете Photoshop
Файл/Отворете Photoshop.Екранна снимка от Bryan Haines

За да започнете, ще трябва да отидете на Файл/Отвори за да отворите вашия файл. Може да бъде във всякакъв формат – jpg, gif, psd, png или други. Докато Photoshop може да го отвори, можете да го изведете за уеб.

Запазване на вашия файл за уеб

Файл Запазете Photoshop CS5
Файл Запазете Photoshop CS5.Екранна снимка от Bryan Haines

Ще преминем напред към запазването за мрежата, ако приемем, че сте направили каквито корекции се нуждаете. Очевидно е, че ако трябва да редактирате изображението, първо направете това и продължете с тази стъпка по-късно.

Отидете на Файл/Запазване за уеб/Устройства и щракнете. Намира се около средата на падащото меню.

Този процес изобщо не променя вашия оригинален файл. Създавате нов файл. След като завършите този урок и се върнете към оригиналното си изображение във Photoshop, ще трябва да запазите този файл, ако сте направили промени в него. Важно е да кръстите новото си изображение различно от първоначалното. Често просто добавяне _web към името на файла ще работи добре. (пример: filename_web.jpg)

Настройте изгледа за сравнение на 2-Up

Едно до друго сравнение Photoshop CS5
Едно до друго сравнение Photoshop CS5.Екранна снимка от Bryan Haines

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

Ако погледнете в горната част на прозореца, ще видите следните опции: Original, Optimized, 2-Up, 4-Up. За повечето цели 2-Up е това, което ще искате.

Задайте вашия размер за гледане на 100%

Регулиране на изгледа до 100% във Photoshop CS5
Регулиране на изгледа до 100% във Photoshop CS5.Екранна снимка от Bryan Haines

За да сте сигурни, че гледате на 100%, проверете опцията в долния ляв ъгъл на екрана.

Важно е да запомните, че ако гледате изображението си над 100%, то ще изглежда зърнесто или вероятно дори неразгадаемо. Винаги работете с изображението на 100%.

Изберете Размери на файла

Избор на размери на файл във Photoshop CS5
Избор на размери на файл във Photoshop CS5.Екранна снимка от Bryan Haines

Размерите за уеб почти винаги са в пиксели (px). Важно е да се спазват правилните пропорции. До полето с изображение има малко изображение на брънка от верига. Това, което прави, е мащабиране на ширината, когато регулирате височината. Например изображение с размери 600 на 400 пиксела. Ако намалите ширината до 300px, файлът автоматично ще се мащабира до височина от 200px. Ако не е отметнато, изображението ще бъде изкривено.

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

Изберете типа на файла за експортиране

Избор на тип файл за експортиране във Photoshop CS5
Избор на тип файл за експортиране във Photoshop CS5.Екранна снимка от Bryan Haines

В тази опция типът на оригиналния файл няма значение. Можете да изберете какъвто файл ви трябва.

Забележка: за да започнете процеса, ще трябва да кликнете върху изображението вдясно. Изображението трябва да бъде избрано за обработка.

Най-разпространеният е jpg за уеб – това е най-малкият файлов формат, което означава, че се изтегля по-бързо за посетителите на вашия сайт. Ако имате прозрачност, изберете png-24. Ако не знаете какво означава прозрачност, трябва да изберете jpg.

Изберете Качество на изображението

Изберете Качество на изображението във Photoshop CS5
Изберете Качество на изображението във Photoshop CS5.Екранна снимка от Bryan Haines

Всяка от трите опции за jpg (високо, средно, ниско) има предварително зададени настройки за качество – всички те могат да се регулират ръчно. Ако гледате на 100%, можете да решите от какво качество се нуждаете. За да регулирате нивото на мащабиране, вижте стъпка 5. Изображението ще изглежда по същия начин онлайн, както в прозореца за визуализация.

Ако сте избрали нещо различно от jpg, можете да пропуснете тази стъпка.

Запазете вашия файл

Запазете вашия файл във Photoshop CS5
Запазете вашия файл във Photoshop CS5.Екранна снимка от Bryan Haines

След като направите необходимите корекции, вие сте готови да запишете файла. Щракнете върху „Запазване“ и изберете името на папката и файла, които искате за това ново изображение.

Честито! Вашият нов файл е готов за използване онлайн.

Как да работите за рекламна агенция

Премерили сте плюсовете и минусите и сте стигнали до заключението, че кариерата в рекламата е подходяща за вас. През 50-те и 60-те години беше сравнително лесно да си намериш работа в добра рекламна агенция и бързо да се изкачиш в йерархията, ако...

Прочетете още

9 съвета за студенти, които да им помогнат да постигнат целите си

Колежът изисква голямо ангажиране на време и пари и е важно да се извлече максимума от опита. Независимо дали целта ви е да спечелите необходимата степен за избрана кариера, да се подготвите за следдипломна програма или нещо друго, важно е да раз...

Прочетете още

Как да се изправим пред неочакваните предизвикателства на стажа

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

Прочетете още