注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

{800Bu}

——Well, Here We Are...

 
 
 
 
 

日志

 
 

Mockup Blister Packaging in Photoshop(转载)  

2011-06-15 07:00:22|  分类: 教程学习 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
原文转载自Psdtuts+

Designers and clients often have different ideas about how a finished product should be presented. Designers want to show the finished artwork, clients want to know exactly how their design will look on the shelves. In this tutorial, we will demonstrate how to create a mockup for some blister packaging so that you can present your design to your clients. Let’s get started!


Tutorial Assets

The following assets were used during the production of this tutorial.


Before You Begin

In order to make the file scalable and easy to edit, we will work always with shape layers, so please be sure to select the Shape Layer option in every single shape we make, doesn?t matter if is a circle, rectangle or even the Pen Tool (P) always have it selected from the tool menu.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Document Set-Up

Start with a RGB Document with a 600 x 600 px canvas size at 72dpi, with the Background Contents set to White and name the file as Exhibition Blister Mock-up.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 1 – Setting up the Background.

Double-click the Background layer in the Layers window to make it editable and set the name as "Background". Go to Layer > Layer Styles > Blending Options and aplly a Gradient Overlay as shown.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Select the Ellipse Tool (U) and draw a circle of 600 px diameter. Name the new layer as "Backlight" and set the Fill to 0% in the Layers window. Go to Layer > Layer Styles > Blending Options and aplly a Gradient Overlay as shown.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Select the Ellipse Tool (U) and draw a circle of 600 px diameter. Name the new layer as "Backlight", set the Fill to 0% and the mode to Soft Light in the Layers window. Go to Layer > Layer Styles > Blending Options and aplly a Gradient Overlay as shown.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Press Command/Ctrl + T and in the Tool window set the Y position to 0 px and apply the changes. Go to Layer > Smart Objects > Convert to Smart Object.

Note: This action will set the Fill of the "Backlight" layer to 100%.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 2 – Drawing the Blister Board.

Go to Layer > New > Group and name it Display Board. Set your Foreground color to white (#000000). Select the Rounded Rectangle Tool (U), set the Radius to 8 px and draw a rectangle as shown. Name the new layer "Main Shape."

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Select the Pen Tool (P), select the Subtract From Shape Area option in the Tool window and draw a shape as shown.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 3 – Saving for the future.

Drag the "Main Shape" layer to the New Layer icon three times in the Layers window and name these new three layers as "Main Light", "Top Light", and "Shadow."

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 4

Select the "Shadow" layer, set the Mode to Overlay with an Opacity of 9%, the Fill at 0% and go to Layer > Layer Styles > Blending Options and apply a Gradient Overlay with the following settings.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 5

Select the "Main Light" layer, set the Mode to Overlay with an Opacity of 75%, the Fill at 0% and go to Layer > Layer Styles > Blending Options and apply a Bevel and Emboss with the following settings.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Still in the Bevel and Emboss window, click on the Gloss Contour thumbnail and in the Contour Editor set the Mapping as follows. Click OK.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Click on the Contour tab in the layer Style window, set the Range to 55%, click on the Contour thumbnail and in the Contour Editor window set the Mapping as shown. Click OK. Again, click OK in the Layer Style window to apply the settings.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 6

Click on the "Top Light" layer, select the Direct Selection Tool (A) and then select the Rectangle Tool (U); click on the Subtract From Shape Area icon and draw a rectangle as shown.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Select the Path Selection Tool (A), make a selection around the entire canvas and click the Combine button in the tool window.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 7

Duplicate the "Backlight" layer by dragging the layer to the New Layer icon in the Layer window and place it above the "Top Light" layer. Now click and drag the "Top Light" layer Vector Mask thumbnail to the "Backlight copy" layer and release it over it. Delete the "Top Light" layer and rename the "Backlight Copy" layer to "Top Light", set the Opacity at 55% and the Mode to Normal.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 8

Select the "Main Shape" layer and go to Layer > Layer Styles > Blending Options. Click on the Pattern thumbnail and from the thumbnail list click on the arrow at top right, select from the dropdown menu Artist Surfaces and click on Append.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Select the patter Stone (80 by 80 pixels, Grayscale mode) and aplly a Pattern Overlay with the following settings. Click OK.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 9

Select the Rectangle Tool (U), and draw a rectangle as shown. Name the new layer "Design" and place it above the "Main Shape" layer.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Go to Layer > Smart Objects > Convert to Smart Object and then go to Layer > Create Clipping Mask.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 10 – Setting up the Content.

Go to Layer > New > Group and name it Display Content. Set your Foreground color to white (#000000). Select the Rounded Rectangle Tool (U), set the Radius to 16 px and draw a rectangle as shown. Name the new layer "Side."

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 11

Drag the "Side" layer to the New Layer icon in the Layers window two times and name these new two layers as "Top" and "Outer."

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 12

Select the "Side" layer, set the Fill to 0% and go to Layer > Layer Styles > Blending Options, select the Stroke tab and from the Fill Type dropdown menu select Pattern. Click on the Pattern thumbnail and from the thumbnail list click on the arrow at top right, select from the dropdown menu Load Patterns, search for the "Side_Dot" pattern file and click on Load.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Select the pattern Side and apply a Stroke with the following settings. Click OK.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 13

Select the "Top" layer, set the Fill to 0% and go to Layer > Layer Styles > Blending Options, select the Stroke tab and apply the following settings. Click OK.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 14

Select the "Outer" layer, set the Fill to 0% and go to Layer > Layer Styles > Blending Options, and aplly a Bevel and Emboss with the following settings.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Still in the Bevel and Emboss window, click on the Gloss Contour thumbnail and in the Contour Editor set the Mapping as follows. Click OK.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Click on the Contour tab in the layer Style window, set the Range to 55%, click on the Contour thumbnail and in the Contour Editor window set the Mapping as shown. Click OK. Again, click OK in the Layer Style window to apply the settings.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 15

Set your Foreground color to red (#ff0000). Select the Rounded Rectangle Tool (U), set the Radius to 6 px and draw a rectangle as shown. Name the new layer "Container" and place it below the "Outer" layer.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 16

Drag the "Container" layer to the New Layer icon in the Layers window and name the new layer as "Soft Shadow." Set the layer Opacity to 41% in the Layers window and double-click the red thumbnail of the "Soft Shadow" layer; pick a black color (#000000) and click OK.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Select the Path Selection Tool (A) and drag a selection around the entire "Soft Shadow" layer. Go to Edit > Copy and the go to Edit > Paste. Using the arrow key, move the pasted selection 3 px by pressing the up arrow three times; select the Subtract From Shape Area option in the Tool window and click on the Combine button.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 17

Set your foreground color to white (#ffffff). Select the Rectangle Tool (U), and draw a rectangle as shown. Name the new layer "Content" and place it above the "Container" layer.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Go to Layer > Smart Objects > Convert to Smart Object. Go to Layer > Create Clipping Mask.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 18

Select the "Container" layer, go to Layer > Layer Style > Blending Options and apply a Drop Shadow with the following settings.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 19

Select the Rounded Rectangle Tool (U), set a Radius of 16 px and draw a rectangle as shown. Name the new layer "Inner" and place it above the "Outer" layer.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Drag the "Inner" layer to the New Layer icon in the Layers window and name the new layer as "Light Container."

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 20

Select the "Inner" layer and set the Fill to 0%. Go to Layer > Layer Styles > Blending Options, and aplly a Bevel and Emboss with the following settings.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Click on the Contour tab and in the arrow next to the Contour thumbnail; from the thumbnail list click on the arrow at top right, select from the dropdown menu Contours and click Append.Contour tab in the layer Style window, set the Range to 100%, click on the Contour thumbnail arrow and from the Contour thumbnail list select the Half Rounded contour. Click OK. Again, click OK in the Layer Style window to apply the settings.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Select the Half Rounded contour from the dropdown list and set the Range to 100%. Click OK. Again, click OK in the Layer Style window to apply the settings.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 21

Click on the "Light Container" layer, select the Direct Selection Tool (A) and drag all the right anchor points 150 px to the left. Do this by holding Shift + pressing 15 times the left arrow on your keyboard.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 22

Drag the "Backlight" layer to the New Layer icon in the Layers window three times and name these new layers as "Front Light", "Content Shadow" and "Content Light."

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Place the "Front Light", "Content Shadow" and "Content Light" layer above the "Light Container" layer in the "Display Content" layer group.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 23

Select the "Front Light" layer, go to Edit > Free Transform and apply the following settings.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Select the "Light Container" layer, drag the Vector Mask thumbnail to the "Front Light" layer and release it on it. Delete the "Light Container" layer.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Set the "Front Light" layer to Normal and change the Opacity to 45%.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 24

Select the "Content Shadow" layer, go to Layer > Layer Styles > Blending Options and apply a Color Overlay with the Blend Mode set to Normal an Opacity of 100% and a black color (#000000). Click OK. Set the layer mode to Normal and change the Opacity to 18%.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 25

Set the foreground color to red (#ff0000) and select the Rectangle Tool (U) then draw a rectangle as shown. Name the new layer as "Shadow Container."

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Drag the "Shadow Container" layer to the New Layer icon in the Layers window and name the new layer as "Light Container." Go to Edit > Free Transform and set the Y value to 192 px and apply the changes.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 26

Select the "Content Light" layer, go to Edit > Free Transform and set the following values. Apply the changes.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Now select the "Content Shadow" layer, go to Edit > Free Transform and set the following values. Apply the changes.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 27

Drag the "Light Container" layer Vector Mask thumbnail to the "Content Light" layer and release it over it. Delete the "Light Container" layer.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Drag the "Shadow Container" layer Vector Mask thumbnail to the "Content Shadow" layer and release it over it. Delete the "Shadow Container" layer.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 28

Drag and drop the "Backlight" layer to the New Layer icon in the Layers window and name the new layer as "Fantasy Shadow", set the Mode to Normal.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Go to Edit > Free Transform and apply the following values.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Go to Layer > Layer Style > Blending Options and apply a Color Overlay as shown.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 29

Select the Rectangle Tool (U) and draw a rectangle as shown. Name the new layer as "Fantasy Container".

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Drag the "Fantasy Container" layer Vector Mask thumbnail to the "Fantasy Shadow" layer and release it over it. Delete the "Fantasy Container" layer.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 30 – Putting some design on it.

Into the "Display Board" group, select the "Design" layer and double-click on the smart object thumbnail. In the new document window select the "Design" layer and go to Layer > Layer Style > Blending Options and apply a Gradient Overlay with the following settings.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Select the Horizontal Type Tool (T) and write "tutorials". Get some nice icon and place it into the design. Save the file and close it.

Note: I have used the Lubalin typeface and the tutorials website icon, but you can use any typeface you like as well any image, it does not have to be necessarily an icon.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Step 31

Into the "Display Content" group, select the "Content" layer and double-click on the smart object thumbnail. In the new document window paste an screenshot (or any design you like) of the tutorials marketplace. If necessary, adjust the screenshot to the canvas size, do this by going to Edit > Free Transfom. Save the document and close it.

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

Final Image

Mockup Blister Packaging in Photoshop(转载) - 800bu - {800Bu}

  评论这张
 
阅读(275)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017