Material UI Kit

Get weekly design tips, tutorials, freebies, and articles to your inbox

Material UI Kit


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Neon Effect Type


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

The Pros and Cons of Card-Based Design

What is Card-Based Design and Should you be Using it?

It may seem like every website you visit lately is migrating to card-based layouts over their traditional layouts. Taking cues from social media platforms, this trend has become hugely popular across all types of websites. The question is why, and should you be doing the same?

What is Card-Based Design?

Card-based layouts have been around in web design for longer than you may think are more popular right now than ever. The growing trend of using cards can be seen across some of the biggest websites in the world including Google, Twitter, Facebook and Instagram. Card-based layouts were pioneered by sites such as Pinterest which used a Masonry style grid of cards and Microsoft also implemented it into their operating systems with the Metro design language in 2006.

Examples of Card-Based Design

Pinterest

pinterest

Google+

google+

Silk Tricky

silktricky

Herman Miller

herman miller

Fire Box

fire box

Fibb

made by fibb

How to Design with Cards

Designing a website with cards requires a modified approach to traditional layouts. Cards are nearly always displayed in a grid or list of some sort, your job as a designer is to first figure out what portion of your design will feature cards and where other elements such as branding and navigation will appear.

pinterest

And then to decide how to create hierarchy within your cards, traditional methods such as placing more important content nearer the top of the page may work in some cases, but the very nature of cards is that they are scannable rather than an ordered list. Content that you want to stand out needs to do just that. This can be achieved by either by making it larger than other cards, using an eye-catching image of some sort or darker colours than other cards etc.

Pros of Card-Based Design:

Adaptive

Having your content contained within individual cards makes them easy to re-arrange and re-order. This is particularly important when it comes to responsive design for various devices and screen sizes. For this reason, cards make perfect sense to designers.

Scan-ability

Card-based layouts present your visitors with lots of short bursts of information, that are easy to scan and find what they need. Where as traditional layouts may dedicate their entire homepage to saying “hello” and telling you about a company, cards can show snippets of content from all across the site, meaning that visitors are more likely to find what they are looking for on the very first page they land at.

Bite-Sized Chunks of Information

Cards are good for communicating quick stories, things which don’t necessarily require a whole paragraph of text, let alone their own dedicated page, but are important nonetheless. Much like on Social Media, these shorter straight to the point snippets of information are easier to digest and more likely to actually be read by your visitors/followers.

And you can always provide a ‘Read More’ link if you do have more information to provide for those who are particularly interested.

Social Media Integration

As briefly mentioned in the last point, cards have a lot in common with social media. Tweets, Facebook posts, Instagram photos etc. all fit the criteria of cards. So they are ideal for integrating into your website.

Cons of Card-Based Design:

Less Consistency

Unless all of your widgets visually look the same (which would be a bad practice in itself), a card-based design may require you to use a larger range of colours, images, fonts or other variables to distinguish between cards. Less consistency in this fashion can make your layout look disorganised.

Lack of Traditional Hierarchy

Although there are methods to bring attention to more important cards, the lack of a traditional hierarchy in which more important content is displayed first, can have a negative effect. Especially for visitors to a website who are looking for a specific piece of information, throwing a grid of seemingly unorganised snippets of content at them may leave them confused and not knowing where to look.

Not Suitable for Some Websites

Card-based design may not be suitable for smaller projects or projects that are primarily information based. For a website with the sole purpose of proving detailed information, a card-based design would be a step in the wrong direction. It would be counterintuitive to break a design up into multiple isolated segments, when all your visitor really wants to do is read the information you’re offering.

Likewise, for smaller projects which simply don’t have a lot of content, switching to a card-based design will only confuse your visitors. Smaller websites that have less content tend to be easy to navigate anyway, so why fix what isn’t broken?

Is Card-Based Design More Than Just a Trend?

When we think of web design trends, we think of things that have been and gone. GIFs were a big trend once (not just for memes), Skeumorphism was a huge trend not long ago too, and Flat design is probably the most popular recent trend which is fading slightly.

However some ‘trends’ that have been around from the beginning have proven themselves to be much more than just passing fads. For example common UI elements that we see on a daily basis such as dropdown menus, header images and sidebars were new once. Some trends just make a lot of sense and end up ultimately becoming the norm.

If cards are just a trend, one thing for sure is that it will be sticking around much longer than most. Whether or not you should use them, depends on the project but honestly I think the Pros outweigh the Cons in most cases.


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Watercolor Isolated Textures


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Seamless Dark Paper Textures


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Shoreditch 2 - Sans Serif Font (Updated)


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Seamless Vector Camouflage Patterns


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Vector Living Room Scene Creation Kit


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Unique effect for website headers and app splash screens

Create an Abstract Geometric Gradient Background with Photoshop

This tutorial will show you the process behind creating one of our most popular recent freebies on Medialoot, the Geometric Gradient Backgrounds pack. This technique uses vector shape layers, layer styles and of course gradients to create a stunning abstract background.

Step 1

Launch Photoshop and create a new 3000 x 3000 pixel document. The size of the document can be changed depending on your intended use.
how to make an abstract geometric gradient background

Step 2

Create a new Gradient Fill layer for the background with three stops, #9e7cd1 at 0%, #ed8dba at 50% and #edad91 at 100%.
how to make an abstract geometric gradient background

Step 3

Draw a white oval shape using the Ellipse tool from the top of the canvas to the bottom and align it horizontally with the center of the canvas.
how to make an abstract geometric gradient background

Step 4

Double click the oval shape to bring up the Blending Options, set the Blend Mode to Soft Light, Opacity to 50% and Fill Opacity to 75%. This will allow us to use a white stroke which is slightly more visible than the fill.
how to make an abstract geometric gradient background
Add a white stroke, set the size to 3 pixels, Position Outside and Blend Mode Soft Light. The effect is subtle but will become more visible as we add more layers to the composition.
how to make an abstract geometric gradient background
how to make an abstract geometric gradient background

Step 5

Duplicate the oval shape and rotate it 60° around the center.
how to make an abstract geometric gradient background
And repeat once more.
how to make an abstract geometric gradient background

Step 6

Group all 3 oval shapes together (CMD+G or CTRL+G) and set the Opacity of the group to 50%
how to make an abstract geometric gradient background

Step 7

Duplicate the group and rotate it 30°.
how to make an abstract geometric gradient background

Step 8

Now duplicate all 6 oval shapes and put them in a new group with 75% Opacity.
how to make an abstract geometric gradient background

Step 9

Resize the new group whilst holding down the shift key to constrain proportions. Reduce the overall size to approximately 65% or to where the points shown below intersect.
how to make an abstract geometric gradient background
how to make an abstract geometric gradient background

Step 10

Duplicate the top group.
how to make an abstract geometric gradient background
Select each of the oval shapes in the new group and change their fill colors to black, then set their Opacity to 10% and Fill to 75%.
how to make an abstract geometric gradient background

Step 11

For a final touch, lets add a bit of noise. Create a new blank layer and fill it with white.
how to make an abstract geometric gradient background
Optionally, you can tidy up the layers panel by creating a new group for the noise layer and also grouping the existing layers together.
how to make an abstract geometric gradient background

Step 12

With the Noise layer selected, go to Filter > Noise > Add Noise.. and enter 200% for the Amount, Gaussian for Distribution and check the Monochromatic option.
how to make an abstract geometric gradient background

Step 13

Set the Blend Mode of the Noise layer to Soft Light and the Opacity to 20%. This will make the noise effect more subtle.
how to make an abstract geometric gradient background

Result & Variations

Here is the final result, you can now play around with it and tweak the colors if desired.
how to make an abstract geometric gradient background
The feel of the whole image can be changed by simply updating the background gradient layer. Here are a few examples:
how to make an abstract geometric gradient background
how to make an abstract geometric gradient background
how to make an abstract geometric gradient background

Download Geometric Gradient Backgrounds

geometric gradient backgrounds
These free backgrounds combine vivid gradients and abstract geometric overlays for a unique effect. They are great for use in website headers, app splash screens and other backgrounds. Included in the pack are 8 high resolution (3000x3000px) JPG files.


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Lost at Sea Script


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Forever Found – Handwritten Font


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Quay - Bootstrap Admin Template


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Mini Sparkles - Vector Shapes & Scatter Brushes


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Vector Graphs & Charts (SVG)


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Using offset layers and dashed strokes for a retro effect

Create a Mouthwatering Donut Icon with Illustrator

This step by step tutorial will teach you how to draw a mouthwatering donut icon in Adobe Illustrator using basic shapes and filters, then offset its layers and use dashed strokes effectively to give the donut a fun retro effect.

Step 1

Launch Illustrator and create a new 800 x 600 pixel RGB document.
draw a donut in illustrator

Step 2

Draw a new 380 x 380 pixel circle in the center of the document using the Ellipse tool and set the fill to #EACBA9.
draw a donut in illustrator

Step 3

Draw another smaller circle aligned to the center of the first circle. Width and height 125 pixels.
draw a donut in illustrator

Step 4

Select both circles and subtract the smaller circle from the large one using the Pathfinder.
draw a donut in illustrator

Step 5

Copy and paste the shape in place, remove the fill from the top shape and give it a 10 point stroke with the color #9B7651 instead.
draw a donut in illustrator

Step 6

Copy and paste the original donut shape in place again, set the fill to black and the stroke to none.
draw a donut in illustrator

Step 7

Duplicate the black shape in place, and use the keyboard arrow keys to nudge the top shape up 40 pixels and right 10 pixels.
draw a donut in illustrator

Step 8

Select both black shapes and subtract them.
draw a donut in illustrator

Step 9

Set the Blending Mode to Soft Light and the Opacity to 50% using the Transparency window. Then position the black shape between the original donut shape and the stroke layer.
draw a donut in illustrator

Step 10

Similar to the last few steps, duplicate the original donut shape again and set the fill to white this time.
draw a donut in illustrator

Step 11

Duplicate the white shape in place and use the keyboard arrow keys to nudge it down 12 pixels and left 3 pixels
draw a donut in illustrator

Step 12

Select both white shapes and subtract them. Position the white shape between the original donut shape and the stroke layer.
draw a donut in illustrator

Step 13

Draw a new circle shape aligned to the center of the donut, set the fill to pink #F4A8D2.
draw a donut in illustrator

Step 14

Select the pink circle and apply Effect > Distort & Transform > Zig Zag.. with the settings shown below.
draw a donut in illustrator

Step 15

Select Expand Appearance from the Object menu to flatten the Zig Zag effect.
draw a donut in illustrator

Step 16

Draw another small circle, same as last time. Width and height 125 pixels.
draw a donut in illustrator

Step 17

Subtract the small circle from the pink shape.
draw a donut in illustrator

Step 18

Copy and paste the pink shape in place. Remove the fill from the top shape and give it a 10 point stroke with the color #9B7651 instead.
draw a donut in illustrator

Step 19

Copy and paste the original pink shape in place again, set the fill to black and the stroke to none.
draw a donut in illustrator

Step 20

Duplicate the black shape in place, and use the keyboard arrow keys to nudge the top shape up 16 pixels and right 4 pixels.
draw a donut in illustrator

Step 21

Select both black shapes and subtract them.
draw a donut in illustrator

Step 22

Set the Blending Mode to Soft Light and the Opacity to 50% using the Transparency window. Then position the black shape between the pink shape and the its stroke layer.
draw a donut in illustrator

Step 23

Copy and paste the original pink shape in place again, set the fill to white and the stroke to none.
draw a donut in illustrator

Step 24

Duplicate the white shape in place, and use the keyboard arrow keys to nudge the top shape down 12 pixels and left 3 pixels.
draw a donut in illustrator

Step 25

Select both white shapes and subtract them.
draw a donut in illustrator

Step 26

Position the white shape between the original pink shape and its stroke layer.
draw a donut in illustrator

Step 27

Use the Line Segment tool to draw a short line at an angle, roughly 25 pixels long. Set the stroke to 10 points.
draw a donut in illustrator

Step 28

Select Expand from the Object menu, check the Stroke option and click OK.
draw a donut in illustrator

Step 29

Set the fill color to green #A1D367 and add a 5 point stroke with #C96DA4 to create the first sprinkle.
draw a donut in illustrator

Step 30

Copy and paste the sprinkle, change the position and rotation slightly then switch the fill color to yellow #FFC02E.
draw a donut in illustrator

Step 31

Copy and paste the sprinkle, change the position and rotation slightly then switch the fill color to blue #6BB4E7.
draw a donut in illustrator

Step 32

Repeat the last 3 steps until the donut is covered with sprinkles, in this example I used 12 sprinkles in total.
draw a donut in illustrator

Step 33

Now we can add some finishing touches. Select the main donut stroke layer, select round end caps and enter 190, 20, 20, 20, 1000 pt into the dashed line fields.
draw a donut in illustrator

Step 34

Select the pink icing stroke layer, select round end caps and enter 540, 20, 20, 20, 1000 pt into the dashed line fields.
draw a donut in illustrator

Step 35

Draw a black oval shape below the donut 180 x 16 pixels for the shadow, and align it horizontally to the center of the donut.
draw a donut in illustrator

Step 36

Set the Opacity of the shadow to 10%.
draw a donut in illustrator

Step 37

Finally, we can add a background color to finish things off. Draw a rectangle that fills the artboard, and place it below all other layers. Set the fill to #C7DFEA.
draw a donut in illustrator

Result

Here is the final result. I hope you enjoyed following this tutorial and creating your own mouthwatering donut icon. The main skills to take away from this exercise are how to use multiple offset layers for shadow and highlight effects, as well as how to use the zig zag filter and dashed strokes.
draw a donut in illustrator


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Seamless Icon Patterns


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

iPhone App Perspective Mockup - Vol 6


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Email List Popup Templates (PSD)


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Ink Pen Illustrator Brushes


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Geometric Gradient Backgrounds


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Vintage Paper Mockups


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Place a Left Positioned Sidebar Below the Main Content on Mobile

How to Move a Responsive Sidebar’s Position with CSS

Most responsive layouts have multiple columns at full-size, which then collapse on mobile devices to accommodate the smaller display size. Unless you have unusual coding practices, the collapsed columns will always be automatically stacked in the order they appear in the source code. This means that columns on the left side of the screen at full size, will be at the top of the stack on mobile and vice versa.

Assessing The Problem

Logically, the most important content should be displayed at the top of the stack on mobile and therefor on the left at full size. However sometimes this isn’t the case, what if your full size design has a sidebar on the left, and the more important main content on the right? Or a 3 column layout with the main content in the center of the page and two less important sidebars on the left and right?

Let’s take 3 column layout example and figure this out. Here is what we want the design to look like on mobile and at full size:
how to rarrange sidebar with css
1 is the main content, 2 is the left sidebar and 3 is the right sidebar

The Code

Here is an example of the typical code used for a simple responsive 3 column layout.

HTML:

<div class="wrap">
	<div id="main-content"><p>Main Content</p></div>
	<div id="sidebar-left"><p>Left Sidebar</p></div>
	<div id="sidebar-right"><p>Right Sidebar</p></div>
</div>

CSS:

/*Base Mobile Layout*/
.wrap {
	width: 90%;
	margin: 0 auto;
}

#main-content, #sidebar-left, #sidebar-right {
	width: 100%;
	float: left;
}

/*3 Column Layout*/
@media only screen and (min-width: 1024px) {
	.wrap {
		width: 1024px;
		margin: 0 auto;
	}
	
	#main-content {
		width: 50%;
		float: left;
	}
	
	#sidebar-left {
		width: 25%;
		float: left;
	}
	
	#sidebar-right {
		width: 25%;
		float: left;
	}
}

/*Wide Layout*/
@media only screen and (min-width: 1200px) {
	.wrap {
		width: 1140px;
		margin: 0 auto;
	}
}

Working from mobile up we have put the main content column first, then the left and right sidebars follow. This is how we want the design to display on mobile, and is also the correct hierarchy for search engine and accessibility purposes.

The problem is that, our design dictates that the left sidebar should be on the left at full size, but with this code it will render in the center. And no matter what you do, CSS will always float elements in the order they appear in the HTML. So, we need to move that column above the main content somehow at full size.

Moving The Sidebar

A possible solution is to physically move the left sidebar code above the main content with Javascript, this can be done and does work. However relying on Javascript is not always the best solution, it can cause conflicts with other scripts on the page and may be slow or not supported at all with some browsers.

A better solution is to leave the HTML as-is and use CSS instead. You may be thinking about using breakpoints and display:none to toggle the columns on mobile and at full size. Stop that now, using display:none does not prevent content from loading, it only prevents it from displaying, so data loading times will take a hit and your content will duplicated for search engines and anybody viewing the site without loading CSS.

However, by using position: relative instead of floats, we can rearrange the layout freely:

/*Move Sidebar Position*/
@media only screen and (min-width: 1024px) {
	.wrap, #main-content, #sidebar-left, #sidebar-right {
		position: relative;
	}
	
	#main-content, #sidebar-left, #sidebar-right {
		top: 0;
	}
	
	#sidebar-right {
		right: 0;
	}
	
	#sidebar-left {
		left: -50%; /*Width of #main-content*/
	}
	
	#main-content {
		left: 25%; /*Width of #left-sidebar*/
	}
}

This code applies position: relative to the .wrap element and all 3 columns. The top position for all 3 columns is set to 0, and then we stick the right sidebar to the right, move the left sidebar left -50% (negative the width of #main-content) and move the main content left 25% (the width of #left-sidebar) to rearrange the columns.

(Optional) Add a 2 Column Breakpoint

how to rarrange sidebar with css
We can add an extra breakpoint between 768px and 1024px in which the main content column is full width at the top, and the two sidebars are displayed as columns below.

/*Optional 2 Column Layout*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	#sidebar-right {
		width: 50%;
	}
	#sidebar-left {
		width: 50%;
	}
	#main-content {
		position: relative;
		top: 0;
		left: 0;
	}
}

Full Code & Demo

See the Pen Responsive 3 Column Layout by Tony Thomas (@medialoot) on CodePen.



Conclusion

If you want to rearrange columns in a responsive layout, I strongly suggest using this method over javascript. It is extremely flexible and can be adapted to layouts with any number of columns, however you should always try to place the most important content higher up in the HTML hierarchy whenever possible to avoid needing to use this technique at all. Hopefully you have found this useful, thanks for reading!


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Vector Line Icons - Color


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

iPhone App Perspective Mockup - Vol 5


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Social Sharing Buttons


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Vintage Leather Logo Mockups


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Vector Line Icons (Emoji Add-on)


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Say no to long shadows

3 Simple Techniques to Create a Diffuse Shadow in Photoshop

Diffuse shadows are a type of box shadow which give the illusion of more depth than a regular drop shadow. This effect is achieved by making the shadow smaller than the source object and offsetting it in the direction of a light source. This tutorial will cover 3 different methods for creating diffuse shadows in Photsohop depending on the situation.

Technique 1: Feather

This technique is the quickest and easiest, it doesn’t offer as many options as the other methods and it only works on vector layers, but it does give you complete manual control over the size, amount of blur and offset.

Step 1

Select the layer that you want to cast the shadow, with this technique it must be a vector shape layer.
how to create a diffuse shadow effect

Step 2

Duplicate the layer and select the version that is lower down in the layers panel. Rename this layer to ‘Shadow’.
how to create a diffuse shadow effect

Step 3

Enter Transform Mode (CTRL+T or CMD+T), set the anchor point to the bottom center and enter 80% into the W and H fields.
how to create a diffuse shadow effect

Step 4

Nudge the ‘Shadow’ layer down 20 pixels. (This is for a simple 90° shadow as shown in the example below, you can get creative with the direction and distance if desired)
how to create a diffuse shadow effect

Step 5

Open the Properties window and enter the amount of blur you want in the Feather field.
how to create a diffuse shadow effect

Step 6

Set the opacity of the ‘Shadow’ layer.
how to create a diffuse shadow effect

Step 7 (Optional)

Link the original shape and ‘Shadow’ layers together so that when you move one, the other follows.
how to create a diffuse shadow effect

Result

how to create a diffuse shadow effect

Technique 2: Drop Shadow

This technique is great for those who feel more comfortable using the Layer Styles interface, and like the options that it offers including Global Light, Spread, Contour and Noise.

Step 1

Select the layer that you want to cast the shadow, with this technique it can be a bitmap, vector or any other kind of layer.
how to create a diffuse shadow effect

Step 2

Duplicate the layer and select the version that is lower down in the layers panel. Rename this layer to ‘Shadow’.
how to create a diffuse shadow effect

Step 3

Enter Transform Mode (CTRL+T or CMD+T), set the anchor point to the bottom center and enter 80% into the W and H fields.
how to create a diffuse shadow effect

Step 4

Add a Drop Shadow Layer Style to the ‘Shadow’ layer with 90° angle, 20px Distance and 50px Size. (This is for a simple 90° shadow, you can get creative with the angle, distance and size if desired)
how to create a diffuse shadow effect
how to create a diffuse shadow effect

Step 5 (Optional)

Link the original shape and ‘Shadow’ layers together so that when you move one, the other follows.
how to create a diffuse shadow effect

Result

how to create a diffuse shadow effect

Technique 3: Smart Object

This technique is most suited to more complex shapes including bitmap images and groups of multiple layers. It requires creating a Smart Object, which may be overkill for simple shapes but will save you time in the long run with objects that change size and/or shape regularly.

Step 1

Select the layer or layers that you want to cast the shadow, with this technique it can be a group or multiple bitmap and vector layers.
how to create a diffuse shadow effect

Step 2

Convert the group or layer(s) into a Smart Object.
how to create a diffuse shadow effect

Step 3

Duplicate the Smart Object and select the version that is lower down in the layers panel. Rename this layer to ‘Shadow’.
how to create a diffuse shadow effect

Step 4

Add a Color Overlay Layer Style to the ‘Shadow’ layer with color #000000 and Opacity 100%.
how to create a diffuse shadow effect

Step 5

Enter Transform Mode (CTRL+T or CMD+T), set the anchor point to the bottom center and enter 80% into the W and H fields.
how to create a diffuse shadow effect

Step 6

Nudge the ‘Shadow’ layer down 20 pixels. (This is for a simple 90° shadow as shown in the example below, you can get creative with the direction and distance if desired).
how to create a diffuse shadow effect

Step 7

Apply a Guassian Blur filter to the ‘Shadow’ Smart Object with 25px Radius.
how to create a diffuse shadow effect

Step 8

Set the opacity of the ‘Shadow’ layer.
how to create a diffuse shadow effect

Step 9 (Optional)

Link the original Smart Object and ‘Shadow’ Smart Object layers together so that when you move one, the other follows.
how to create a diffuse shadow effect

Result

how to create a diffuse shadow effect

Conclusion

There are lots of different ways to achieve this same diffuse shadow effect in Photoshop, with these 3 techniques in your arsenal you should be able to quickly and easily deploy the most appropriate method and add cool shadows to your designs. Using Sketch? Techniques 1 and 2 can be translated with some minor tweaks.


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Vector Random Speckle Brushes


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Hand Drawn Vector Mountains


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Ocean - Flat UI Kit


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Slimline Keynote Presentation Template


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Mockup your Tee designs in real world settings

How to Mockup a T Shirt Design on a Model with Photoshop

This tutorial demonstrates how to take t-shirt artwork and mock it up on a real world model photo. This technique can be applied to any appropriate photo of a model wearing a plain shirt or vest etc. Smart Objects, Layer Masks and Displacement Maps are the main focus of this tutorial.

Step 1

First we need a photo of a model wearing a plain shirt, and also the artwork for the shirt. The model photo I am using is this photo from Pexels. And this logo from the Vintage Logos & Emblems resource on Medialoot.
photoshop a t shirt design onto a model photo
photoshop a t shirt design onto a model photo

Step 2

Open the model photo in Photoshop, and paste the logo in from Illustrator. Select the Pixels option when pasting (because pasted Vector Smart Objects cannot be freely distorted the same way as pixels or Smart Objects created within Photoshop).
photoshop a t shirt design onto a model photo

Step 3

Before placing the artwork, increase the size of the logo considerably by entering 1000% for the width and height values.
photoshop a t shirt design onto a model photo

Step 4

Place the artwork and convert it to a Smart Object.
photoshop a t shirt design onto a model photo

Step 5

Enter Transform mode (CTRL+T or CMD+T) and line the artwork up with the angle the model is standing at. (Tip: Hold down the CTRL or CMD key and drag the individual corners). It is okay if some of the artwork overlaps the model’s hair or goes off the body slightly.
photoshop a t shirt design onto a model photo

Step 6

Duplicate the background layer and move it to the top (CTRL+SHIT+] or CMD+SHIFT+]). Then desaturate the layer (CTRL+SHIFT+U or CMD+SHIFT+U).
photoshop a t shirt design onto a model photo

Step 7

Bring up the Levels adjust (CTRL+L or CMD+L) and tweak the shadows and highlights to bring out as much contrast as possible without losing detail.
photoshop a t shirt design onto a model photo

Step 8

Copy and paste this layer into a new Photoshop document and save it as ‘displacement-map.psd’ somewhere easy to find.
photoshop a t shirt design onto a model photo

Step 9

Go back to the original document and create a Clipping Mask using the Background Copy and Artwork layers. Set the Blending Mode of the Background Copy layer to Screen and Opacity to 25%.
photoshop a t shirt design onto a model photo

Step 10

Duplicate the Background Copy layer and set the Blending Mode to Multiply and Opacity to 50%.
photoshop a t shirt design onto a model photo

Step 11

Select the original Background layer and go to Filter > Distort > Displace… enter 5 for the Horizontal and Vertical scale then click OK and choose the ‘displacement-map.psd’ file that you saved in step 8.
photoshop a t shirt design onto a model photo
photoshop a t shirt design onto a model photo

Step 12

Select the Artwork layer and create a new Layer Mask (Reveal All).
photoshop a t shirt design onto a model photo

Step 13

Set the foreground color to black and with Paint Brush tool carefully paint over any areas of the Artwork which overlap the model’s hair or are off her body.
photoshop a t shirt design onto a model photo

Step 14

Finally, to make the result look more realistic we can emulate the shallow depth of field in the photo by applying a subtle Tilt-Shift blur to the Artwork layer. Note: This requires the Blur Gallery feature introduced in Photoshop CS6, alternatively you can rasterize the layer and manually blur the edges using the blur tool.
photoshop a t shirt design onto a model photo

Result & Conclusion

And that is how you place t-shirt artwork onto a photograph of a model using Photoshop. This same method can be used on any appropriate model photo, but to make your own life easier, I recommend either taking professional photos or looking for stock photos which clearly display a large section of a plain item of clothing.
photoshop a t shirt design onto a model photo


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Desktop Screen Vector Icons


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Book Cover Mockups


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Stitched Notebook Mockup


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Vector Desk Scene Creation Kit


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Red Wine Bottle Scene Mockup


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Curved Wood Presentation Backgrounds


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Smooth, textured backdrop for product mockups

Create a Curved Wood Presentation Background in Photoshop

This tutorial will teach you how to take a flat seamless wood texture and sculpt it into a curved presentation backdrop ideal for product mockups. The effect is achieved by using Gradients, Shape Layers, Blending Modes and the Warp Transform tool.

Step 1

Launch Photoshop and create a new document 3000 x 2000 pixels.
create a curved wood background in photoshop

Step 2

Double click on the Background layer to unlock it and rename it ‘Texture’.
create a curved wood background in photoshop

Step 3

Add a Pattern Overlay layer style to the Texture layer using this free sample from the Seamless Wood Textures - Vol 1 pack.
create a curved wood background in photoshop

Step 4

Enter Transform mode by pressing CMD+T (Mac) or CTRL+T (Windows) and increase the width and height to 200%. Press Enter to confirm changes.
create a curved wood background in photoshop

Step 5

Right click the layer and choose Convert to Smart Object.
create a curved wood background in photoshop

Step 6

Enter Transform mode again and this time reduce the width and height to 50%.
create a curved wood background in photoshop

Step 7

Drag two new horizontal guides onto the canvas at 1400 and 1700 pixels.
create a curved wood background in photoshop

Step 8

Go to Edit > Transform > Warp. This next part can be a little tricky, you will need to grab the points shown in the image below and drag them down in a straight line. However, as you move one point the others will be affected, so expect to do a lot of tweaking. The goal is to get the two horizontal lines to match the guides and keep the vertical lines as straight at possible.
create a curved wood background in photoshop

The result should look something like this:
create a curved wood background in photoshop

Step 9

Drag two vertical guides onto the canvas at 1500 px and 4500 pixels.
create a curved wood background in photoshop

Step 10

Enter Warp Transform mode again, and this time drag the bottom left and bottom right points out to meet the vertical guides. Try to keep the edges as straight as possible. If needed, resize the whole layer afterwards to hide any gaps and fill the entire canvas.
create a curved wood background in photoshop

Step 11

Next we need to add some lighting, gradient layers can be used to produce shadows. Create a new Gradient Fill layer (Layer > New Fill Layer > Gradient…), set the Blending Mode to Soft Light and the Opacity to 50%.
create a curved wood background in photoshop

Step 12

Start with the default Black to White Linear gradient and edit it so that it goes from white to black(Location: 25%) then back to white. Also check the Dither option.
create a curved wood background in photoshop
create a curved wood background in photoshop

Step 13

Set the foreground colour to black and create another new Gradient Fill Layer and set the Blending Mode to Soft Light.
create a curved wood background in photoshop

Step 14

Choose the default foreground colour to transparent gradient preset, change the Style to Radial, Scale to 250% then check the Reverse and Dither options.
create a curved wood background in photoshop
create a curved wood background in photoshop

Step 15

Shadows done, we can now add some highlights using shape layers. Draw a white ellipse near the bottom of the canvas.

  • W: 2400 px
  • H: 350 px
  • X: 300 px
  • Y: 1585 px

create a curved wood background in photoshop

Step 16

In the Properties panel select the Masks option at the top, and change the Feather settings to 90 px to blur the edges of the ellipse.
create a curved wood background in photoshop

Step 17

Set the Blending Mode to Soft Light.
create a curved wood background in photoshop
create a curved wood background in photoshop

Step 18

Draw another ellipse, partially off canvas at the top.

  • W: 1800 px
  • H: 2038 px
  • X: 600 px
  • Y: -689 px

create a curved wood background in photoshop

Step 19

Change the Feather settings to 90 px again.
create a curved wood background in photoshop

Step 20

Set the Blending Mode to Soft Light and the Opacity to 25% for a more subtle result as if the light is being reflected from the ‘floor’ onto the ‘wall’.
create a curved wood background in photoshop

Result & Conclusion

Here is the result, as you can see the texture now appears to be smooth and curved. This technique can be used on almost any texture that is either high enough resolution or seamless. Warp Transform in Photoshop is a very powerful tool that allows you to freely manipulate bitmap and vector layers, and this is a prime example of what can be achieved with it.
create a curved wood background in photoshop


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

PRSNT Keynote Template


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Rusted Sign Mockups


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Vehicle Line Vectors


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Old Weathered Wood Textures


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

London Street Sign Mockup


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

White Wood Textures


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Give photos a vintage peeling paint effect

How to Distress a Photo Using a Grunge Texture and Displacement Map

This tutorial will teach you how to distress a photograph by merging it with a grunge texture, using layer masks and displacement filters in Photoshop for a realistic result. Merge the photo and texture seamlessly to create the effect of the photo actually being painted on the wood background

Step 1

Launch Photoshop and create a new document 3000 pixels wide and 2000 pixels tall.
distress a photo with displacement maps in photoshop

Step 2

Place the photo that you want to work with into the document as a Smart Object layer. I am using this excellent photo from Unsplash
distress a photo with displacement maps in photoshop

Step 3

Next place the texture that you want to use into the document as another Smart Object above the photo layer. I am using this texture from the free Old Weathered Wood Textures Pack on WeGraphics.
distress a photo with displacement maps in photoshop

Step 4

Duplicate the texture Smart Object and move it below the photo layer.
distress a photo with displacement maps in photoshop

Step 5

Select the top texture layer and Rasterize it, then desaturate it by clicking the ‘Image > Adjustments > Desaturate’ menu item or by pressing CMD+SHIFT+U on Mac or CTRL+SHIFT+U on PC.
distress a photo with displacement maps in photoshop

Step 6

Bring up the Levels adjustment window by going to ‘Image > Adjustment > Levels…’ or by pressing CMD+L or CTRL+L. Adjust the shadow and highlight levels to increase the contrast between white and black and remove some of the grey mid tones.
distress a photo with displacement maps in photoshop

Step 7

Select all pixels and copy to the clipboard, then create a new Photoshop document.
distress a photo with displacement maps in photoshop

Step 8

Paste the texture into the new blank document and save it as a Photoshop Document in the same location you are working in with the name ‘Displacement Map.psd’.
distress a photo with displacement maps in photoshop

Step 9

Go back to the original document and select the photo Smart Object layer. Then go to the Layer > Layer Mask menu and choose Reveal All.
distress a photo with displacement maps in photoshop

Step 10

Open the Channels window (Windows > Channel) and click the eye icon next to the photo channel to make it visible.
distress a photo with displacement maps in photoshop

Step 11

Paste the texture from step 7 into the channel (it should still be on your clipboard). The red overlay shows pixel data on the channel.
distress a photo with displacement maps in photoshop

Step 12

Click the eye icon again to hide the channel and the red overlay.
distress a photo with displacement maps in photoshop

Step 13

Open the Layers panel again and select the photo Smart Object layer (not the channel). Then go the ‘Filter > Distort’ menu and choose ‘Displace..’. Enter 25 for both the Horizontal and Vertical scale then hit OK.
distress a photo with displacement maps in photoshop

Step 14

Locate the Displacement Map.psd file that you saved in step 8 and click Open.
distress a photo with displacement maps in photoshop

Step 15

The effect of the displacement may appear subtle, but if we zoom in to actual size you can see that the edges of the photo have been distorted using the black and white data in the displacement map texture file.
distress a photo with displacement maps in photoshop

Step 16

Finally, create a new Levels Adjustment Layer and tweak the shadow and highlight levels to restore the photo’s original contrast.
distress a photo with displacement maps in photoshop

Result & Conclusion

Here is the result, the photo and the texture have been merged seamlessly to create the effect of the photo actually being painted on the wood background. Hopefully you have enjoyed following this tutorial and can now effectively use layer masks and displacement maps together to manipulate images.
distress a photo with displacement maps in photoshop


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

A4 Clipboard Mockup


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Simple Line Vector Icons


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Building Exterior Vectors


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Home Interior Vectors


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Vector Wood Grain Backgrounds


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Vector Sparkles Collection


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

A modern take on the classic four leaf clover quatrefoil design element

Create a Seamless Vector Quatrefoil Pattern in Illustrator

Quatrefoil is an ornamental design with four lobes that resemble a flower or clover leaf, it is most commonly seen in Gothic architecture but can also make a cool, minimal pattern for modern web and graphic design. This quick tutorial will show you how to create a seamless, vector quatrefoil pattern with Adobe Illustrator CS6 or newer.

Information

Please note that this tutorial requires that you have at least version CS6 of Adobe Illustrator due to using the Pattern tool. Also, if you’d rather skip the tutorial and download our 20 pre-made quatrefoil patterns for free you can do so here

Step 1

Begin by launching Illustrator and creating a new document, 800 x 600 pixels is a good size to begin with (it can easily be changed later).
how to create a quatrefoil pattern

Step 2

Fill the artboard with a white rectangle to use as the background color.
how to create a quatrefoil pattern

Step 3

Draw a new circle 44 x 44 pixels, and give it a thick 10 pixel teal (#00D2AF) stroke.
how to create a quatrefoil pattern

Step 4

Duplicate the circle and move it down 56 pixels.
how to create a quatrefoil pattern

Step 5

Select both circles and duplicate them in place.
how to create a quatrefoil pattern

Step 6

Rotate the duplicated circles 90 degrees around a center reference point.
how to create a quatrefoil pattern

Step 7

Select all 4 circles and combine them with the Union Pathfinder operation.
how to create a quatrefoil pattern

Step 8

Highlight the 8 vector points in the middle of the shape and delete them.
how to create a quatrefoil pattern

Step 9

Highlight the shape again and go to Object > Pattern > Make to make a new pattern preset. Click OK if a dialog box pops up. In the Pattern Options panel change the width and height to 100 pixels, the shapes should now overlap each other nicely.
how to create a quatrefoil pattern

Step 10

Exit out of the Pattern editor mode and delete the original shape we created (it is still safe in the Pattern swatch)
how to create a quatrefoil pattern

Step 11

Duplicate the white background layer and fill it with the Pattern Swatch you created.
how to create a quatrefoil pattern

Step 12

To invert the colours, first duplicate the swatch.
how to create a quatrefoil pattern

Step 13

Then edit the duplicated pattern and change the stroke fill to white (#FFFFFF).
how to create a quatrefoil pattern
how to create a quatrefoil pattern

Step 14

Then exit back to the main Artboard and change the background rectangle fill to teal (#00D22AF).
how to create a quatrefoil pattern

Step 15

And on the top rectangle change the pattern swatch to the white one instead.
how to create a quatrefoil pattern

Results

Here are both of the patterns, they are not only perfectly seamless but also completely vector! If you want to use them on the web as a bitmap then export the whole artboard to JPG 72DPI and crop the result to a 100 x 100 pixel square in Photoshop or any similar tool.
how to create a quatrefoil pattern

Download Seamless Vector Quatrefoil Patterns

seamless quatrefoil patterns
This pack includes 20 perfectly seamless vector quatrefoil patterns for Illustrator featuring various ornamental designs with four cloves. They are scalable and can be edited in Illustrator CS6+, also included are 20 high resolution JPG files ready for production use, measuring 600 x 600 mm at 300DPI.

Download Free


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Mobile Device Vector Icons (New Devices)


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Spray Paint Mockups - Vol 2


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Seamless Vector Quatrefoil Patterns


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Spray Paint Mockups - Vol 1


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Samsung Galaxy S7 & S7 Edge Mockup


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Cute Vector Animal Faces


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Layouts for Twitter


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

How do you make a texture appear reflective using Photoshop?

Create Gold and Silver Reflective Foil Textures with Photoshop

Foil textures can be very tricky to create. Unlike most materials, they aren't easily photographed because of unwanted reflections, and worse still they don't create any reflections at all when scanned with a flatbed scanner. So it would seem that the best option is to artificially create them from scratch with image manipulation, but then how do you make a texture appear reflective in Photoshop?

If you’d rather skip the tutorial and download 30 high quality pre made gold and silver foil textures you can download the pack here.

Step 1

Launch Photoshop and create a new document. Make the dimensions square and quite large, I suggest 3000 x 3000 pixels.
how to create a foil texture in photoshop
how to create a foil texture in photoshop

Step 2

The first step is to place our base texture for the foil effect. This can be any type of prexisting texture, such as paper, card or generic grunge. I found that the Grunge Paper Textures on Medialoot work very well. You can download the texture used in this tutorial for free here.

When you have your texture place it into your document as a Smart Object, and resize to fill the entire canvas (don’t worry about quality loss).
how to create a foil texture in photoshop

Step 3

Apply a small 5 Pixel Gaussian Blur effect to smooth out the details of the texture.
how to create a foil texture in photoshop

Step 4

Select Filter Gallery from the Filter menu and find apply an Ocean Ripple effect (under Distort). If you are using the grunge texture supplied then a Ripple Size of 6 and Magnitude of 20 should create the desired effect. If not, you may need to experiment with the settings.
how to create a foil texture in photoshop
The Filter Gallery effect should be above the Gaussian Blur in the Layers Panel:
how to create a foil texture in photoshop

Step 5

Create a new Gradient Fill layer via the Layer > New Fill Layer menu.
how to create a foil texture in photoshop

Step 6

Select the default Black to White gradient and set the Angle to -105°. This is to even out the lighting and bring out the shadows in the lower left corner of the texture.
how to create a foil texture in photoshop

Step 7

Set the Blending Mode of the gradient layer to Soft Light and the Opacity to 70%.
how to create a foil texture in photoshop

Step 8

Create another new Gradient Fill layer via the Layer > New Fill Layer menu.
how to create a foil texture in photoshop

Step 9

Create a subtle gold gradient from #DBA76C to #EDCBA1 as shown below and set the Style to Reflected, then the Angle to 120° and tick the Reverse checkbox.
how to create a foil texture in photoshop
how to create a foil texture in photoshop

Step 10

Set the Blending Mode of the gradient layer to Color and the Opacity to 75%. This will change the color of the texture to gold.
how to create a foil texture in photoshop

Step 11

Create a new Curves Adjustment Layer and tweak the curve slightly at the top and bottom.
how to create a foil texture in photoshop

Step 12

Create a new Levels Adjustment Layer and enter 80 for the Shadows Level and 230 for the Highlights Level.
how to create a foil texture in photoshop

Step 13

Then create a new Hue/Saturation Adjustment Layer and reduce the Opacity by -20.
how to create a foil texture in photoshop
The Layers panel so far should look like this:
how to create a foil texture in photoshop

Step 14

You should now have a very nice reflective gold foil texture.
how to create a foil texture in photoshop

Step 15

To make a silver foil texture, we can simply modify the gold texture. First create a Hue/Saturation Adjustment Layer and enter +153 for Hue, -94 for Saturation and +24 for Lightness. We don’t want the silver texture to be completely greyscale, it should have a slight blue-ish tint.
how to create a foil texture in photoshop

Step 16

To give the silver foil a more reflective effect, create a new Layers Adjustment Panel and set the Shadows Level to 37 and Highlights Level to 225.
how to create a foil texture in photoshop
You can group these adjustments together in order to easily toggle between gold and silver by hiding and showing the ‘Silver’ group.
how to create a foil texture in photoshop

Step 17

In real life, silver foil has a higher tendency to catch reflections than gold. In order to make the silver foil effect more realistic we can emulate some reflections. Start by grabbing a random image from a free photo source such as Unsplash. I chose to use this photo of a bear.
how to create a foil texture in photoshop

Step 18

Convert the photo to a Smart Object and apply a Gaussian Blur with 150 Pixel Radius.
how to create a foil texture in photoshop
how to create a foil texture in photoshop

Step 19

Set the Blending Mode of the photo layer to Color and adjust the Opacity until the reflections are barely visible.
how to create a foil texture in photoshop
how to create a foil texture in photoshop

Result & Conclusion

Gold

how to create a foil texture in photoshop

Silver

how to create a foil texture in photoshop
As you can see, this technique creates a rather convincing reflective foil effect by only using one base texture, gradients and adjustment layers. This effect can be recreated with almost any base texture for different results, however you may want to stick with subtle grunge and paper or card textures for the best results.

Download Gold & Silver Foil Textures

gold and silver foil textures
This pack features 30 gold and silver foil textures with a glossy, reflective finish. They make beautiful backgrounds and can also be used to mockup hot foil stamping (tip: apply them to text with a clipping mask). The pack includes 15 gold and 15 silver high resolution images.

Download


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Chase Landing Page Template (PSD)


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Gold & Silver Foil Textures


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

Glitch Image Effect Generator


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Leave a comment

For OCD designers who like to keep their documents organised

Quick Tip: How to Rename an Existing Smart Object in Photoshop CC

Anybody who works with Photoshop regularly will have encountered Smart Objects, they are a great way to create dynamic elements which automatically apply changes to all instances of the same object, and allow you to apply transformations and filters non-des