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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Spray Radius: 10
• Smoothness: 5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Opacity овог слоја поставите на 50%.

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

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

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

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

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

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

• Radius: 4,7 px

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

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

• Angle: 0
• Distance: 70px

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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