Photoshop 101: въведение за уеб разработчици

Въведение

Често, когато работим като уеб разработчик, трябва да интегрираме шаблони. Те могат да бъдат от Photoshop или друг софтуер. В тази статия ще разгледаме основите на Photoshop за уеб разработчици.

Това съдържание първоначално е написано за семинар за DAMDigital Лондон.

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

Издаден е през 1988 г. и се превърна в индустриален стандарт за графичен софтуер.

Можете да изтеглите безплатна пробна версия на Photoshop на уебсайта на Adobe.

Работно пространство

Работното пространство на Photoshop е модулно, така че можете да го адаптирате в зависимост от работата, която вършите. Някои работни области по подразбиране вече са настроени във Photoshop. В тази статия използвам Graphic and Webтази. За да преминете към това работно пространство, влезте в Window/workspace/Graphic and Web.

Нека да разгледаме нашето работно пространство:

  • A - Лента с менюта : Тук ще намерите повечето опции за Photoshop.
  • B - Лента с опции : Тази лента ще ви даде всички опции за избрания в момента инструмент.
  • C - Кутия с инструменти : Този панел съдържа всички налични инструменти от Photoshop. Свързаните инструменти са групирани заедно и можете дълго да щракнете върху един от тях, за да видите всички инструменти.
  • D - панели : Това е мястото, където сте си основни панели се отварят, като например Layers, Historyи така нататък. За да отворите панел, просто влезтеWindow/(Panel that you want to open)

Създайте нов файл

Когато създавате нов файл в Photoshop, първо трябва да знаете за какъв носител ще се използва дизайнът - тоест ще се използва ли за екран (уеб, филм или видео) или за печат?

В зависимост от отговора на този въпрос ще трябва да промените стойността на PPI (пиксели на инч).

Пиксели на инч (PPI) е измерване, използвано за определяне на разделителната способност на компютърния дисплей. Тази метрика оценява качеството на картината / изображението, което дадено изчислително или изходно дисплейно устройство може да покаже. Пикселите на инч са известни още като плътност на пикселите. Techopedia

За печат обикновено се нуждаете от 300PPI, но всъщност това зависи от принтера и размера на отпечатания документ. Трябва също да промените цвета си на CMYK, но отново това зависи от начина на отпечатване на вашия документ. Ако искате да научите повече за RGB и CMYK цветовете, вижте тази статия.

За екрани и мрежа? Имате нужда от 72PPI и RGB цвят. След това трябва да посочите размера на екрана си. Бих препоръчал да проектирате първо за мобилни устройства, след това таблети и настолни компютри.

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

Сега ще разгледаме съществуващ .psdшаблон и ще работим с него, за да разгледаме Photoshop.

Можете да изтеглите и отворите този PSD шаблон от Luis Costa.

Слоеве

Една от основните характеристики на Photoshop са слоевете . Слоевете са като купчина листове и можете да виждате през прозрачни области или области с ниска непрозрачност (частично прозрачни).

Можете да отворите панела на слоя в Window/Layers.

Най-горният слой в този панел ще бъде поставен върху всички останали слоеве отдолу. Слоевете могат да бъдат организирани и в папки. Важно е правилно да именувате слоеве и папки. Това ще помогне по време на интеграцията.

До всяка папка и слой имате икона на око. Това ви позволява да превключвате тяхната видимост.

Вашият PSD може да има много слоеве и документи. Един от начините за бързо намиране на слой е да изберете move tool (v). Щракнете с десния бутон върху платното, където искате да намерите вашия слой. Ще получите всички слоеве в областта, където сте щракнали с десния бутон. Като щракнете върху един, той ще избере този слой във вашия панел на слоя.

Кутия за инструменти

Photoshop се доставя с много инструменти. Ще ви покажа няколко полезни, които ще ви помогнат?

Първо, ако просто инсталирате Photoshop CC 2018, ще трябва да възстановите всички инструменти. Така че отидете в Edit > Toolлентата и кликнете върху бутона Restore Defaults.

Ще видим някои от най-полезните инструменти, които бихте използвали за интегриране на шаблон:

A - Инструменти за избор

  • Преместване : Позволява на потребителя да премества слой около платното. Както видяхме по-рано, той може да се използва и за намиране на слой, ако щракнете с десния бутон върху вашето платно.
  • Правоъгълна рамка : Този инструмент се използва за избор на област от платното за копиране и поставяне, попълване и т.н. Може да се използва и за измерване. Когато вашият избор приключи, можете да намерите размера на избраната област в Window/Info. Може да се наложи да промените единицата по подразбиране в Photoshop, Edit/preferences/general/Unit & Rulersслед което да зададете мерните си единици на пиксели.

B - Инструменти за изрязване и нарязване

  • Изрязване : Този инструмент може ... да изреже изображение?. В настройките на инструмента (лентата с опции) можете да зададете пропорция, която искате да запазите.

В - Измервателни инструменти

  • Пипетка : Пипецът ви позволява бързо да получите цветова справка във вашия дизайн. Просто щракнете там, където искате цвета. След това в долната част на вашата кутия с инструменти цветът на преден план ще се промени на избрания цвят. Ако щракнете върху цвета на преден план, той ще отвори color picker window. Оттам можете да получите стойността на вашия цвят.
  • Color Sampler : Когато интегрирате вашия дизайн, може да се наложи да изберете няколко цвята. Ще използваме информационния прозорец отново Window/Info. Този инструмент ни позволява да създадем цветен семплер. Просто кликнете върху областта на изображението, от която искате да получите цветовете. Ще получите всеки цвят в информационния панел. Можете да промените типа цвят на уеб, като щракнете върху иконата Пипетка под номера.
  • Линийка : помага ви да измерите вашия шаблон. Цялата информация ще се появи във вашия информационен прозорец. Поддържайте Shiftпри измерване, така че линийката ви да остане права. Можете също така да получите ъгли.

G - Навигационен инструмент

  • Ръчно : Този инструмент ви помага да заобиколите платното. Можете да получите достъп до този инструмент по всяко време, като задържите интервала и го плъзнете с мишката.
  • Мащабиране : Позволява ви да увеличавате и намалявате мащаба (можете да Ctrl+ +или Ctrl+ -също).

Ръководства

Както може би сте забелязали при отварянето на нашия PSD файл, имаме няколко зелени линии в нашия шаблон. Те са водачи. Те са основно помощници, които ще ви помогнат да изградите или измервате нещата около вашето платно.

Можете да преместите съществуващите водачи с помощта на move tool(v).

За да създадете нови ръководства, ще трябва да отворите линийката си: View/Rulerили Ctrl+ R. Линийката ще се появи във вашето работно пространство. След това от линийката можете да плъзнете нов водач във вашето платно.

За да премахнете водач, използвайте move tool(v) и поставете водача обратно в линията.

За да скриете и покажете всичките си водачи, можете просто да използвате Ctrl+ Hили да отидете на View/Extras.

Умни обекти

Какво представляват интелигентните обекти?

Интелигентните обекти са слоеве, които съдържат данни от изображения от растерни или векторни изображения, като например Photoshop или Illustrator файлове. Интелигентните обекти запазват съдържанието на изображението с всички оригинални характеристики, което ви позволява да извършвате неразрушаващо редактиране на слоя. Adobe

Интелигентните обекти могат да бъдат разпознати във вашите слоеве, когато те имат следната икона в своите миниатюри:

Умните обекти са наистина удобни, ако работите с изображения от векторен тип (SVG, EPS, AI), но са полезни и с други сложни растерни файлове.

Нека се опитаме да импортираме интелигентен обект в нашия PSD. Изтеглете SVG файл от flaticon. За да импортирате нашия SVG в нашето платно, просто плъзнете файла в платното. Вече можем да редактираме SVG в илюстратор или друг векторен софтуер, като щракнем двукратно върху миниизображението или на нашия интелигентен обект. Промените ще се появят в нашия PSD.

Умните обекти обаче могат да направят и повече от това. Ако искате да научите повече за тях, вижте 10 неща, които трябва да знаете за интелигентните обекти в Photoshop.

Експортни активи

Първо, само напомняне, че Photoshop е растерна програма, а не векторна програма. Това означава, че „не можем“ да експортираме SVG файлове от Photoshop. За да направите това, ще трябва да експортирате тези видове файлове например от Illustrator или Inkscape.

В мрежата искаме да имаме леки файлове с изображения. За фотография бихме използвали компресиран .jpgфайл. Ако трябва да използвате прозрачност (алфа канал), ще използваме .pngфайл. За анимирано изображение бихме използвали .gif. Ако имате нужда от векторно изображение (например икони), най-добре е да експортирате файла си като .svg. Ако искате да имате повече информация за всички файлове, налични в Photoshop, можете да проверите „файлови формати“ на уебсайта на Adobe.

Експортирайте нашето платно

За да експортирате платното, просто изпълнете следните стъпки:

  1. Отидете на File/Export/Save for Web
  2. Изберете файлов формат
  3. Изберете размера на изображението
  4. Изберете качество
  5. Запазете

Експортирайте само актив от платното

Вероятно ще трябва да експортирате някои активи на вашия шаблон.

Нека експортираме стрелката наляво във въртележката на продукта:

Използвайки инструмента за преместване, ще намерим нашия слой. Щракнете с десния бутон върху стрелката и изберете слоя Arrow Left. Сега просто щракнете с десния бутон върху този слой в панела на слоя. Изберете export asи изберете типа на файла, от който се нуждаете.

Също така можем да експортираме папки.

Действия

Какво е действие във Photoshop?

Действието е поредица от задачи, които възпроизвеждате в един файл или група файлове - команди от менюто, опции на панела, действия на инструмента и т.н. Например можете да създадете действие, което променя размера на изображението, прилага ефект върху изображението и след това записва файла в желания формат. Adobe

Тази функция е наистина удобна, ако искате да преоразмерите партида изображения в мрежата!

Нека създадем ново действие за изрязване на изображение и експортиране на това:

  1. Изтеглете куп изображения от //unsplash.com/
  2. Отворете едно от тези изображения
  3. Отворете Actionsпанела Window/Actions,,
  4. Създайте ново действие, като щракнете върху иконата Създаване на ново действие (Това отляво на иконата на кошчето). Нека назовем това действие Експортиране за уеб - име на клиента.
  5. Сега записваме нашето действие. Бутонът за запис ще бъде червен и можете да спрете записа, като щракнете върху иконата за спиране (квадратна икона вляво) /
  6. Изберете иконата за изрязване и задайте съотношението на 1x1 и изрежете изображението /
  7. Сега искаме да експортираме нашето изображение File/Export/Save for Web,, изберете JPG, качество 50% и ширина 500px.
  8. Щракнете върху запазване и изберете целевата папка.
  9. Затворете изображението си, без да го запазвате.
  10. За да спрете записа, щракнете върху иконата за спиране (квадратна икона вляво).

Вече имаме нашето действие, така че можем да отворим изображение и просто да „възпроизведем“ нашето действие, като кликнете върху бутона за възпроизвеждане.

Ако искаме да приложим действието си към група изображения, просто изпълнете следните стъпки:

  1. Отидете на File/Automate/Batch
  2. Изберете Sourceпапката.
  3. Изберете нашето действие
  4. Кликнете върху Ok

И voilà! Всички ваши изображения са в папката за експортиране.

Надявам се да ви е харесало това малко въведение в Photoshop 101 за уеб разработчици?. Ако искате да имате версия 102, кажете ми какво бихте искали да знаете или да прочетете повече за.

  • @vince_umo
  • vincent-humeau.com