Како направити ценовник у Photoshop-у

Израда-ценовника-у-Пхотосхопу

У последњих неколико текстова из категорије Photoshop упутства, бавили смо се креирањем фонтова, иконица и анимација. У овом тексту бавићемо се израдом ценовника који можете поставити на свој сајт, блог, продавницу или тамо где ви сматрате да је право место за то.

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

Photoshop упутство за израду ценовника за веб-сајт

Покрените Photoshop и отворите нови документ користећи изборник File-New или комбинацију тастера Ctrl+N.

Како направити ценовник у Пхотосхоп слика 1

Унесите следеће мере као величину новог документа, Width 900px и Height 720px. Кликните на дугме ОК за креирање новог конваса, документа.

Како направити ценовник у Пхотосхоп слика 2

Покрените алат под називом Rounded Rectangle кликом на иконицу за тај алат или користећи тастер U. Поставите Foreground боју на #f98508. Кликните на нови документ и у прозор за поставку заобљеног правоугаоника унесите мере са слике испод. Да би правоугаоник био правилно заобљен потребно је у сва поља Radius унети величину 5px. Да додате правоугаоник кликните на дугме ОК након уношења свих мера.

Како направити ценовник у Пхотосхоп слика 3

Након креирања заобљеног правоугаоника у палети слојева (енгл. Layers Palete) стајаће нови облик (енгл. Shape). Ради лакшег сналажења можете га преименовати у Основа. Сваки слој можете преименовати дуплим кликом на постојећи назив и уношењем новог имена:

Како направити ценовник у Пхотосхоп слика 4

Сада ћемо додати мало стила овом нашем правоугаонику. Док сте још у палети слојева кликните дуплим кликом на слој Основа како бисте отворили прозор Layer Style. Активирајте стил Stroke и унесите величине са слика испод, односно унесите следеће вредности:

  • Size: 1 px
  • Position: Outside
  • Blend Mode: Normal
  • Opacity: 60%

Кликните на дугме ОК да извршите задавење стила слоју.

Како направити ценовник у Пхотосхоп слика 5

Додаћемо још један стил и то Inner Glow и то на исти начин као и претходни користећи следеће вредности са слике, односно тачно ове:

  • Blend Mode: Multiply
  • Opacity: 12%
  • Noise: 0
  • Поставите црну боју (ако већ није тако)
  • Technique: softer
  • Choke: 0
  • Size: 98%

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

Како направити ценовник у Пхотосхоп слика 6

Наш облик сада изгледа овако са свим додатим стиловима.

Како направити ценовник у Пхотосхоп слика 7

Дуплирајте сада слој Основа користећи комбинацију тастера Ctrl+J и нови слој преименујте у Текстура. Разлог за то је што ћемо сада додати мало текстуре облику који креирамо.

Како направити ценовник у Пхотосхоп слика 8

Након тога претворите слој Текстура у Smart Object десник кликом на слој и бирањем опције Convert to Smart Object.

Како направити ценовник у Пхотосхоп слика 9

Покрените додавање “шума” или “буке” (визуелно) користећи изборник Filter – Noise – Add Noise….  Битно је да то урадите док је одабран слој Текстура.

Како направити ценовник у Пхотосхоп слика 10

У прозору који се отворио поставите следеће вредности за додавање ефекта:

  • Amount: 7
  • Distribution: Uniform
  • Одаберите Monochromatic опцију.

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

Како направити ценовник у Пхотосхоп слика 11

Конкретно, то треба да изгледа овако:

Како направити ценовник у Пхотосхоп слика 12

Међутим, текстура још увек није готова. Док је и даље одабран слој Текстура, идите на Filter – Filter Gallery.

Како направити ценовник у Пхотосхоп слика 13

У Artistic групи одаберите опцију Underpainting и унесите следеће вредности:

  • Brush size: 0
  • Texture Coverage: 40
  • Texture: Convas
  • Scaling: 50%
  • Releif: 20
  • Light: Top.

За примену ових вредности кликните на дугме ОК.

Како направити ценовник у Пхотосхоп слика 14

На истом месту у групи Brush Strokes одаберите опцију Spatter и унесите следеће вредности:

  • Spray Radius: 10
  • Smoothness: 5

За примену ових вредности кликните на дугме ОК.

Како направити ценовник у Пхотосхоп слика 15

Након тога, слоју Текстура промени Blending Mode у Soft Light.

Како направити ценовник у Пхотосхоп слика 16

Opacity овог слоја поставите на 10%:

Како направити ценовник у Пхотосхоп слика 17

На слици испод можете видети ефекат који треба да добијете. Покрените сада и алат за додавање текста кликом на иконицу у палети алата или користећи пречицу преко тастера Т.

У овом упутству коришћен је фонт Bebas и можете га преузети овде: Bebas Font. 

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

Можете користити пример поставки фонтова са слике коју видите испод, али је најбоље да пробате да уклопите неку своју замисао и смисао за изглед и поставку целе идеје. Користећи Character палату можете подешавати фонтове баш онако како бисте желели да изгледају. Можете поставити величину фонта, висину, дужину, ширину, размак између редова, размак између фонтова, боју и још по нешто. Оставите себи времена да истражите ове опције.

Како направити ценовник у Пхотосхоп слика 18

Додаћемо сада сенку испод наслова па кликните дуплим кликом на слој у коме се налази наслов. Активирајте стил Drop Shadow и унесите следеће вредности:

  • Blend Mode: Multiply
  • Opacity: 80%
  • Angle: 90
  • Distrance: 1
  • Spread: 0
  • Size: 1

Да примените ове вредности и додате сенку кликните на дугме ОК.

Како направити ценовник у Пхотосхоп слика 19

Измени сада Foreground боју у следећу: #0a0a0a.

Како направити ценовник у Пхотосхоп слика 20

Покрените поново Shape алат кликом на тастер U или бирањем алата из палете алата. Кликните у горњи део постојећег правоугаоника и додајте следеће вредности које видите на слици испод.

Како направити ценовник у Пхотосхоп слика 21

На овај начин додаћемо један мањи заобљени правоугаоник одмах испод наслова. Слој у коме се налази овај нови правоугаоник можете преименовати у Кутија.

Како направити ценовник у Пхотосхоп слика 22

Додаћемо мало стила овој кутији па покрените Layer Style дуплим кликом на слој Кутија. Укључите стил Stroke и унесите следеће вредности:

  • Size: 1px
  • Positon: Outside
  • Blend Mode: Normal
  • Opacity: 100%

За примену ових вредности кликните на дугме ОК.

Како направити ценовник у Пхотосхоп слика 23

Додаћемо још један стил – Drop Shadow. За додавање сенке унесите следеће вредности након активације овог стила:

  • Blend Mode: Multiply (поставите црну боју уколико већ није постављена)
  • Opacity: 75%
  • Angle: 90
  • Distance: 1px
  • Spread: 12%
  • Size: 11px

За примену ових вредности кликните на дугме ОК.

Како направити ценовник у Пхотосхоп слика 24

Наша кутија сада изгледа овако:

Како направити ценовник у Пхотосхоп слика 25

Промените сада Foreground боју у #222222.

Како направити ценовник у Пхотосхоп слика 26

При дну кутије коју смо управо направили додајте један правилни правоугаоник уз помоћ Shape алата. Дакле, ово није заобљени правоугаоник и он ће представљати дно веће, претходно направљене кутије.

Како направити ценовник у Пхотосхоп слика 27

Након креирања новог правоугаоника треба му изменити перспективу како би заиста изгледао као дно кутије. Идите на Edit – Transform – Perspective.

Како направити ценовник у Пхотосхоп слика 28

Повуците један од горњих углова правоугаоника ка унутра (не брините, аутоматски се помера и други угао). Када погодите праву перспективу довољно је да притиснете тастер Ентер да сачувате поставку.

Како направити ценовник у Пхотосхоп слика 29

И овом правоуганику који ће представљати дно кутије додаћемо стилове. Кликните два пута на слој под именом Дно кутије и активирајте стил Inner Glow. Унесите следеће вредности:

  • Blend Mode: Multiply
  • Opacity: 38%
  • Noise: 0
  • Поставите црну боју уколико то већ није случај
  • Technique: Softer
  • Choke: 0%
  • Size: 24px

За примену вредности на овај стил, кликните на дугме ОК.

Како направити ценовник у Пхотосхоп слика 30

На слици испод можете видети ефекат овог стила. Додајте сада и леву и десну страну кутије користећи исти начин. Оба слоја поставите испод слоја Дно кутије како се не бисте пуно мучили око поставки перспективе.

Како направити ценовник у Пхотосхоп слика 31

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

Како направити ценовник у Пхотосхоп слика 32

Након тога, додајте нови слој кликом на дугме Add New Layer или пречицом на тастатури Shift+Ctrl+N. Нови слој преименујте у Светло.

Како направити ценовник у Пхотосхоп слика 33

Одаберите алат четкице користећи тастер B (lat.) на тастатури. Активирајте Soft Round четкицу.

Како направити ценовник у Пхотосхоп слика 34

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

Како направити ценовник у Пхотосхоп слика 35Opacity овог слоја поставите на 50%.

Како направити ценовник у Пхотосхоп слика 36

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

Како направити ценовник у Пхотосхоп слика 37

У зависности од идеје испробајте више варијанти:

Како направити ценовник у Пхотосхоп слика 37а

Испод самог слоја сада треба додати сенку који ће дати осећај да ценовник лебди. Испод слоја основа додајте правоугаоник у црној боји користећи Shape алат (тастер U).

Како направити ценовник у Пхотосхоп слика 38

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

Како направити ценовник у Пхотосхоп слика 39

Претворићемо овај слој уSmart Object десним кликом на слој и бирањем опције Convert to Smart Object.

Како направити ценовник у Пхотосхоп слика 40

Док је и даље одабран овај исти слој покрените замућење из изборника Filter – Blur – Gaussian Blur. Унесите следеће вредности замућења:

  • Radius: 4,7 px

Кликните на дугме ОК да примените ефекат.

Како направити ценовник у Пхотосхоп слика 41

Из истог изборника покрените и Motion Blur са унетим следећим вредностима:

  • Angle: 0
  • Distance: 70px

За примену ефеката кликните на дугме ОК.

Како направити ценовник у Пхотосхоп слика 42

Након додавања сенке додајте и опис производа. Ево како то изгледа у примеру нашег хостинг пакета:

Како направити ценовник у Пхотосхоп слика 43

Испод сваког описа можете додати и симпатичну линију коју видите на слици испод. Линију такође можете извући користећи Shape alat  (тастер U) и подмени Line tool.

Како направити ценовник у Пхотосхоп слика 44

Да би линија изгледа још лепше додаћемо јој мало стила уз помоћ Layer Style опције (дупли клик на слој са линијом). Активирајте Drop Shadow и унесите следеће вредности:

  • Blend Mode: Screen (поставите белу боју)
  • Opacity: 40%
  • Angle: 90
  • Distance: 1
  • Spread: 0
  • Size: 0

За примену ових вредности и додавање сенке кликните на дугме ОК.

Како направити ценовник у Пхотосхоп слика 45

Линију ископирајте (Ctrl+J) онолико пута колико редова текста имате и поставите по једну линију испод сваког реда.

Како направити ценовник у Пхотосхоп слика 46

Покрените поново Shape алат и из његовог изборника одаберите Rounded Rectangle. Кликните у доњи део основне слике, негде испод текста. Унесите следеће вредности које видите на слици испод:

Како направити ценовник у Пхотосхоп слика 47

Преименујте овај слој у Дугме.

Како направити ценовник у Пхотосхоп слика 48

Додаћемо стил уз помоћ опције Layer Style. Активирајте Stroke ефекат и унесите следеће вредности:

  • Size: 1px
  • Position: Outside
  • Blend Mode: Normal
  • Opacity: 100%
  • поставите црну боју уколико већ није тако

За примену овог ефекта кликните на дугме ОК.

Како направити ценовник у Пхотосхоп слика 49

Додаћемо и стил Inner Shadow. Активирајте га најпре и унесите следеће вредности:

  • Blend mode: Screen (поставите белу боју уколико већ није тако)
  • Opacity: 26%
  • Angle: 90
  • distance: 1px
  • Choke: 0
  • Size: 0

За додавање овог стила кликните на дугме ОК.

Како направити ценовник у Пхотосхоп слика 50

Додаћемо и мало сенке. Активирајте стил Drop Shadow. Унесите следеће вредности:

  • Blend Mode: Multiply (поставите црну боју уколико већ није тако)
  • Opacity 46%
  • Angle: 90
  • Distance: 7
  • Spread: 0
  • Size: 9

Као и до сада, за примену је довољно кликнути на тастер ОК.

Како направити ценовник у Пхотосхоп слика 51

Наше дугме са свим додатим стиловима изгледа овако:

Како направити ценовник у Пхотосхоп слика 52

Направите копију слоја Дугме користећи комбинацију тастера Ctrl+J. Поставите копију слоја испод слоја Дугме у палети слојева, али у конвасу повуците тај слој на горе. Видите слику:

Како направити ценовник у Пхотосхоп слика 53

Користећи Perspective alat поставите перспективу баш као на слици испод:

Како направити ценовник у Пхотосхоп слика 54

Додаћемо мало стила и овом слоју. Као и до сада, користићемо Layer Style. Активирајте Inner Glow и унесите следеће вредности:

  • Blend Mode: Multiply
  • Opacity: 53%
  • Noise: 0
  • Поставите црну боју уколико већ није тако постављено
  • Technique: Softer
  • Source: Edge
  • Choke: 0
  • Size: 16px

За примену кликните на дугме ОК.

Како направити ценовник у Пхотосхоп слика 55

По завршетку дугмета (можете видети на слици испод како треба да изгледа) додајте натпис, односно, Call-to-Action. Наравно, за додавање текста користити Text алат (тастер T).

Како направити ценовник у Пхотосхоп слика 56

Додаћемо још једну димензију комплетном ценовнику. Искпирајте слој Дугме користећи комбинацију тастера Ctrl+J. Користећи Move алат у конвасу поставите дугме изнад основе:

Како направити ценовник у Пхотосхоп слика 57

У палети слојева, овај слој поставите при самом дну испод слоја Основа:

Како направити ценовник у Пхотосхоп слика 58

Користећи Perspective алат направите илузију простора. Додајте нови слој и уз помоћ четкице додајте мало осветељења. Што се тиче израде ценовника процес је завршен и наш ценовник изгледа баш као на слици испод:

Како направити ценовник у Пхотосхоп слика 59

За креирање више комплета, одаберите све слојеве. Слојеве можете одабрати док држите тастер Ctrl  и кликнете на сваки слој. Након одабира искористите комбинацију тастера Ctrl+G да их групишете. Сваку групу можете копирати како бисте ценовник умножили.

Како направити ценовник у Пхотосхоп слика 60

Назив сваке групе можете мењати у зависности од ценовника који израђујете:

Како направити ценовник у Пхотосхоп слика 61

Ево како то може да изгледа:

Како направити ценовник у Пхотосхоп слика 62

Мали трик који вам може помоћи у визуелно лепшем представљању је да средњу кутију ценовника оставите у правој величини, док леву и десну умањите на 95%. Ако додате уске правоугаонике са леве и десне стране средње кутије и урадите Blur можете постићи занимљив ефекат.

Како направити ценовник у Пхотосхоп слика 63

Ево како то може да изгледа:

Адриахост Пхотосхоп ценовник 2016 блог

Бонус фајл за преузимање

Као што смо рекли, циљ наших упутстава није да се интеракција са читаоцима заврши на крају сваке странице. Управо испод можете преузети PSD радни фајл који можете преправљати и кориговати по сопственом избору и жељама. Наравно, можете га користити за било коју сврху, хоби или посао.

Кликните на следећи линк за преузимање: PSD Ценовник по Адриахост упутству

Уколико вршите преправку фајла постављеног изнад не заборавите да инсталирате Bebas фонт који можете преузети овде: Bebas фонт.

Tags: , , ,

Нема коментара.

Пошаљи коментар