Како створити 3Д дугмад помоћу програма Адобе Пхотосхоп

Како створити 3Д дугмад помоћу програма Адобе Пхотосхоп

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





У овом чланку ћемо вам показати како да креирате 3Д дугмад помоћу Пхотосхопа, заједно са визуелним 'горе' и 'доле' стањима, тако да их можете анимирати. (У овом чланку нећемо покривати саму анимацију.)



Корак 1: Припремите документ

Иако се 3Д дугмад најчешће појављују на веб локацијама, важно је напоменути да за њих постоје и друге апликације, попут анимираних ГИФ-ова, лажних приказа производа и мобилних игара. У зависности од тога за шта креирате ово дугме, ваш коначни формат датотеке и његове димензије могу се разликовати.





Да бисте креирали 3Д дугме у Пхотосхопу, мораћете да направите прилагођени документ за њега. Да бисте то урадили, отворите Пхотосхоп и кликните на Направи ново> Прилагођено . Почните да уносите своје вредности.

Да бисте креирали 3Д дугме, пожелећете хоризонтални документ. За наше смо користили:



  • 900 к 300 пиксела висине
  • 300 пиксела/инч
  • РГБ режим боја

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

Корак 2: Поставите правоугаоник за 3Д дугме

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



Да бисте направили своје 3Д дугме, кликните на Алат за заобљене правоугаонике на левој страни екрана, овде приказано црвеном бојом. Такође можете користити пречицу У да му приступите.

Кликните једном на бели слој: ово ће аутоматски приказати ваш Направите заобљени правоугаоник кутија. Ово поље ћете користити за одређивање димензија вашег правоугаоника.



За наше дугме смо отишли ​​са:

  • 300 пиксела ширине
  • 75 пиксела висине

Такође смо се уверили да су углови заобљени за 10 пиксела. Ни превисоко, ни прениско. Затим смо притиснули У реду .

Белешка: Дугмад се разликују по величини и облику, па нема потребе да користите ове тачне димензије. Осим тога, ако тражите више информација о пречицама, ево неких од њих најкорисније команде тастатуре Пхотосхоп .

Када притиснете У реду , Пхотосхоп ће створити заобљени правоугаоник са овим димензијама унутар вашег слоја. Можете га променити Попуните и Удар боје помоћу падајућих менија у горњем левом углу екрана.

За потребе овог водича --- и да илуструјемо како тастери 'горе' и 'доле' могу изгледати --- ми ћемо дугме 'доле' учинити црвеним.

Корак 3: Учините своје дугме 3Д

Након што креирате основно дугме и изаберете његову боју, пожелећете да га прилагодите у Стил слоја Дијалог. Ово је да би изгледало 3Д.

Да бисте приступили свом Стил слоја дијалог, можете ићи Слој> Стил слоја из горњег менија. Такође можете двапут кликнути на слој који садржи ваше дугме да бисте га аутоматски отворили. Овај начин је много бржи и ми лично га преферирамо.

Када се подигне оквир за стил слоја, идите на опцију Бевел & Ембосс . Укључите га.

Ово је брз и једноставан начин да ивицама дугмета дате подигнутији, '3Д' изглед. За овај водич ово су подешавања која смо користили:

Структура

  • Стил: Унутрашња косина
  • Техника: Длето мекано
  • Дубина: 605
  • Правац: Горе
  • Величина: 5
  • Омекшати: 1

Сенчење

  • Угао: 90
  • Домет: 37
  • Режим истицања: Додге у ​​боји, непрозирност 55%
  • Режим сенке: Вишеструка, 25% непрозирност

Трик је у томе да подешавања учините довољно високим да видите неку разлику, али не толико јаку да је огромна.

Након што смо завршили са програмом Бевел & Ембосс, прешли смо на Контура и укључио и то. Цонтоур чини дефиницију Бевел & Ембосс мало јачом, па смо за овај водич одабрали поставку Конус - обрнуто .

Затим укључите Градиент оверлаи . То је оно што дугмету даје заобљени, благо „сјајни“ изглед. Подешавања су следећа:

  • Режим мешања: Преклапање
  • Непрозирност: 90
  • Стил: Линеарно
  • Угао: 90
  • Скала: 100

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

који је иоутубе канал са највећим бројем претплатника

Структура

  • Режим мешања: Вишеструко
  • Непрозирност: 35
  • Угао: 90
  • Удаљеност: 2
  • Ширење: 6
  • Величина: 8

Квалитет

  • Контура: Линеарно
  • Бука: 0
  • Слој избацује сенку: на

Сада је време да ове спецификације сачувате као стил слоја.

Корак 4: Сачувајте као стил слоја

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

Ево како.

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

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

Корак 5: Како користити сачувани стил слоја

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

Прво, креирајмо друго дугме директно изнад слоја црвеног дугмета. Учинимо то зеленим, за нагласак.

Даље --- уместо двоструког клика на сам слој да бисте отворили Стилови слојева дијалошки оквир --- двапут кликните на стил слоја у вашем Библиотеке панел.

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

Корак 6: Додајте текст свом дугмету

Затим ћемо додати текст дугмету.

Да бисте додали текст, направите нови слој изнад два слоја дугмета. Кликните Укуцајте алат да бисте почели да куцате.

За овај водич ћемо написати реч „претплати се“ јер је то нешто што често видите на веб страницама и платформама друштвених медија.

Такође ћемо користити сан-сериф фонт сигуран за веб. Коначни избор које ћете користити за своје дугме је на вама. Монтсеррат, Прокима Нова, Ариал и Вердана су све широко коришћене алтернативе и безбедне за веб.

Међутим, након што се ово уради, потребно је да направите још неколико суптилних промена како бисте овај текст „искочили“.

Прво двапут кликните на слој који садржи ваш текст како бисте га могли приказати у свом Стил слоја Дијалог.

Затим кликните на Унутрашња сенка , да бисте тексту додали мало удубљења (или утонулог подручја). Због тога изгледа као да су слова угравирана у дугме. Тачна подешавања која смо користили за овај водич су испод.

Структура

  • Режим мешања: Мултипли
  • Непрозирност: 35
  • Угао: 90
  • Удаљеност: 2
  • Гушење: 4
  • Величина: 1

Квалитет

  • Контура: Линеарно
  • Бука: 0

Затим примените а Градиент Оверлаи на та слова, како би се лакше уклопили у дугме, а да не изгледају равно. Опет, наша подешавања су:

  • Режим мешања: Боје горе
  • Непрозирност: 90
  • Стил: Линеарно
  • Угао: 90
  • Скала: 100

Корак 7: Завршите

Након што креирате овај стил текста --- посебно ако га желите поново користити --- идите на Нови стил и сачувајте га пре него што кликнете У реду .

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

Прилично кул, ха? Идите да бисте сачували датотеку Датотека> Сачувај као и сачувајте га као одговарајући формат датотеке за било који пројекат на коме радите.

Прилагодите свој блог помоћу 3Д дугмади и виџета

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

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

Објави Објави Твеет Емаил Како приступити Гоогле-овом уграђеном нивоу облачића на Андроиду

Ако сте икада морали да се уверите да је нешто у равни, сада можете да добијете ниво облачића на телефону за неколико секунди.

Прочитајте следеће Повезане теме
  • Цреативе
  • Адобе Пхотосхоп
  • Савети за уређивање слика
  • Водич за Пхотосхоп
О аутору Схианне Еделмаиер(136 објављених чланака)

Схианне је дипломирала дизајн и завршила подцаст. Сада ради као виши писац и 2Д илустратор. Она покрива креативну технологију, забаву и продуктивност за МакеУсеОф.

Више од Схианне Еделмаиер

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

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