Пхотосхоп 101: увод за веб програмере

Увод

Често када радимо као веб програмер морамо да интегришемо предлошке. Могу бити из Пхотосхопа или другог софтвера. У овом чланку ћемо погледати основе Пхотосхопа за веб програмере.

Овај садржај је у почетку написан за радионицу за ДАМДигитал Лондон.

Адобе Пхотосхоп је софтвер за уређивање растерске графике, што значи да је то програм који омогућава корисницима да креирају и уређују слике.

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

Бесплатну пробну верзију Пхотосхопа можете преузети на веб локацији Адобе.

Радни простор

Пхотосхоп-ов радни простор је модуларан, тако да га можете прилагодити у зависности од посла који обављате. Неки задати радни простори су већ постављени у Пхотосхопу. У овом чланку користим Graphic and Webону. Да бисте прешли на овај радни простор, идите на Window/workspace/Graphic and Web.

Погледајмо наш радни простор:

  • О - Трака менија : Овде ћете пронаћи већину опција за Пхотосхоп.
  • Б - Трака са опцијама : Ова трака ће вам пружити све опције за тренутно изабрани алат.
  • Ц - Кутија алата : Овај панел садржи све доступне алате из Пхотосхопа. Повезани алати су груписани и можете дуго да кликнете на један од њих да бисте видели све алате.
  • Г - Панели : То је подручје где су ваши основни панели отварање, као што су Layers, History, и тако даље. Да бисте отворили панел, само уђите уWindow/(Panel that you want to open)

Направите нову датотеку

Када креирате нову датотеку у Пхотосхопу, прво треба да знате за који медиј ће се дизајн користити - што значи да ли ће се користити за екран (веб, филм или видео) или за штампу?

У зависности од одговора на ово питање, мораћете да промените вредност ППИ (пиксела по инчу).

Пиксели по инчу (ППИ) је мерење које се користи за дефинисање резолуције рачунарског екрана. Овај показатељ процењује квалитет слике / слике који одређени рачунски или излазни уређај за приказ може да прикаже. Пиксели по инчу познати су и као густина пиксела. Тецхопедиа

За штампу вам је обично потребно 300 ппи, али то заправо зависи од штампача и величине одштампаног документа. Требали бисте и боју променити у ЦМИК, али опет то зависи од начина штампања документа. Ако желите да сазнате више о РГБ и ЦМИК бојама, погледајте овај чланак.

За екране и веб? Требају вам 72ППИ и РГБ боја. Затим треба да одредите величину екрана. Препоручио бих да прво направите дизајн за мобилне уређаје, а затим за таблете и рачунаре.

Као веб програмер, можда неће требати да креирате нову датотеку. Велике су шансе да ћете морати да радите са дизајном који су обезбедили веб дизајнери.

Сада ћемо погледати постојећи .psdпредложак и са њим радити како бисмо разгледали Пхотосхоп.

Овај ПСД образац можете преузети и отворити од Луиса Цоста.

Слојеви

Једна од основних карактеристика Пхотосхопа су слојеви . Слојеви су попут снопа листова и можете видети кроз прозирна подручја или подручја са ниском непрозирношћу (делимично прозирна).

Можете отворити плочу слоја у Window/Layers.

Горњи слој овог панела биће постављен преко свих осталих слојева испод. Слојеви се могу организовати и у фасцикле. Важно је правилно именовати слојеве и фасцикле. То ће помоћи током интеграције.

Поред сваке фасцикле и слоја имате икону ока. Ово вам омогућава да пребаците њихову видљивост.

Ваш ПСД може имати пуно слојева и докумената. Један од начина за брзо проналажење слоја је одабир слоја move tool (v). Кликните десним тастером миша на платно где желите да пронађете свој слој. Добићете све слојеве у подручју где сте кликнули десним тастером. Кликом на један, изабраће овај слој на вашем слоју.

Кутија алата

Пхотосхоп долази са пуно алата. Показаћу вам неколико корисних који ће вам помоћи?.

Прво, ако само инсталирате Пхотосхоп ЦЦ 2018, мораћете да вратите све алате. Дакле, идите на Edit > Toolтраку и кликните на дугме Врати подразумеване вредности.

Видећемо неке од најкориснијих алата које бисте користили за интеграцију шаблона:

А - Алати за одабир

  • Премести : Омогућава кориснику да премешта слој око платна. Као што смо раније видели, може се користити и за проналажење слоја ако десним кликом кликнете на своје платно.
  • Правокутни оквир : Овај алат се користи за одабир подручја платна за копирање и лепљење, попуњавање и тако даље. Може се користити и за мерење. Када је одабир завршен, величину изабране области можете пронаћи у Window/Info. Можда ћете морати да промените подразумевану јединицу у Пхотосхопу, а Edit/preferences/general/Unit & Rulersзатим поставите јединице на пикселе.

Б - Алати за обрезивање и исецање

  • Обрезивање : Овај алат може ... обрезати слику?. У подешавањима алата (трака са опцијама) можете да подесите однос ширине и висине који желите да задржите.

Ц - Алати за мерење

  • Капаљка за капке : Капица за капке вам омогућава да брзо добијете референцу боје у свом дизајну. Само кликните где желите боју. Затим ће се на дну кутије са алаткама боја у први план променити у изабрану боју. Ако кликнете на боју у првом плану, отвориће се color picker window. Одатле можете добити вредност своје боје.
  • Узорак боја : Када интегришете свој дизајн, можда ћете морати да одаберете више боја. Поново ћемо користити прозор са информацијама Window/Info. Овај алат нам омогућава да направимо узоркивач боја. Само кликните на подручје слике из које желите да добијете боје. Добићете сваку боју на инфо табли. Тип боје можете променити у веб тако што ћете кликнути на икону Пикача испод броја.
  • Лењир : помаже вам да измерите свој образац. Све информације ће се појавити у вашем прозору са информацијама. Одржавајте Shiftприликом мерења, тако да ваш лењир остане усправан. Можете добити и углове.

Г - Алат за навигацију

  • Рука : Овај алат вам помаже да заобиђете платно. Овом алату можете приступити у било ком тренутку држећи размакницу и повлачећи га мишем.
  • Зоом : Омогућава вам увећавање и умањивање (можете Ctrl+ +или Ctrl+ -).

Водичи

Као што сте могли приметити приликом отварања наше ПСД датотеке, на шаблону имамо неколико зелених линија. Они су водичи. Они су у основи помагачи који ће вам помоћи да изградите или измерите ствари око свог платна.

Постојеће водиче можете да преместите помоћу move tool(в).

Да бисте креирали нове водиче, мораћете да отворите лењир: View/Rulerили Ctrl+ R. Лењир ће се појавити у вашем радном простору. Затим са лењира можете да повучете нови водич на своје платно.

Да бисте уклонили вођицу, користите move tool(в) и вратите је назад у лењир.

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

Паметни објекти

Шта су паметни објекти?

Паметни објекти су слојеви који садрже податке о сликама из растерских или векторских слика, као што су Пхотосхоп или Иллустратор датотеке. Паметни објекти чувају изворни садржај слике са свим изворним карактеристикама, омогућавајући вам неразорно уређивање слоја. Адобе

Паметни објекти могу се препознати у вашим слојевима када на сличицама имају следећу икону:

Паметни објекти су заиста корисни ако радите са сликама векторског типа (СВГ, ЕПС, АИ), али су корисни и са другим сложеним растерским датотекама.

Покушајмо да увеземо паметни објекат у наш ПСД. Преузмите СВГ датотеку са флатицон-а. Да бисте увезли наш СВГ на наше платно, само превуците датотеку на платно. Сада можемо да уређујемо наш СВГ у илустратору или било ком другом векторском софтверу двоструким кликом на сличицу или наш паметни објекат. Промене ће се појавити у нашем ПСД-у.

Паметни објекти ипак могу и више од тога. Ако желите да сазнате више о њима, погледајте 10 ствари које треба да знате о паметним објектима у Пхотосхопу.

Извозна средства

Прво, само подсетник да је Пхотосхоп растерски софтвер, а не векторски софтвер. То значи да „не можемо“ извести СВГ датотеке из Пхотосхопа. Да бисте то урадили, мораћете да извезете ове врсте датотека из Иллустратор-а или Инксцапе-а, на пример.

На вебу желимо да имамо лагане сликовне датотеке. За фотографију бисмо користили компресовану .jpgдатотеку. Ако требате да користите транспарентност (алфа канал), користили бисмо .pngдатотеку. За анимирану слику користили бисмо .gif. Ако вам је потребна векторска слика (на пример иконе), најбоље је извести датотеку као .svg. Ако желите да имате више информација о свим датотекама доступним у Пхотосхопу, можете да погледате „формате датотека“ на веб локацији Адобе.

Извезите наше платно

Да бисте извезли платно, следите ове кораке:

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

Извезите само средство са платна

Вероватно ћете морати да извезите неке елементе свог шаблона.

Извезимо стрелицу лево у вртешку производа:

Помоћу алата за премештање пронаћи ћемо наш слој. Кликните десним тастером на стрелицу и изаберите слој Arrow Left. Сада само кликните десним тастером миша на овај слој на табли са слојевима. Изаберите export asи изаберите врсту датотеке која вам је потребна.

Такође можемо да извозимо фасцикле.

Акције

Шта је акција у Пхотосхопу?

Радња је низ задатака које репродукујете на једној датотеци или на низу датотека - команде менија, опције панела, радње алата итд. На пример, можете да направите акцију која мења величину слике, примењује ефекат на слику, а затим снима датотеку у жељени формат. Адобе

Ова функција је заиста погодна ако желите да промените величину серије слика на Интернету!

Направимо нову акцију за обрезивање слике и извоз ове:

  1. Преузмите гомилу слика са //унспласх.цом/
  2. Отворите једну од тих слика
  3. Отворите Actionsпанел, Window/Actions,
  4. Направите нову акцију кликом на икону Направите нову акцију (ону с леве стране иконе канте). Назовимо ову акцију Извоз за веб - име клијента.
  5. Сада снимамо нашу акцију. Дугме за снимање биће црвено, а снимање можете зауставити кликом на икону заустављања (квадратна икона лево) /
  6. Изаберите икону за обрезивање и подесите однос на 1к1 и исеците слику /
  7. Сада желимо да извеземо нашу слику File/Export/Save for Web,, селецт JPG, квалитет 50% и ширину 500пк.
  8. Кликните на "Сачувај" и одаберите одредишну мапу.
  9. Затворите слику без чувања.
  10. Да бисте зауставили снимање, кликните икону заустављања (квадратна икона лево).

Сада имамо своју акцију, тако да можемо отворити слику и само „репродуковати“ нашу акцију кликом на дугме за репродукцију.

Ако желимо да применимо своју акцију на скуп слика, само следите ове кораке:

  1. Иди на File/Automate/Batch
  2. Изаберите Sourceфасциклу.
  3. Изаберите нашу акцију
  4. Кликните на Ok

И воила! Све ваше слике се налазе у директоријуму за извоз.

Надам се да вам се свидео овај мали увод у Пхотосхоп 101 за веб програмере?. Ако желите да имате верзију 102, јавите ми шта бисте желели да знате или да прочитате више о томе.

  • @винце_умо
  • винцент-хумеау.цом