Photoshop tutorial 03: How to create an exclusive Vintage Badge (Part two)

This is the second part of our "Photoshop tutorial 03: How to create an exclusive Vintage Badge", if you didn't see the first part yet, we suggest to start from there.


The final result of both the Photoshop Tutorials will be this below, so let's start with the second part.



In the previous part we created the base of the vintage badge ready to be personalized.


7 - Add the number (or your logo)


Now, with the type tool, we'll add the number “03” (but you can add everything you want, also a logo for example). We used our "Henry Old Circus" font.

Modify the size until you are happy with it and position it at the center of the circle using the guides if necessary.

Apply settings as in the below screenshots.



8 - Create the punched holed plastic plaque


Draw a rounded rectangle vector shape using the first icon on the tool option bar (the same we used for the main rectangle shape).

Make sure you adjust the radius to your new shape, too. Also, make sure the “Exclude overlapping path” option is selected in the tool option bar and then draw a small rectangle over the main one.


With the Path Selection tool (black arrow), select only the small new rectangle and keep the other shape unselected. Copy and paste this eight times (basically, just click (ctrl+c) and (ctrl+v) [command+c] [command+v] eight times in a row).



Once you have copied everything, select them all.

You can keep the (shift) [shift] key pressed to add any new shape to the total selected. Once they have all been selected, select the “distribute” and “align” options in the tool options bar.



Set the color of the now holed punch plaque to off-white/ beigey yellow to give it an old plastic look. Open the layers style panel and apply the following settings.


Then, click on the gloss contour icon and modify the contour.

To do this, just click on the contour icon and change the shape of the contour as you would do with a curve layer. In this case,  we lowered the highlights and created a “double bump” in order to mimic a more plastic-like feel. You can also save the contour preset in case you want to re-use it later on.



Now we can add a texture.

Here, we used a simple paper texture like the one we used in the previous tutorial “old cardboard texture”.



All we have to do now is take care of the red bar on top of the plaque.

To do this, select the rounded rectangle vector shape again and set on “shape layer”with a radius of 10 px. Then, draw a fine rectangle. Copy the exact same effects from the circle border (including the colour fill set as dark red) and adapt the size of the bevel (10px, in this case).


On top of that bar, there will be nine plain rectangles that we will take from the previous holes (never ever work twice in Photoshop whenever possible; instead, always re-use and re-cycle!)

1st : Select the yellow plaque path with the Path Selection tool (black arrow).

2nd : Copy this layer.

3rd : Change the color of the new colour fill layer to white.

4th : Select the outer shape in the path that has just been created, but leave the nine rectangles unselected.

5th : Press “del” to erase the outer shape.

6th : Select all of the nine rectangles (hold down shift key) and place them neatly on the bar while pressing (shift) [shift] to constrain the move to a straight line.

This way, you will know that the two sets are parallel.  They are now aligned and distributed.



Open the layer style and apply the settings below:



Now, with the type tool, type each letter of the word “fontscafe” separately (we used always our “Henry Old Circus” font).

Adjust the size. (Type your letter and then hit the “enter” key of the numeric pad, not on the main keyboard. The latter will insert a new line of text.) 

Position these letters neatly upon each rectangle with the help of guides.


Apply these settings for bevel and emboss to one of the letter. 

Style: “emboss”

Depth: 150 %

Size: 5px Soften: 1px Global light 

Then, add a stroke effect of 1 px at low opacity.


Next, change the “contour” shape from a straight line to a demi-curved one.

Season to taste!


Copy these settings to all of the letters (click alt+drag the effects to each layer) and group all of the letters into one group to save some space. 



9 - The last details

Next, type the word “tutorial” (in one go)  with the “Henry old circus” font and with the same size as the “fontscafe” letters in white, and apply this to the following layer styles



W're goign to write the “vintage badge 50's” words in a different font (here, it's in “Retroactive”).

Type it in white and adapt the position and size to your liking. Then, copy the layer styles from the “tutorial” layer and adjust the parameters as needed.


On top of this shiny and refined vintage badge, we will add more depth to the badge, as well as a nice lighting effect that will compliment the lighting effect already present in the leather texture.

Add a new “overlay/neutral” layer. To do this, press (alt) [option] while clicking on the new layer icon (bottom of the layers palette). A window will open. 



This window will let you choose the blending mode and neutral colour fill for it.

So, it will be “overlay”.

Now go to filters > render > Lighting effects and apply the settings below



Once done, you can then decide to copy this new layer and just adjust the opacity to add a more dramatic effect.


You should end up with similar results to this one, with plenty of layers, but nothing too complicated!



Are you there? :) Let us know!




FONT USED for the final layout:


Photoshop tutorial 03: How to create an exclusive Vintage Badge (Part one)

This Photoshop tutorial requires several steps, so we splitted it in two parts, but each of them is really easy to understand. All it requires is a basic understanding of Photoshop tools and menus and the knowledge on how the pen tool works. What makes it so sophisticated as a whole is the combination of all of the effects.


This is the final result we're going to create.


Throughout this tutorial, any one of the shapes can be achieved either through a vector (through the vector shapes and pen tool) or through hand-drawn or raster drawings (through selections). We used a combination of the two for the purpose of this tutorial. 


1 - Create the shape

Let's start by creating a new document. Although I choose to work with a 21x15cm at 300 dpi, you can choose any size that you want. Just keep in mind that you will have to tweak the effects settings according to your choice in order to scale them.  


As first step we must create a rectangle and then transform the shape.  Use the “rounded corners rectangle” shape tool for this and make sure you have selected the second option in the options panel (Paths). Then, adjust the radius as needed (through trial and error, we used 40px for this tutorial ).


Select the bottom right corner with the direct selection tool (white arrow) and then transform it (Ctrl+T) [command+T]. Press the Ctrl [command] key which allows you to select a single corner of the shape independently of the others and then drag your point to the relevant place. If you want to drag it in a straight line, you can also press the Shift [control] key as you do so. This will align your dragging vertically with the original point. 



2 - Modify the shape

Now we're going to give a bit of curve to the right side of the shape. 

Go where the pen tool is (in the toolbar) and display the sub-tools. Then, select the “convert point to curve” tool and select the upper point on the right side. Then, drag the newly made Bezier curve until you get the right shape. By adjusting the length and direction of this “handle”, you can then move and adjust the curvature of the line as needed. This may require a bit of practice before you can master it, though, so I would suggest trying to make basic shapes first, if you are a beginner.




3 - Cut the shape


Now it is time to draw the circle that will “cut” the shape.


So, select the rectangular shape we've done with the Path Selection tool (black arrow) and select "add to shape area" in the option bar.


In the vector shape tool sub-menu, you'll find the “ellipse” tool. In order to draw a perfect circle, you'll have to hold the Shift[control] key while dragging your circle.

With the Path Selection tool (black arrow), select your shape to position it neatly into the rectangle.

Once positioned, correct the size of the circle by transforming it (Ctrl+T) [command+T]. If you press the Alt [option] key at the same time, you will also be able to resize it with the center as a starting point. This way, you won't ruin your initial positioning in any way.  


When you're done, select the circle with the Path Selection tool and, while ensuring that the circle is selected without the rectangle, select the “substract from shape” option in the option bar (naturally, the two shapes must be superposed when it comes to this).



If you pay attention to the path palette, you will see the grey parts (your hidden parts) and the white parts (the visible parts). By this point, you should notice that you don't have any “real” plain shapes, just virtual shapes (like in Illustrator).

To be able to “see” the shape, select all of the paths (including the non-visible parts) and go to the layers palette. There, select left square alone, double click to open the Color Picker, and select a color. Clisk to OK to confirm it. Any colour will do for now; we can change it later anyway.

Rename your layer as needed and don't forget to save it regularly. 



4 - Create the pattern


Since this shapes still lacks some finishing, we will now take care of the weave pattern by creating one  from scratch. We can re-use this anytime.


Create a new document of a small size. We chose a 100 px square document at 300 dpi for this with a black background.


Display the rulers in order to use the guides. (Ctrl+R) [command + R]. Place a vertical guide at the center and another one crossing at the center. To help define the center, change your ruler units in “percent” - (right click) [ctrl+ click] on the rulers - and position your guides at 50% each way. Draw a rectangle with the selection tool at the height of the document and slightly thinner than half of the canvas (in my case 44 px - or 44% - wide and 100 px height).  Then, select a solid grey colour layer (same icon as earlier). While your selection is still active, it will then turn into a mask attached to the solid colour layer.


Duplicate this layer (drag and drop this layer in the “new layer” icon, next to the “fill layer”), and adjust the mask to suit the superimposition of the different “ribbons”. Repeat twice, and use the guides to position things correctly. You can use the transform function (Ctrl+ T) [command + T] to turn the layers content the right way. Conversely, you can press the Shift key while turning CW or CCW to constrain your move to a 45 increment angle. This happens to be very handy if you want to make perfect perpendiculars.



Change colours from grey to white in the two horizontal layers, according to the screenshot.

The top shape will look incomplete since a part of it isn't hidden. To fix this, select the rectangle marquee tool (rectangle selection) and draw your selection around the faulty area. Then, select your mask and fill it with black.


To increase the depth impression, we'll add some effects to the layers. You'll only have to apply these to one layer, though. After that, you can just copy them onto the other layers.

To start, open the “layer styles” menu (double click on an “empty” space near the layer name and when the window opens, copy the screenshots settings).



Tweak the settings to your liking and take a look at it from a 100% view to see the effects properly.

Next, copy the effects to all the layers. To do this, press (alt) [option] select and drag the “effects” from the first layer onto the other layers successively.

Press (ctrl +A) [command +A] to select the entire canvas and go to “edit” > “define pattern”. Give it a sensible name.



5 - Add the pattern to the badge


You can now return to your original badge shape.

Once there, double-click on the layer to prompt the layer style menu and apply the new “pattern overlay” (select its name on the list). Adjust its opacity and blending mode. Then, change the layer colour to dark red (double click on the coloured square to open the colour palette) as in the image below.



5 - Create a metallic border


To create the metallic border around the shape we will re-use the original vector path as a selection.

Go to the select menu and choose modify> contract> 30 px (or anything you fancy).

Go to the layers palette and create a new blank layer.

Go to the “edit” menu, choose “stroke”, and give it any colour and size of at least "20px " width and location "inside".

Open the layer palette and apply these settings below.

Bevel and emboss to create a rounded shape, and satin to create a metallic texture. 



6 - Create the circle element 


For the circle element, we will once again use the circle that we created in the first vector mask, Even if we cannot see it anymore (since its shape was used to cut a portion of the main rectangular shape), its vector shape still exists in the path palette. 


Copy the rectangle layer along with its vector mask, and change the color fill to white. Delete all of the effects on it.

Then, with the Path Selection tool (black arrow), select the circle shape and leave the other shape unselected. After that, highlight the vector mask by clicking on it and then click on the first icon in the tool options bar > “add to shape area” to remove the interaction between the two shapes.



Next, select the rectangular shape and hit the “del” button to remove it from the vector mask altogether.  Apply a transformation to this new shape by hitting (alt) [option] and (shift) [shift] while dragging to keep it round and centered.  Then, apply a “bevel and emboss” layer style, as well as an inner glow following the below screenshots.



Repeat the operation you've done for the rectangular shape (the border) to make an inner round border to the circle, like this:

Select your circle. Create a new layer. 

Select> modify> contract 35 px. Edit>stroke 10px. Set color eg: red. Apply


Then, draw a triangle with the polygonal lasso tool (or create a new color fill layer with a mask) and fill the selection with the same dark red colour as your stroke. 

Apply the settings as below.



Duplicate the circle shape level, reduce it (by transforming it (Ctrl+T) [command+T]) and apply the following setting



We will add now a nice background to or vintage badge.

We've found some nice Leather Texture here (thanks to Mytherea), you can select one from there or use the one we've liitle modified from HERE(122 Kb).

Highlight the background layer and then go to  “file” > ”place” and choose your texture from your computer (where you saved the images). The texture will open as a “smart object”. As such, it can be enlarged and resized without losing any of its quality.  Resize this new layer (you'll probably have to reduce your view to grab the resizing handles as the texture is a big file, though).

So, until now we've created the base of our vintage badge, that should be look similar to the image below.



Now we're going to personalize it, follow the instructions to the next part Photoshop tutorial 03: How to create an exclusive Vintage Badge (Part two)



FONT USED for the final layout:


Photoshop tutorial 02: How to create a Vintage Metal Plate effect

In this tutorial, we will take a look at several filters, and how to use them to change masks as needed. On that note, we will also look at a lot of masks.



All of the things that you will need are included in this tutorial. All of the brushes used are from the standard set available in Photoshop by default.


We'll use two textures (download them from our subscribers area) to give more realism to the plate.

Right now, we've got a flat, illustrated plate (you can download the original layout from HERE (1.06Mb) or use your own layout), so we need to give the letters a bit more depth.


1 - Text Bevels


First, we have to apply a bevel and emboss layer style on the main text of the plate. We also have to modify the pre-existing stoke. To do this, click on the “Henry old circus” thumbnail twice. This will open up the layer styles menu.



Check the highlight opacity and make sure to keep it low.


Take great care of the “shape burst” style in the stroke command (shape burst will basically let you apply a gradient along the shape). All the rest of the settings can be tweaked to your liking.


We'll now create a bevel style for the two other texts: “tutorial number 2” and “”. You'll see that the two layers are rasterised, but the effect works on vector shapes and text, as well.


Apply the same settings for both. You can create a new “style” if you have a lot of text that you need to change, though. To do this, just click on “new style” after applying the setting and then give it a name.



Again, check the highlight opacity and make sure it isn't too light!


2 - Create the Plate Bevel


Create a new layer, and stamp/merge all the layers onto it.


You must hide the background layer first, though, so that the background doesn't get included to the new layer.


Here are the shortcuts:

SHIFT+CTRL+ALT+N [SHIFT+COMMAND+OPTION+N] to create a new blank layer (that doesn't prompt you for details).

SHIFT+CTRL+ALT+E [SHIFT+COMMAND+OPTION+E] to merge all of the visible layers onto the highlighted layer.


Alternatively, you can also create a new layer by clicking on the icon instead and then clicking on the layers panel menu and choosing to merge all of the layers.


Double-click on this new layer to open the the layer styles menu.

Apply the settings as shown: (don't worry; you will still get to play with the settings later, as needed).



You can keep the “contour” opacity and range as default.

This is how it should look:



3 - Here Comes the First Texture


Take the file called “rust texture” and merge all of the layers by going to the layers palette menu and choosing merge visible SHIFT+CTRL+E [SHIFT+COMMAND+E]. Then, duplicate it and place it on top of the working file. Close the rust texture file, but do not save it, so you can keep the layers intact.



You will now have to create a mask to hide the rust from the plate, except from the borders and some stains in the middle.


To do this, start by creating a black mask attached to the layer. Then, highlight the layer and press ALT [OPTION], while clicking on the “add layer mask” icon at the bottom of the layers panel.


Set the layer to the “multiply” blending mode at 100% opacity.


Take a big “artist” brush at full opacity (our is the “chalk” one at 1000 pixels) and paint over it in white to reveal the middle of the plate. Lower the brush opacity and finish painting with some semi-transparent strokes to leave some stains on.


Then, mask over the background limits, because your rust texture will affect the entire canvas for now.


The easiest way to do this would be by taking some masks that are already made. You can get a ready-to-use shape attached with the “vintage-sign” group, for instance.


Re-use the mask this way:


- Open the “path” palette.

- Highlight the “vintage sign” vector mask.

- CTRL+CLICK on the thumbnail.

- Now that you have an active selection, invert it (SHIFT+CTRL+I [SHILFT+OPTION+I]).

- Go back to the layers palette and select the rust texture layer mask.

- Fill it with black.


The mask should look like the next screenshot:



The image still looks a bit too “clean”, though, so try to add some “chips” in the metal. Just add a new “solid colour” adjustment layer with a black mask and take a big hard brush without any smoothing. Then, “hit” the canvas to reveal some dots. Try different shapes, opacities and sizes to get your desired effect. Set your “solid colour” to a light shade after that (our is slightly peachy one).



4 - Create a Reflection and a Rough 3D Texture


Stamp the layers on a new layer again, like we did in step 2. Again, do not include the background. We will create a lighting effect on this new layer with a texture in relief using the texture channel feature in the filter. 


For now, let's create a new alpha channel.


Go to the channel palette and hit the “create new channel” icon at the bottom of it. Change the name to “bump texture”. With this all black channel highlighted, go to filter>filter gallery and add a film grain filter (in “artistic”). Then, add a new filter “layer” (see next image) and select the “fresco” filter. You should have 2 filters stacked on the same alpha channel now. Hit “OK” to proceed.



With the alpha channel still selected, go to filter>blur, and blur the texture a little bit (about 1 pixel).


Go back to your top layer in the layers palette and apply the lighting effect filter (filter >render >lighting effect), with the settings as shown below. You'll also have to drag the spotlight in the preview window to match the positioning as in the screenshot.



Look at the “Texture channel” section and take care to choose the “bump texture” from the drop down menu. Mask this layer as before to hide the effect from the background (re-using the “vintage” vector mask).


5 - The second Texture


Take FC02_Texture image (that you've previously downloaded from the subscribers area) and duplicate it in the working file before placing it on top of the layers stack. Mask the background as done before (you could resize the layer to fit the plate instead, if you want). Change the blending mode to “pin light” and lower the opacity.


Double click on the thumbnail to open the layer styles menu. Change the “blend if” to blue instead of “grey”. Move the sliders as shown below (click ALT [OPTION] while dragging the sliders to “separate” the two triangles). 


This option allows us to replace some of the blue (and blue only) with the image on top. If the plate was red, of course we should have chosen “red” instead of “blue”. This will make things far less tedious.



We are nearly done now. Although you could leave things “as is” at the moment, it might be preferable to blend the overall colour feel a little bit.


We can add a “color balance” layer with more yellow on the highlights, for example, or more yellow and red in the mid-tones, as well as more blue and cyan in the shadows.


We can now lighten the image and reduce the saturation a bit to make it a bit “older”, too. To do this, just use Levels, or curves, or “hue/ saturation” adjustment layer, as needed.


TaDaaaa! You've done it!






FONT USED to create the layout:


How the “Letterpress Blocks" file becomes million-uses

At Fontscafe we know how busy you are, so we decided to create something for you that was both, multi-possibilities and very quick to use in order to get the visibility your business deserve.

We're happy to introduce you, not a font this time, but a tool for your communication!


Our dream is not to serve everyone, our dream is to serve who wants to make the difference!


So let’s get started having a first look to our new “10+1 Letterpress Blocks - Photoshop File”!



Did you see how simple is the realization of a new Letterpress blocks word? Amazing!


But, we talked before about infinite possibilities just in a few is that possible?

Watch the next 6 minutes video and you'll see it! Your creativity is going to fly….



We’re working to give you new tools and your feedback is important for us in order to serve you always better.


Would you like other ideas and/or ready tools like this one? Tell us you thought!



Would you like to find on something else in particular? How would you like Fontscafe helping you? Get in touch with us!

Vintage Photoshop Action - Create a Vintage Look in One Click!

Hello, and welcome to FontsCafe.


In this tutorial we will show you how to install the vintage Photoshop action created by us to add a vintage scratchy effect to your projects, which was a free gift to our subscribers.


Our subscribers regularly get premium gifts like this one throughout the year. At Christmas, FontsCafe gave away the "Making Lettering" free fonts family The list of awesome goodies keeps increasing all of the time. If you missed out on the goodies, subscribe right now so that you don't miss out on the next one. You'll also get instant access to other free fonts, textures, and more! 


Don't worry, this Photoshop action set is still available. You can purchase on our "exclusive on FontsCafe" page.


This action is composed from a set of 10 different patterns and we have provided 10 Photoshop actions to automatically apply the patterns to your design elements in just one click! We will demonstrate how to apply the patterns to your desing element using one of these actions and patterns. In order for the actions and patterns to work properly you must install them first on your system.


You can see how easy it can be through the video tutorial or reading (and downloading at the bottom of the page) the step by step tutorial below:


Video tutorial.


Step by step transcript.

Mac users:


If you are using a Mac based computer you will need to open up “Finder.




Then you will need to go to your hard drive, select “Users, “Your Name, and then go to “Library, “Application Support, “Adobe, “Photoshop, “Presets, and then you will need to open up the file that you downloaded from our site. Then, open a new window here, and you will need to copy the action file into the action folder which has the .atn file extension.




You will then need to do the same for the patterns file, which has the .pat file extension.


Windows users:


If you are using a Windows based computer, depending on your operating system, you will need to get to “My Computer so you can access your hard drive. Once you are at your hard drive you will need to select “Program Files, “Adobe, “Photoshop, “Presets, and then copy the files into the patterns and actions folder.


Loading the action:


Then, we can go back to our project here.


Let’s go to the actions palette here, with the “Play Button, and we will need to load the action. Go to the appropriate menu, go to “Load Actions, and then we’ve got the file in there. Go ahead and open that; you now have those actions loaded.




Are the Patterns installed correctly?


You will also want to make sure that the patterns are installed; one way that you can do this is to double click the file back in your finder.




Another way to check that the patterns are loaded, we can go up here to “Layer, “New Fill Layer, “Pattern, say “OK, and you can check here; it looks like here are some of the patterns that we’ve provided you.




If it didn’t load there, you can do the little arrow right there and say “Load Patterns". 




Playing with the Vintage Photoshop Action:


OK, let’s go ahead and cancel out of all this, now let’s see these actions in action.


First let's make sure that we have the correct layer selected that we want to apply the action to.

We will go back to the action palette over here, look at the distressed texture overlay set, and let’s choose one of these actions here and hit the play button.




Let’s look at our layer palette; we now have a nice vintage scratchy effect applied to our original image. And you can see we have a mask layer, and another working layer that we can do different effects to. The nice thing about this action is that it will not touch your original image. It's completely editable.



Let's go through a couple of ways that we can customize this effect; One of the first things you can do is change the color of this scratchy effect. You can pick through the color selector, or choose a color in your swatches that you already have picked out for your project, and we will click OK after choosing a color.




Another thing you can do is change the opacity of the mask layer. And that will either decrease the effect of the scratches on the image, or we can bring it back up to its full effect by setting back at 100% opacity.




We can also change the layer blending mode on the working layer. We can try Lighten, and see how that changes things up a little. Or we can try Multiply to give a different effect. You can also change the opacity of this layer to bring back in some of the original artwork.




We can also color the background.




We can also see what using a different color will do to the effect. We can see how this changes the effect.



These are only some of the ways you can customize the actions we have provided you, but the possibilities are infinite.


We hope that you have enjoyed this tutorial and come back to FontsCafe. In fact, why go?


If you've enjoyed this tutorial, please, SHARE IT!

And if you want also to learn more about patterns, check out FontsCafe's tutorial on "how to create a texture and save it as a pattern in the preset manager".




FONT USED for the layout:


When fonts and graphic effects come together to create a vintage layout. Photoshop tutorial 01

This is a Photoshop tutorial on how you can successfully render a vintage graphic layout.

Vintage graphics have a special nostalgic appeal that can work wonders for a variety of purposes.

When you include fonts that feel consistent with this vintage effect then the final result can be spectacular.



There are so many applications for this ability to create a vintage graphic layout that the possibilities are limited only by your imagination. This is a way that you can make your graphics stand out from the myriad other graphics that people see in a day.

Different is the name of the game and vintage graphics are instantly seen for being reminiscent of the good old days.  


This Photoshop tutorial will show you how you can take any image you like and give it a genuine vintage appearance. Anyone can do this if they know how but not everyone knows how to do it in a way that makes it look genuine and appealing. Those who can use the best tools and know how to use them for maximum effect are destined to be the most successful in their endeavors.

This tutorial is designed to show you some more Photoshop effects to achieve all your goals and set yourself apart from the crowd.


You will learn how to make your own vintage graphics that look genuine and appealing so that you can use this technique anytime you want.


The tutorial will show you different screenshots for Photoshop CS4 on a PC. The shortcuts are detailed for both PC and Macintosh, though; the equivalents of the latter will simply be shown in brackets, such as right-click [Ctrl+click].


To achieve a worn-out effect for a label, you will have to create a texture that looks like old cardboard first.

You can create your own texture following this tutorial  Photoshop tutorial: How to realize a texture that looks like an "old cardboard" and use it to create a vintage layout or download it already done from our "Subscribers area".


Once we have our texture, we can then apply it to a readily made design (you can use your own design, or download our original .psd layout HERE (22Mb) .

However, we will need to group the texture layers first. Select all the layers (Shift + Click the first and last layers) and drag and drop them onto the group icon at the bottom of the layers palette.



Then Right + Click [Ctrl + Click] the layer palette menu and choose “Duplicate Group” from the drop-down menu.



Your entire group should now be placed at the top of the design layer stack.  Transform this new group until it fits the label by clicking on Ctrl + T [Command + T]). Make sure the borders fit the label in the end and set the group to the “Darken” blending mode. This will ensure that the texture will only affect the design's lighter shades. Reduce the opacity as needed.

Then, mask out the group in the shape of the label. You don't have to trace it, though. Just select and highlight the layer called “Forma 1” and Ctrl + Click [Command + Click] the mask.

Go back to the group, highlight it, and click on the mask icon to enable a readily made mask. If you need to resize the group at this point, though, then you will have to unlink the group from the mask by clicking on the small chain between the two thumbnails. If you don't do this, you will end up resizing both the mask and the group.



When you're done, link them again by clicking in-between them. Ideally, you should leave a small white border between the label and the texture to show the “paper” thickness, though. 



Apply a Filter>Ocean Ripple to the mask to roughen up the border. Blur it slightly and resize it to fit the label. Don't forget to unlink and relink the mask to the layer!

We will now create a fake fold on the top-left corner of the label. Reset the standard foreground and background layer (hit D) and use a big brush to trace a straight line across the label (press shift while painting), reverse the colors (hit X) and draw a straight line just beside the first one. You should now have a black line near a white line.



Change the blending mode to “Overlay” and reduce the opacity to around 5-10%. For more roughness, apply an “Underpainting” filter to the strokes by clicking on Filter>Artistic>Underpainting).

Blur the results a little bit and double-click on the space near the layer name to prompt the layer style menu.

Tick the box near “Pattern Overlay” and choose a rough pattern (this is optional, though).  We will now take care of the halftone effect on the coloured part (the print).

Select all of the layers that have colour informations in them (in our case, this would be the entire box layout group), copy them by dragging and dropping them onto the new layer icon), and go the layers palette menu.

Once there, choose “Merge Layers”. Then, go to Filter>Pixelate>Colour Halftone.



Set it to overlay and lower the opacity. Copy this layer and apply a linear light mode to apply the halftone effect on the edges. Lower the opacity there, as well.

Drag both the halftone layer between the box layout and the texture, and mask them with the same layer mask as the texture group (use Alt + Click [Option + Click] on the texture group mask and drag it to the halftone layers). This will ensure that the halftone won't affect the drop shadow or the green background. You will have to paint the mask inward, though, if you want to “protect” the edges. Then, just paint a few pixels with a black hard brush onto the 4 edges of the label.

Since the colours are too bright now, we will have to desaturate them and lighten them up a little bit. To do this, select a “Hue/Sat” adjustment layer in the adjustment layers icon drop-down menu. Instead of selecting “Master”, use the drop-down menu shown below and lower the saturation and increase the lightness there. Do the same with the rest. This way, you won't change any other other colours, like the texture colour and the green background colour. Basically, doing this will save you a mask.



We will now “destroy” the printed part just by applying some layers with carefully selected blending modes. This will make the editing non-destructive.

Add a new blank layer and fill it with black. Drag it just on top of the halftone layers and clip it to them (Alt + Click [Option + Click] in the tiny space between the 2 layers.



On this layer, apply a heavy noise at around 100 and copy it. Make sure you've clipped the new layer, too. Then, change the blending modes for the two layers to screen, so that the patches and noise only show up on the parts that are “lighter than black”. Turn off the visibility of the “copy”.

On the first layer, use a low opacity soft brush in white to create patches. Set it to “screen”, so that only the white parts affect the underlying layer. You can choose a round brush with a low flow for this, and paint on random strokes. See the result of this layer here:



Set the opacity very low.  On the “copy” layer, turn on the visibility and use a “Dry Brush” filter (Filter>Artistic>Dry Brush). Tweak the settings until you can see some flecks (my settings are 8/8/3). The blending mode should be on “screen”. As usual, change the opacity as needed.


We're done!


Now, this is how it should look. Do take note that the hue/sat layer may be on top in your case, though. Fortunately, the order isn't very important. You just have to make sure that it stays on top of the “halftone” layers. 



Don't hesitate to name your layers properly. Replace all of the “filtered layers” with “smart filtered” layers (smart objects), for example, and try to group relevant layers together all he time, so that you won't have any trouble sorting out your effects in the end.








FONTS USED to create the vintage layout:



Photoshop tutorial: How to realize a texture that looks like an "old cardboard" and use it to create a vintage layout.

To achieve a worn-out effect for a label, you will have to create a texture that looks like old cardboard first - with all of the stains, the sun discolourations, the patterns, and the proper textures included.


The tutorial will show you different screenshots for Photoshop CS4 on a PC. The shortcuts are detailed for both PC and Macintosh, though; the equivalents of the latter will simply be shown in brackets, such as right-click [Ctrl+click].


Whenever possible, we will also try to make sure you can edit everything, just in case you have to make changes to the parameters in your own images. Sometimes, we might also replace newer features with ones that cannot be edited, like smart objects, so that the users of earlier versions will still be able to understand and use them. Naturally, you can still replace these with other methods that are available in your version, as well. 



Create a new document that is roughly the same size as your label and has the right resolution for your intended purpose (print or display).

Open a colour fill adjustment layer and choose a suitable colour (in this case, that would be beige).



be sure your foreground and background colours are black and white (press D, just in case), then add a new blank layer and go to filters> clouds.



Transform this layer because the pattern will start off too thick by clicking on Ctrl + T [command + T]. Then, extend this layer by dragging any of the nodes (on the corners and in the middle) far beyond the canvas. You might have to zoom out in order to see all of the transform nodes as you drag, though. Once you get a pattern that isn't too patchy, hit enter. To get rid of any excess bits, go to Image>Trim.



Copy this layer, set it to “Linear Light” in the blending mode and then set the opacity to 30% (or anything that would work well). Transform this new layer by extending it a little bit and rotating it to create various patterns. Experiment until you got something nice. Select your two layers, then group them together Ctrl + G [command + G] and lower the opacity of this group to about 30%.



Make a new neutral grey layer by clicking on Alt + Click [Option + Click] on the new layer icon. Then, select “overlay” on the drop-down menu and tick the “Fill with overlay-neutral color” box: see image below.



Go to Filters>Noise and apply a huge amount of monochromatic Gaussian noise (our is at around 100px). Lower the opacity to 75%. Optional: Double-click on an empty space near the layer name to prompt the “Layer Style” menu. Then, tick the box next to “Pattern Overlay” and choose a suitable pattern, you can go to the drop down menu to try out different ones, if you want.


Ours has a cardboard texture. You can choose to create it by yourself following the relative Photoshop tutorial: How to create a texture and save it as pattern in the preset manager , or downloading it already done from our "Subscribers area" (the .zip folder include both .psd file and .pat)


Afterwards, set the luminosity to an opacity of 30%. 



Make a new blank layer, and use the rectangle selection tool to select the entire canvas, except for an equal space around the borders. Invert the selection by clicking Ctrl + Shift + I [Command + Shift + I]), and fill it in with the color black.



Copy this layer and hide the new one before going back to the first border layer. Apply a big blur at around 50% by going to Filter>Blur>Gaussian blur. Then, on the copied layer, apply a motion blur at around 500 px by going to Filter>Blur>Motion Blur. Then, randomise the border effect and set the opacity to 30%.  Set each border layer to “Soft Light”.  Make a new blank layer and grab a low opacity brush - preferably something with some texture, like a wet media brush.



Paint some random stains in black in varying sizes and with different opacity levels. Don't overdo this, though. Blur the layer content a little bit - maybe around 1px - and change the blending mode to “Overlay”.

Make another blank layer and paint on it with a big black stroke at low opacity, but use the blending mode “Luminosity” this time around instead to give off a look of black dust. Beige colours should never show up here. Again, lower the opacity as needed.



You're done. You should now have a texture layer that you can place on top of any of your designs and resize as needed. You can also change the blending mode anytime.

The most important thing to remember, though, would be not to flatten it! Simply change the “fill” adjustment layer colour, the pattern overlays and some blending modes, and apply a few filters in order to get thousands of different textures. Once you end up with something that you actually like, go to Window>Layer Comp to display a layer composition panel, in which you can save all of your changes in one file. Just name them accordingly.


That's it!


Now you're ready to create a great vintage layout following the next tutorial When fonts and graphic effects come together to create a vintage layout. Photoshop tutorial 01


Photoshop tutorial: How to create a texture and save it as pattern in the preset manager

This might seem like a very easy task for those who are experts with Photoshop tools, but there are a lot of beginners out there who are sure to appreciate having a simple tutorial that will help them learn some Photoshop tools in an easy step-by-step method.


Now, if you’re an expert, then you might be more interested in When fonts and Graphic Effects Come Together to Create a Vintage Layout - Photoshop Tutorial 01.


If you’re a beginner, however, this is one of the most helpful tools that will help you expand your creativity and give you wider options to elaborate on your layouts. So, let's learn more about this…


First create a new document a document.


Even though your pattern file could be something around 10px x 10px, create a bigger document. This will help you sort out the potential repetitive errors and figure out the rendering at full size.


Then, create a motif. In this case, it is a vertical black line that is 7 pixels wide, repeated several times.



Then, apply some noise and some blurring to this motif. Decrease the contrast, too, so that the the black lines turn dark grey and the white background turns light grey.



We carefully selected the pattern from this motif with a square selection (press shift while dragging to constrain to square). We selected this motif in order to include a black line on the left and a white line on the right. Now, the pattern is called “repeating”.

Go to Edit>define pattern and name it when prompted.


Now you have to test it. Create a new blank document and go to Edit>fill. Instead of selecting “foreground color" in the “content” drop box menu, select pattern. In the list at the end, select your new pattern. You should see if the repeating motif blends well. 


You can check the scalability and different blending modes by creating a new blank layer, opening the layer styles menu and ticking the “pattern overlay". Play with it as needed.


You can now include it into “sets” by saving it through the drop down menus, as described above:



If you want to create a completely new set, click on “reset pattern” first to clear the list. Then, create your patterns, name them and once the set is created, save it.


If you ever want patterns from other sets, though, you'll have to “load” the new sets with the ability to amend the list or reset the list. If you only have a few of them, just amend them. However, if your set list is huge, you might want to reset them instead since Photoshop takes quite some time to load at the startup.

This is also why your splash screen may seem incredibly long sometimes…

In general, you can pretty much do the same things through the “preset manager”. The only difference is that you will have access to all of your presets (brushes, gradients etc...). Go to Edit> preset manager.



To install an existing pattern (.pat file) you have simply to put the .pat file into the folder /Users/{username}/Library/Application Support/Adobe/Adobe Photoshop CS3/Presets/Patterns (on mac OS X) or C:\Program Files\Adobe\Photoshop\Presets\Patterns (on Windows) and then “load” it as described above.


Now you're ready to learn How to realize a texture that looks like an "old cardboard" and use it to create a great vintage layout following the next tutorial When fonts and graphic effects come together to create a vintage layout. Photoshop tutorial 01





Syndicate content Syndicate content