How to Create a Textured Geometric Image Mask with Photoshop & Illustrator

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

Learn how to use image masks in Photoshop with this trendy/hipster photo effect

How to Create a Textured Geometric Image Mask with Photoshop & Illustrator

This tutorial will teach you how to draw a geometric vector shape with Illustrator and then use layer masks in Photoshop to create a trendy/geometric geometric photo mask.

Step 1

Lets start by drawing a geometric shape to use as the focal point of the mask. It’s best to do this with a vector drawing application such as Illustrator or Sketch. I will show you how to do it with Illustrator CC, launch the application and create a new document 800 x 800 pixels.

Note: you can download one of our pre-made geometric vector shapes and skip to step 6 if you just want to know how to mask the image.
geometric image mask tutorial

Step 2

First set the fill color to transparent and the stroke to black, then select the Polygon tool and left click once in the center of your artboard. A dialog window should pop up and ask in a very confusing way what kind of polygon to create. Enter 250 pixels for the radius and 8 sides to draw an octagon.
geometric image mask tutorial

When you have the octagon, change the stroke weight to 5 points.
geometric image mask tutorial

Step 3

The shape that we are going to draw may look complex, but it is actually very simple to create. Grab the Line tool a draw a line from one of the corners to the next nearest corner which isn’t already connected directly to it.
geometric image mask tutorial

Step 4

Repeat this process by drawing another line from the same corner to the next nearest corner which again isn’t already connected directly to it. And continue until the corner is now directly connect by a single line segment to every other corner in the shape.
geometric image mask tutorial
geometric image mask tutorial
geometric image mask tutorial
geometric image mask tutorial

Step 5

Repeat again, this time using the next corner along.
geometric image mask tutorial

From this point on, each corner that you do will require one less line than the last, until finally all of the corners are connected to all of the other corners via a single line segment.
geometric image mask tutorial
geometric image mask tutorial
geometric image mask tutorial
geometric image mask tutorial

Step 6

Now that we have the shape drawn, copy it to the clipboard and move over to Photoshop. Create a new document 800 x 800 pixels in Photoshop.
geometric image mask tutorial

Step 7

Paste the octagon shape into your Photoshop document as a Smart Object and align it to the center of the artboard if necessary.
geometric image mask tutorial
geometric image mask tutorial

Step 8

Create a new fill layer by selecting Layer > New Fill Layer > Solid Color. Set the fill color to black when prompted to choose a color.
geometric image mask tutorial

Step 9

Create a new 600 x 600 pixel circle using the Ellipse tool and align it to the center of the artboard.
geometric image mask tutorial
geometric image mask tutorial

Step 10

Move the new fill layer and circle layer below the octagon Smart Object and place all 3 layers in a group called ‘Mask’.
geometric image mask tutorial

Step 11

Grab a grunge texture from this set, and drop it into your Photoshop document. Or you can download this free sample. Resize the grunge texture layer whilst holding the shift key so that it fills the artboard.
geometric image mask tutorial

Step 12

Rasterize the grunge texture, place it above the octagon Smart Object and create a clipping mask.
geometric image mask tutorial

Step 13

Duplicate the grunge texture, invert the colors by pressing CMD+I or CTRL+I, and place it above the circle shape layer. Then create a clipping mask again.

Before moving on to the next step, use the Rectangular Marquee tool to select all and Copy Merged (CMD+SHIFT+C or CTRL+SHIFT+C).
geometric image mask tutorial

Step 14

Now lets choose a photograph to use this mask on. I recommend heading over to Unsplash for tonnes of awesome free photos, like this one. When you have a photo, drop it into your Photoshop document and resize or move as necessary.
geometric image mask tutorial

Step 15

Hide the ‘Mask’ group temporarily and place your image layer below it in a new group called ‘Image’.
geometric image mask tutorial

Step 16

With the ‘Image’ group layer selected, go to Layer > Layer Mask > Reveal All.
geometric image mask tutorial

Step 17

Open the Channels panel (Window > Channels) and click the eye icon next to the channel called Image Mask to make it visible. Then paste the artwork that you copied to the clipboard in step 13. If it has worked, you should see a red overlay indicating the areas of the photo that will be hidden by the mask.
geometric image mask tutorial

Step 18

Finally, turn off visibility for the Image Mask channel to see the results.
geometric image mask tutorial

Result & Conclusion

Not only does this effect look really cool, it’s a great way to practice using layer masks in Photoshop and also drawing geometric shapes in Illustrator. If you want to have some more fun with this effect you can place different photos inside the ‘Image’ group layer, and also experiment with different shapes by downloading our geometric vector shapes collection.
geometric image mask tutorial


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 Sketched Divider Pattern 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 Vector Shapes


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

Rough Concrete 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

Take advantage of swatches and the appearance menu

Create a Reusable Stamp Effect In Adobe Illustrator

Creating a nice grungy stamped effect in Adobe Illustrator is quick and easy when taking advantage of swatches and the appearance menu. The look can be tailored to create an endless amount of effects and then saved as Graphic Styles to use over an over again. Let's take a look at how it's done.

Step 1 - Creating Vector Texture Swatches

First up, you’ll need a few small vector textures. I simply copy and pasted some portions of textures from Photoshop and the auto traced them using Image | Live Trace. You may need to adjust the Threshold so that more grunge specs appear in the trace.

Once traced, I simply dragged them over to the swatches panel to save them. To open your swatches panel click Window | Swatches.

Note: You’ll need some swatches with black specs and some with white.

Step 2 - Using the Appearance Panel

Now that you have a few grunge swatches, add some type to your document using whatever font you prefer. Remove any stroke or fill the type may have by default (we’ll be adding those from the Appearance panel). To open the Appearance panel click Window | Appearance.

For the first fill choose solid black. Add another fill using a white grunge spec swatch that you created back in step 1.

In the Appearance panel, create a stroke around 6px and use one of the black grunge spec swatches.

Now we’ll create another stroke. This time choose a solid black for the fill, and a width set to around 4. We’re going to offset this stroke path using Effect | Path | Offset Path. Choose an offset setting of -4.

Next up, we’ll roughen the stroke using Effect | Distort & Transform | Roughen. For the size setting use 1 and for the detail choose a setting of 10-12. This will give the text a nice subtle uneven edge.

Back over in the Appearance panel add one last stroke. Choose another black spec grunge swatch and a stroke width of 11px.

That should do it for our completed stamped effect.

Step 3 - Create a Reusable Graphic Style

To make this effect reusable for other text and shapes simply open the Graphic Styles panel by clicking Window | Graphic Styles. Then click and drag your text over to the panel. This will create a new Graphic Style that can be saved for future use.

 


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 Sketched Vector Flowers


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


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

Ebook Mockup Package


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

An easier way to make seamless textures

How To Make A Seamless Texture in Photoshop (Redux)

For this tutorial I wanted to revisit the topic of making seamless textures in Photoshop and share with you a new, incredibly simple technique which makes the entire process much easier than before. It even works on some textures which I would have called 'un-tileable' previously.

Step 1

For this tutorial I am using antique-wood-8.jpg (free download) from the Antique Wood Textures set on Medialoot. Please note, although this method evens out textures, the source image that you choose to use still needs to be of a high quality, and relatively balanced to begin with.

Open the texture in Photoshop and use the Crop tool with a square aspect ratio and 2000 pixels for both the width and height. The Delete Cropped Pixels option should be checked.
how to create seamless textures

Step 2

In my previous article I shared the standard method for creating tileable images in Photoshop, which is to use the Offset filter and then blend the edges together with the Clone tool. Before we try the new method, let’s just test the Offset filter first to see what we would be working with here.

Go to Filter > Other > Offset and enter +1000 pixels for both the Horizontal and Vertical options and hit OK.
how to create seamless textures

Now, even if you are a wizard with the Clone tool these seams aren’t going to be easy to iron out:
how to create seamless textures

Step 2 (Again)

So let’s forget that, undo the Offset filter and start again. Instead, duplicate the background layer and set the Opacity of the top layer to 50%.
how to create seamless textures

Step 3

With the top layer selected, go to Edit > Transform and click Flip Horizontal and then also Flip Vertical.
how to create seamless textures

Step 4

Select both layers and merge them together (CMD+E or CTRL+E).
how to create seamless textures

Step 5

Now let’s try that Offset again. As if by magic, the result is now much better than compared to the earlier attempt. The seams are still visible, but they look like can be easily blended together.
how to create seamless textures

Step 6

Use the Clone tool with round brush at around 100 px and 30% Hardness. Select an appropriate source by holding down the ALT key and clicking on the area you want to use. Then clone the texture using a wavy line from left to right covering the seam.
how to create seamless textures

Step 7

Repeat the last step, this time for the vertical seam.
how to create seamless textures

Step 8

Still using the Clone tool, tidy up any anomalies in the texture, or distinctive elements that appear more than once and give away the fact that the texture has been duplicated.
how to create seamless textures
how to create seamless textures

Step 9

To restore some of the texture’s original quality and mask the Cloning, apply a Sharpen filter 1-2 times until desired effect is achieved.
how to create seamless textures

Step 10

This is also a good time to make any final tweaks, for example some subtle Levels adjustments.
how to create seamless textures

Step 11

Finally, go to the Edit menu and select Define Pattern.. give your pattern a name and hit OK.
how to create seamless textures

Result & Conclusion

Here is the seamless texture in action at 25% zoom. It’s hardly noticeable at all where the seams are.
how to create seamless textures
The beauty of this technique is that it takes so much of the manual work out of creating seamless textures. This method works on almost any texture, and delivers great results. The drawback to flipping and overlaying the texture is that it will visually change the texture slightly.


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

Amazon Kindle Paperwhite 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

Apple Watch on Wrist 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

Scratched Up - Photoshop Brush Set


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

Leather Crafting on a digital field

Create an Easy Stitched Leather Type Effect in Photoshop

In this tutorial I'm going to demonstrate how fast and easy it is to create a realistic looking stitched leather effect in Photoshop. Let's dive right in and see how it's done.

Step 1 - Leather Textures and Type

First up, we’ll need a good leather texture. I pulled mine from the excellent Distressed Leather Textures right here at MediaLoot. I chose number 9 from the collection.

Since we’re working with leather I wanted to choose a thick, bold font that has a touch of western flare. Chunk Five fit the bill nicely.

I created a new document (1800x1200), and positioned the text in the center using a size large enough to see the stitching detail that we’ll be applying in later steps.

Step 2 - Applying Layer Effects and Shadows

We need to create a pattern from our leather that we can apply to the text. To do so, create a square selection from the center of our leather texture. The size isn’t important. Copy (Ctrl/Cmd+V), create a new document (Ctrl/Cmd+N) and paste (Ctrl/Cmd+V) the leather square into the new document.

Now click Edit | Define Pattern and click okay to add the pattern to your pattern collection. Back over on our working document, double click the text layer to open the Layer Style window. Select Pattern Overlay on the left, and choose the newly created leather pattern from the Pattern drop down. Make the opacity around 65%

Now let’s run through settings for the rest of the layer styles for our type.




Now, to add some additional shadows, I Ctrl/Cmd+Clicked the text layer’s thumbnail on the layers panel to create a selection. I created a new layer and moved it below the text layer. I filled it with black and applied a Gaussian Blur. Then I reduced the opacity to 75%.

Now click Edit | Transform | Warp and adjust the shadow so that it extends out beyond the edge of the type in various places.

Repeat this process to create another shadow layer. This time warp it’s edges a little further, and reduce it’s opacity to 30%.

Step 3 - Applying Stitching to Our Type

For the stitching I found an incredibly well made brush set by user boyingopaw at deviantArt. (http://boyingopaw.deviantart.com/art/stitch-81849757) I’m using the 9th brush in the set, but any of them should work well. First up, Ctrl/Cmd+Click the layer icon for the text layer again to make a selection of the type. Now click Select | Modify | Contract and enter 15.

Now, with the Marquee Tool (M) selected, right click, or (Ctrl/Cmd+Click) on Mac, anywhere on the document and choose “Make Work Path”, and enter 1 for the tolerance.

Now create a new layer. Click the Brush Tool (B), and make sure that the stitch brush you want to use for the stitching is selected on the brush drop down. You may need to reduce the size of the brush down to around 20. Now select the Pen Tool ( P ) and right click, or (Ctrl/Cmd+Click) on Mac, anywhere on the document again and choose “Stroke Path”. Choose “Brush” for the tool, and click okay.

Apply the following layer styles to the stitching layer.

Step 4 - Additional Embellishments

For the embellishments, I went over to illustrator and drew a path with the pen tool. To make this path symmetrical, I only drew half of it. I then copied the shape and flipped it. Then I joined the paths at the end of the bend.

I copied and pasted the path over to Photoshop. When pasting from Illustrator you will see this dialog box. For our purposes here, choose “Path”. Once the path is pasted in, use the Pen Tool to right click and stroke the path with the stitch brush like we did before. Make sure you create a new layer for the stroke to be placed on.
Apply the same layer styles as we did on the type stitching.

Duplicate the layer and rotate it for the top embellishment.

For the stars, I added the following layer styles to make them look pressed into the leather.




Step 5 - Finalizing with Light and Shadows

On a new layer, use a large, soft white, brush and click once in the middle of the document to create a light source. Set this layer’s blend mode to Overlay.

On another new layer below the light source layer, use a large soft black brush and paint around the edges to create some dark shadows. Set this layer’s blend mode to Overlay as well. Reduce the opacity to around 50%.

Finally, add a Gradient Map adjustment layer using the preset purple to orange. Set the layer’s blend mode to Overlay and reduce it’s opacity to 30%.

I hope you picked up some new techniques from this tutorial. Please feel free to share your results using the comment fields below.

 


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

Free Seamless 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

Hand Sketched Vector Ornaments


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

Tips for Designing and Exporting SVG Icons with Illustrator

These tips and techniques for Illustrator will help you optimize the process of designing vector icons and assist in exporting clean, simple SVG code to use on the web or in mobile apps.

The SVG (Scalable Vector Graphics) file format has many benefits which make it ideal for web and mobile app icons. Traditional bitmap formats such as PNG, JPG and GIF lose quality when viewed larger that their intended size.

With SVG this isn’t an issue because as the name suggests, they are scalable vectors and they look great when viewed at any size, especially on Retina and HiDPI screens. The other main benefit to SVG files is that they are code-based (similar to HTML) and can be styled with CSS attributes, allowing for lots of flexibility.

In the process of creating SVG icons for Medialoot and the upcoming Glyphs Company I have learned some tips and techniques for Illustrator which make the process of designing and exporting icons much smoother.

Align Strokes to the Center

If you are familiar with Illustrator, or any other vector drawing application you will no doubt familiar with stroke alignment. Stroke alignment is the ability to render a stroke either on the center, inside or outside of a given vector path.

how to design svg icons in illustrator
The SVG specification has lots of options that can be used for strokes, including stroke-width, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-dasharray and more. But unfortunately stroke alignment is not one of the supported features. This imposes some limitations when designing icons that will be exported to SVG format.

It could be one almighty disappointment if you designed hundreds of icons with strokes aligned to the inside and outside of paths, and then when you export them to SVG, you find all of the strokes are aligned to the center instead. The solution, although it may seem obvious is to simply avoid using stroke alignment at all costs except for center alignment.

Use ‘Preview Bounds’

You will notice that in Illustrator by default, the bounding box around objects is associated with the vector path. The problem is that an object isn’t always visually the same size as its path, which can make aligning icons to the Artboard bounds tricky. For example, if you apply a 2 pixel center aligned stroke to a vector path, you actually increase the size of the shape by 1px, however the bounding box is still the same size because the actual path never changed.

Turning on the Preview Bounds option in Illustrator’s general preferences will correct this.

how to design svg icons in illustrator
how to design svg icons in illustrator

Keep Shapes Simple

It is important when designing SVG icons to keep your vector shapes as simple as possible, because this will result in cleaner outputted SVG code, which is faster to load and less prone to display errors.

Always try to keep unnecessary or stray points to an absolute minimum, for example a circle shape should only require four vector points. Any more than that is unnecessary and could cause unwanted display bugs and more complex code. In the image below you can see that we have two circles which appear exactly the same but one of them has additional unnecessary points..

how to design svg icons in illustrator
The result of these additional vector points is larger, less coherent SVG files, as can be seen by comparing the the source code required for both shapes:

Circle 1:

<ellipse fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" cx="50" cy="50" rx="47" ry="47"/>

Circle 2:

<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M270,3c6.5,0,12.7,1.3,18.3,3.7
	c5.6,2.4,10.7,5.8,14.9,10.1c4.3,4.3,7.7,9.3,10.1,14.9S317,43.5,317,50c0,6.5-1.3,12.7-3.7,18.3c-2.4,5.6-5.8,10.7-10.1,14.9
	c-4.3,4.3-9.3,7.7-14.9,10.1c-5.6,2.4-11.8,3.7-18.3,3.7s-12.7-1.3-18.3-3.7c-5.6-2.4-10.7-5.8-14.9-10.1
	c-4.3-4.3-7.7-9.3-10.1-14.9c-2.4-5.6-3.7-11.8-3.7-18.3c0-6.5,1.3-12.7,3.7-18.3s5.8-10.7,10.1-14.9c4.3-4.3,9.3-7.7,14.9-10.1
	C257.3,4.3,263.5,3,270,3z"/>

Combine Shapes When Appropriate

It is not required to merge all paths and shapes, but in some cases you can keep the code simpler by using Pathfinder operations to combine overlapping paths or shapes.

how to design svg icons in illustrator

Use Artboards

If you are designing an icon set to sell on marketplaces or designing custom icons for a specific project, you will most likely be creating more than one icon. But creating individual Illustrator files for every single icon would be a nightmare to manage with pretty much anything over 10 icons. Using Artboards in Illustrator allows you to keep icons that belong in the same set together.

how to design svg icons in illustrator
It also streamlines the process of later saving the production-ready icons to indivual .svg files. Once you have your document set up with each icon on it’s own unique Artboard, all you have to do is tick the option to Use Artboards when you save as SVG. If you like to keep things organized and tidy, you can also rename the Artboards using something that describes its icon (ie. star, heart, document, folder etc.).

how to design svg icons in illustrator

Understand SVG Save Options

There are lots of options available in the Illustrator SVG Options save dialog (click on the More Options button to see them all). It can be a little intimidating at first but these are the settings that I have found to be the most suitable for web use:

how to design svg icons in illustrator

  • SVG Profile: SVG 1.1
  • Subsetting: None (Use System Fonts)
  • Image Location: Link
  • Preserve Illustrator Editing Capabilities: No
  • CSS Properties: Style Attributes (Optional)

Preserve Illustrator Editing Capabilities can easily add over 400kb to a <1kb SVG file, it is not recommended that you use this option when exporting an SVG for use on the web. If you want to retain Illustrator settings, create a seperate .ai file for private use.

The option for CSS Properties is interesting, Style Attributes will add inline styles to paths and shapes in the code, where as Style Elements will place styles within <style> tags in the header.

Style Attributes Example:

<path style="fill:#8C3900;" />

Style Elements Example:

<style type="text/css">
	.fill-1{fill:#8C3900;}
</style>
<path class="fill-1" />

This option ultimately comes down to preference, I personally favor Style Attributes because the code is slightly cleaner and it is easier to override styles by manually adding custom styles to <style> tags in the header later on.

Use Solid Colors

When designing SVG icons in Illustrator, it is advisable to be in the mindset that you are drawing code, in a similar way to how WYSIWYG code editors work. Whatever you draw Illustrator will attempt to code it on your behalf.

Gradients are supported in SVG, and Illustrator is fully capable of coding gradients, however there are a couple of issues that can arise. Firstly gradients need to be defined separately in SVG which adds to the complexity of the code. For example here is some sample code to a basic linear gradient.

<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="gradient-1">
	<stop  offset="0" style="stop-color:#FFFFFF"/>
	<stop  offset="1" style="stop-color:#000000"/>
</linearGradient>
<ellipse fill="url(#gradient-1)" cx="50" cy="50" rx="47" ry="47"/>
</svg>

Compared to a solid color fill:

<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse fill="#000000" cx="50" cy="50" rx="47" ry="47"/>
</svg>

The difference is that the code for solid color fills is much cleaner and simpler. And it can also be targeted and styled by CSS.

Whenever possible it is better to keep things simple and use color fills, however if a gradient is absolutely necessary it’s not going to cause any major issues as long as they are used in moderation. You can even consider adding the gradients into the SVG source code manually after saving to keep the code cleaner.

Conclusion

Following these tips and techniques for Illustrator can help make the process of designing vector icons smoother, and assist in exporting clean, simple SVG code to use on the web or in mobile apps. If you have any tips for designing SVG icons in Illustrator or other vector drawing applications, please share them in the comments!


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 Text Effects


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 Social Media 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

Vintage Logos & Emblems


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

Is Adobe still leading the way in the industry? or simply playing catch up?

Top New Features for Web, UX and Mobile App Designers in Photoshop CC 2015

Adobe released a major update to Photoshop last week with lots of new and exciting features for users, in particular there appears to have been a considerable amount of focus on features for web and user interface designers. This is good news, and we want to share and discuss these new features with you.

The makers of Photoshop and Illustrator have been facing some competition in the last few years from smaller software companies and indie developers who are trying to target the designer audience with new tools and fresh ideas. It is undeniable that this has pushed Adobe to make some very welcome changes to its strategy.

Artboards

The feature which has been gaining the most attention is without a doubt Artboards. Much like Illustrator, and Sketch App you can now have multiple canvases in Photoshop. This feature is particularly useful for working on projects which have multiple pages or screens such as websites and mobile apps.

artboards in photoshop cc 2015

Artboards also open up the possibility of working ‘off-canvas’. In the past any layer or object that wasn’t within the document bounds was simply not visible, you now have more freedom to keep reference material or work that you don’t need right now off to the side of your main Artboard, as many designers like to do in Illustrator.

Almost immediately after installing the update to Photoshop CC 2015, I was curious to find out how large the space outside of Artboards is. Although it appears to limitless as you zoom out, and out, and out some more. It does in fact appear to be limited by available disk space. This is unlike Sketch which as far as I know, is still the only app to have a truly infinite canvas.

artboards in photoshop cc 2015

Design Space (Preview)

This one is huge for designers, especially those who have criticised Photoshop’s interface for being bloated and overly complicated. Design Space is whole new environment created to meet the needs of web, UX and mobile app designers. It is built on top of Photoshop and allows you to switch back and forth from the standard Photoshop interface and the Design Space.

artboards in photoshop cc 2015

One of the reasons why a lot of designers and developers are hesitant to move away from Photoshop to new software with cleaner, more streamlined interfaces is because their workflow revolves around opening, saving and sharing .psd files with collaborators. With Design Space we appear to have been given the best of both worlds, a brand new interface for designers without having to give up the power Photoshop or the benefits of working in an industry standard format.

Although Design Space is technically preview software and clearly still in progress, it is surprisingly stable and very useable. If you should should run into any issues, or find something you can’t do in Design Space it is easy to switch back to regular Photoshop.

Multiple Layer Styles

This is a feature I personally have been wanting for a long time in Photoshop. Yes, we can finally have multiple instances of layer styles *Hooray*! Not only that, but we can now rearrange multiple instances of the same style to change the order in which they are rendered.

artboards in photoshop cc 2015

However there are a few drawbacks, one of which is that only a subset of styles can have multiple instances (Strokes, Inner/Drop Shadows and Color/Gradient Overlays). Which to be fair, may be the only styles you really need to have multiple instances of, but it still feels kind of limiting. I’m also a little disappointed that we still can’t rearrange the order of all layer styles, for instance moving a Texture Overlay on top of a Gradient Overlay, or an Inner Shadow below a Color Overlay.

Export Options

‘Save for Web’ is dead. Well, kind of.. It’s still there, but is now labelled ‘Save for Web (Legacy)’ and we have been given a brand new ‘Export As’ feature to replace it. The new interface simplifies exporting your documents, and notably includes the option to export as SVG.

artboards in photoshop cc 2015

Combined with the Generate Assets feature added in previous versions, this new Export feature makes Photoshop a very powerful tool for extracting individual graphics from designs.

Device Preview

Finally, Device Preview is a feature that allows you to get real-time previews of your Photoshop designs on mobile devices. This is done by downloading the companion app for iOS devices and connecting via USB or over Wi-Fi. If you have multiple Artboards in a document you can choose which Artboard is previewed on the mobile device and any changes that you make to your design will be automatically updated on the device.

This can also be achieved by using plugins such as Skala for Photoshop, and Sketch also natively supports this function with its mirror app.

artboards in photoshop cc 2015

Conclusion

This update to Photoshop is one of the most significant for web, UX and mobile app designers in quite a while. It seems that Adobe have been listening to their customers and are delivering the features that designers have been asking for. However, it has to be mentioned that almost all of these features currently exist in other software packages, and some are near clones of Sketch’s functionality.

So is Adobe still leading the way in the industry? or simply playing catch up with more innovative smaller companies?


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

Orchid - 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

Vector Dry Brush Set


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

Filo - Flat Vector Icons Pack


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

Grunge Stained 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

Color Matching between your photos

Photoshop Quick Tip: How to Swap Colors Between Photos

Have you ever felt that a photo would be perfect for a project if it only had the coloration of another? Maybe you've had a series of photos for a job and the colors should match across all of them. This is easy to do in Photoshop using a variety of methods, but recently I discovered a way that I didn't know about using the Match Color feature. In this quick tip I'll show you how simple it is, and you'll most likely be adding this little feature to your bag of design tricks. Let's dive in.

First up…

You’ll need two photos. One that you like the composition, and the second that you want to match colors from. I found this photo of a church.

I’d like to match the colors of this great sunrise photo.

With both photos open in Photoshop, make the church photo the active document, and select Image | Adjustments | Match Color. A window will open allowing you to select the source document for the new colors. You can even choose a selection from the document or a specific layer. You can also fine tune the lighting and intensity under image options. The settings I used for my images are below.

Here’s a look at the color matched photo.

Another example…

Here’s another example. I have this photo of people in a field.

I’d like to use colors of this sunset over the ocean.

Here’s a look at the field photo after applying the colors from the sunset photo.

I hope you found this little quick tip useful, and can apply it in your image editing workflow. If you have another good method of color matching, I’d love to hear about. Share your thoughts using the comment fields below.

 


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

Lifting 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

Watercolor Effect Generator 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

Quick Tip: How to Rotate Objects Better in Photoshop

If you've ever needed to rotate a vector shape around a specific point in Photoshop, but found that it kept resetting to the center of the shape, then this quick tip will show you how to trick Photoshop into doing what you want.

The Easy Way

The simplest way to control the rotation point of an object in Photoshop is to move the anchor point. When you enter transform mode, you should see the anchor point in the center of the bounding box, to move it simply click and drag with the mouse to a new position. Tip: you can improve the accuracy of it’s placement by drawing 2 guides beforehand that intersect at the point that you want to rotate around.

how to set rotation anchor point in photoshop
how to set rotation anchor point in photoshop

The problem with this method? As soon as you do anything else, Photoshop will forget the anchor point’s position and reset to default. As there is currently no way to permanently set a new anchor point we have to get a little creative and trick Photoshop.

How to Fool Photoshop

Photoshop will always use the center point of the object as the default rotation anchor point, so all we need to do is manipulate our shape to make the center of the object the point we want it to rotate around.

To do this, draw a circle starting from the desired rotation point to the outer edge of the object, whilst holding down the ALT and SHIFT keys to constrain proportions. Then combine this circle with the shape layer that you want to rotate.
how to set rotation anchor point in photoshop

Now duplicate the circle and set the path to Subtract Front Shape, this will make our circle invisible.
how to set rotation anchor point in photoshop

But we still want the original shape to be visible, so select it and choose Bring Shape To Front in the path arrangement dropdown to make it visible again.
how to set rotation anchor point in photoshop

And we are left with what looks exactly like the original object, except with an invisible circle behind it manipulating the overall dimensions of the layer and consequently also the rotation anchor point. Which in this example, is now in the center of the clock face where we want it to be. And Photoshop won’t forget it this time!
how to set rotation anchor point in photoshop

Conclusion

This quick tip goes to show that just because Photoshop may not always work exactly the way you want it to, it can often be ‘tricked’ into doing just about anything you need it to.


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

Hanging T-Shirt 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

Real World Vector 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

Watercolor Gradient Background 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

Rough Brush Strokes


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 Hand Signal 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

Andea Geometric Sans 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

Grungy vector goodness for your type

How to Create an Ink Stamp Text Effect with Illustrator CS6

This tutorial for Illustrator CS6 will teach you how to achieve an ink stamp style text effect by layering multiple fills and effects. And this effect can also be applied to vector shapes if you prefer.

Step 1

Open Illustrator CS6 (or newer) and create a new blank RGB document, W: 800 px H: 500 px.

Step 2

For this effect we will need to create two custom pattern swatches in Illustrator. I recommend downloading our pre-made vector speckle textures to get you started. Alternatively you can skip this step and download the result for free here

When you have your vector grunge texture ready in Illustrator, use the Direct Selection tool to grab the section of the texture you want to use (aim to make your selection roughly a square).

Copy and paste your selection into the blank document we created in step 1, and set the dimensions to W: 150px H: 150px and use the Unite function in the Pathfinder window to merge it.

Step 3

We now want an inverted version of this texture, so draw a black square W: 150px H: 150px, then duplicate the texture and place it directly on top of the square with the fill set to white.

Step 4

Select the texture with the black background and go the Object > Pattern menu and click Make to create our first pattern swatch. Set the Tile Type to Brick by Column to mix up the pattern a little.

Step 5

Select the black texture with no background and go the Object > Pattern menu and click Make to create our second pattern swatch. Again, set the Tile Type to Brick by Column.

Step 6

Now use the Type Tool to place your word in the center of the document. Use the font nevis Bold and font size 188 pt. If needed, correct any tracking/kerning issues.

Step 7

In the Appearance panel set the Fill to the first grunge pattern swatch.

Step 8

Add a Roughen filter from the Effect > Distort and Transform menu with size 1px Absolute and detail 15/in.

Step 9

Increase the Stroke width from 0 to 4pt to add a black border.

Because the stroke is applied to text, the option to align to the inside isn’t available. A workaround for this is to select the Stroke layer in the Appearance panel and add the Offset Path filter from the Effect > Path menu directly to it. The offset value should be half of whatever the stroke width is to align to the inside.

Step 10

Also add a Roughen filter to the stroke, with size 1px Absolute and detail 15/in.

Step 11

One of the best things about Illustrator is that you can have multiple fills and strokes. Let’s take advantage of this to add some extra grunge detail around the text. Click the Add New Fill button in the Appearance panel and set the fill to the second grunge pattern.

Step 12

We can’t currently see the second fill because it is behind the other fill and stroke. However we can use the Offset Path filter again to increase the size of only the second fill by 4 pixels.

Step 13

To make the outer grunge look a bit more natural, we can also Roughen the path with size 15px Absolute and detail 15/in.

Step 14

In this step we will be vectorizing the type layer, which means it will no longer be editable. You will probably want to create a copy of the text layer at this point, just in case you want to go back and change the text later.

When you are happy to proceed, right click the type layer and click Create Outlines.

Step 15

Use the Direct Selection tool and hold down the Shift key while you highlight all of the external corners on your text. Increase the Corner Radius to 6 px.

Step 16

Now highlight all of the internal corners and increase the Corner Radius to 3 px.

Step 17

To merge all of these different fills, strokes, patterns and effects we will need to Rasterize our text (don’t worry it makes sense in the next step).

Step 18

Using the Image Trace function to re-vectorize our text will flatten it, convert white fills to transaprent, and also roughen the text slightly. Use the options show in the image below to retain the most detail.

Result

Here is the result of the ink stamp effect, I have added a subtle paper texture from this set behind the text and set the fill color to #282725 for some final touches.

Conclusion

Hopefully you have enjoyed following along with this tutorial, and learned some new techniques. Adding multiple strokes and fills with the Appearance panel, and applying effects to them can open up a whole new world of possibilities 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

Business Card Mockup Vol 8


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

Double Exposure Photoshop Action


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 classic effect made easy

Create an Easy Double Exposure Portrait in Minutes

Double exposure is a cool effect that has been around for a long time. In the film camera days, it was accomplished by exposing the negative twice on two different scenes. Now this effect can be easily created and embellished using a few simple tricks in Photoshop. Below, I'll show you how in this easy tutorial.

Step 1 - Gather Photos

First up, we need some good photos to create our double exposure with. For the portrait I chose this image by TwiggXStock on deviantArt.

For the landscape image I chose this excellent aurora borealis image from UnSplash.

Step 2 - Cut The Portrait from it’s Background

Create a new image in Photoshop. Mine is 1970 x 2680. Copy and paste both images onto new layers within the document. Hide the landscape shot for now. Using whatever selection method you prefer, remove the background from the portrait. I used Quick Mask Mode (Q) to paint the selection. I also converted the portrait to black and white by pressing Cmd+Shift+U.

Step 3 - Create the Double Exposure Effect

Click over to the Channels panel, and Shift+Click the RGB channel. This will create a selection of the portrait.

Head back to the layers panel and turn the portrait layer off. Now select the landscape layer and turn it’s visibility back on. With the selection still made, press the Mask button at the bottom of the layers panel.

Finally, with the new mask selected press (Ctrl+I) to invert it.

Step 4 - Embellish the Effect

This is my favorite part. For this step, I used a free brush set from WeGraphics called Mixed Media. You can download it here.

Select a brush from the Mixed Media set. Make sure your foreground color is set to white. On the layer mask, begin clicking, to remove portions of the portrait. Switch your foreground color to black to add portions back.

Choose different brushes and resize and rotate them to build up an effect similar to mine.

Step 5 - Add texture and Lighting

To wrap it up I added a gradient map above all layers and set it’s blend mode to “Overlay”. I used #290a59 for the purple and #e1be9d for the light orange.

And finally I added a texture from the Recycled Paper Textures here at MediaLoot. I placed this texture on the bottom most layer.

That’s it! This effect looks very complex, but is really quite easy. It can be applied in any number of ways for different looks. I’d love to see what you create. Please feel free to share your results in the comment fields below.

 


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

Floating A4 Paper Mockup Vol 3


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

It's the bomb!

How to Create a Cartoon Bomb Icon with Sketch App

This tutorial will teach you the essential techniques required for creating custom icons with Sketch. And in the process you will create a cool, cartoon-style bomb icon.

Step 1

icon design tutorial for sketch app
Launch Sketch and begin by drawing a green rectangle to use as a background layer. Then right click on the layer in the sidebar and select Lock Layer to avoid accidentally selecting it again.

Rectangle:

  • Fill: #95A782
  • Border: None
  • Position: X:0 Y:0
  • Size: W:900 H:600

Step 2

icon design tutorial for sketch app
Next draw a purple circle near the center of the background layer, using the Oval tool and holding down the shift key to constrain proportions.

Circle:

  • Fill: #816F85
  • Border: None
  • Position: X:168 Y:168
  • Size: W:900 H:600

Step 3

icon design tutorial for sketch app
Place a small rounded rectangle near the top of the circle, aligned to the center of the circle horizontally.

Rectangle:

  • Fill: #816F85
  • Border: None
  • Radius: 6
  • Position: X:421 Y:204
  • Size: W:38 H:30

Step 4

icon design tutorial for sketch app
Select the Rotate tool and move the anchor point for the small rectangle to the center of the circle, then rotate the rectangle 45° clockwise.

Rectangle:

  • Transform: 315°

Step 5

icon design tutorial for sketch app
Select the circle and rectangle layers and combine them with the Union boolean function

Step 6

icon design tutorial for sketch app
Now add some styles to the merged bomb shape:

Bomb:

  • Fill: #816F85
  • Border: #434343, Outside, 6
  • Inner Shadows: Black, Alpha:20, X:-12 Y:-12, Blur:0, Spread:0

Step 7

icon design tutorial for sketch app
Use the Pen tool to draw a short wavy line from the center of rotated rectangle, to approximately half down the circle. Use 3 points in total including the start and end points then remove the fill and add a border:

Fuse:

  • Fill: None
  • Border: #EBCFA8, Center, 8

Step 8

icon design tutorial for sketch app
Go to the Layer > Paths menu and select Vectorize Stroke to convert the border to a fill so that we can add additional styles to the fuse:

Fuse:

  • Fill: #EBCFA8
  • Border: #434343, Outside, 6
  • Inner Shadows: Black, Alpha:20, X:-4 Y:-4, Blur:0, Spread:0

Step 9

icon design tutorial for sketch app
Add a new pattern fill layer above the solid color fill and select the diagonal lines default pattern (or use your own if you have a better one).

Fuse:

  • Fill 1: Diagonal lines pattern
  • Fill 2: #EBCFA8

Step 10

icon design tutorial for sketch app
Use the Star tool to draw a new shape slightly overlapping the fuse and bomb shapes.

Star:

  • Fill: #FFFFFF
  • Radius: 68%
  • Points: 8

Step 11

icon design tutorial for sketch app
Add 3 borders to the star layer to create a spark effect. Reorganize if necessary to get them in the following order from top to bottom:

Star:

  • Border 1: #434343, Outside, 6
  • Border 2: #F2780D, Inside, 6
  • Border 3: #F5A623, Inside, 12

Step 12

icon design tutorial for sketch app
The bomb is currently looking a little bit flat, so let’s add some extra lighting. Draw a new circle layer with no fill and a white border, in the center of the round part of the bomb.

Circle:

  • Fill: None
  • Border: #FFFFFF Center 6
  • Position: X:372 Y:241
  • Size: W:134 H:134

Step 13

icon design tutorial for sketch app
Double click the circle layer to enter the path edit mode, and then click the Open Path button to open up the circle.

Step 14

icon design tutorial for sketch app
Delete two of the vector points so that only the top left quarter of the circle remains.

Step 15

icon design tutorial for sketch app

Circle:
Select the Border options and add a dashed stroke, and lower the opacity of the layer to 20%

  • Fill: None
  • Border: #FFFFFF Center 6
  • Dashed Options: Ends: Round, Dash 80 Gap 15
  • Opacity: 20%

Step 16

icon design tutorial for sketch app
Draw a small white star near the top of the bomb shape.

Star:

  • Fill: #FFFFFF
  • Border: None
  • Points: 5
  • Radius: 50%
  • Position: X:450 Y:205
  • Size: W:32 H:32

Step 17

icon design tutorial for sketch app
Double click the star shape to enter the path edit mode, select all of the points on the star and set the corner radius to ‘3’ to soften the shape.

Star:

  • Corners: 3

Step 18

icon design tutorial for sketch app
Rotate the star 30° clockwise around the default anchor point.

Star:

  • Rotate: 330°

Step 19

icon design tutorial for sketch app
Duplicate the star, then move it to left, reduce the size slightly and rotate -45° anti-clockwise.

Star:

  • Rotate: -15°
  • Position: X:489.7 Y:218.6
  • Size: W:18.1 H:17.3

Step 20

icon design tutorial for sketch app
To create a shadow, draw a new Oval shape layer below all other layers except for the background:

Shadow:

  • Fill: Black, Opacity 20%
  • Border: None
  • Position: X:388 Y:385
  • Size: W:104 H:21

Step 21

icon design tutorial for sketch app
The bomb actually looks pretty cool at this stage. But to finish it off, let’s draw a friendly skull and crossbones sign onto the bomb to signify danger. Start with a simple circle for the skull head:

Circle:

  • Fill: #ECD6C3
  • Border: None
  • Position: X:421 Y:278
  • Size: W:40 H:40

Step 22

icon design tutorial for sketch app
Use a small rounded rectangle for the jaw section of the skull:

Rectangle:

  • Fill: #ECD6C3
  • Border: None
  • Radius: 6
  • Position: X:429 Y:308
  • Size: W:24 H:14

Step 23

icon design tutorial for sketch app
Next up, lets give our skull some eyes. Draw two circles (or just one and duplicate it for the second). The only difference will be the X position values.

Eye 1:

  • Fill: #816F85
  • Border: None
  • Radius: 6
  • Position: X:429 Y:298
  • Size: W:10 H:10

Eye 2:

  • Fill: #816F85
  • Border: None
  • Radius: 6
  • Position: X:443 Y:298
  • Size: W:10 H:10

Step 24

icon design tutorial for sketch app
For the nose, use the triangle shape tool to draw the basic shape. Then double click the triangle to enter the path edit mode, select all 3 vector points and set the Corners value to 2.

Nose:

  • Fill: #816F85
  • Border: None
  • Corners: 2
  • Position: X:438 Y:307
  • Size: W:6 H:8

Step 25

icon design tutorial for sketch app
Next up are the crossbones. Start by drawing a basic rectangle:

Rectangle:

  • Fill: #ECD6C3
  • Border: None
  • Position: X:412 Y:329
  • Size: W:60 H:6

Step 26

icon design tutorial for sketch app
Draw a small circle intersecting with the top left point of the rectangle:

Circle:

  • Fill: #ECD6C3
  • Border: None
  • Position: X:407 Y:324
  • Size: W:8 H:8

Step 27

icon design tutorial for sketch app
Duplicate the circle layer 3 times, one for each of the rectangles other corners. Then select all 4 circles and the rectangle and combine them with the Union function.

Circle 1:

  • Position: X:407 Y:324

Circle 2:

  • Position: X:407 Y:331

Circle 3:

  • Position: X:467 Y:324

Circle 4:

  • Position: X:407 Y:331

Step 28

icon design tutorial for sketch app
Take the combined bone shape and rotate it 15° clockwise.

Bone:

  • Rotate: 345°

Step 29

icon design tutorial for sketch app
Duplicate the bone shape and flip it horizontally.

Step 30

This is how the bomb should now look:
icon design tutorial for sketch app
We could happily call this finished now, but I do have one last optional final touch..

Optional: Add speckle textures

This optional extra step involves downloading our premium Vector Speckle Textures resource. Once you have done this, place 2 of your favourite textures from the pack on layers above all of the other artwork:

icon design tutorial for sketch app
icon design tutorial for sketch app


Texture 1:

  • Fill: White
  • Opacity: 20%

Texture 2:

  • Fill: Black
  • Opacity: 10%

Result & Conclusion

Here is the final result, I think you will agree that it looks the bomb! (sorry)
icon design tutorial for sketch app

This tutorial has covered a lot of techniques essential for designing custom icons, such as combining simple shapes to create more complex layers and also using layer styles to create visual effects. These techniques are also universally applicable, not just within Sketch.


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

App Store Screenshot 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

Bleach Stained 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

Wireframe Sketch Sheets (Apple Watch)


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 Speckle 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

Simple, Quick, and Gorgeous

Quick Tip: Create a Watercolor Text Effect in Adobe Illustrator

This very popular and trendy text effect is surprisingly easy to create in Adobe Illustrator. Let's take a look at how it's done.

Create a new document in Illustrator. Add some text using the font of your preference. I chose Seaweed Script.

With your text in place, change the color to transparent.

Now click the Draw Inside button on the tools panel. You’ll notice a dotted outline at each corner of the text box.

Now click File | Place and choose a watercolor texture. I’m using a texture from the Watercolor Wash set at WeGraphics.net. Many great watercolor textures can be around the web if you don’t already have one.

Once your texture is placed, click and position it until you are satisfied with the look.

Now click the Draw Normal button on the Tools panel. You can click and edit the text at this point if you need to change it, or you can double click and move the texture around some more if you need to.

Add more watercolor texture to embellish the text even further!


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

100 Translucent 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

Stained Concrete Floor 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

Overprinting 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

Create stunning shadows and reflections

How to Create an Artwork Mockup with Studio Lighting in Photoshop CS6+

This tutorial for Photoshop CS6 shows you how to use Smart Objects and the new Blur Gallery effects to create an impressive, studio lighting style shadow and reflection perfect for displaying business card designs, app screenshots, album artwork and more.

Please check your version of Photoshop before starting this tutorial, you must have either CS6, CC or newer to use the Tilt-Shift blur filter

Step 1

Open a new document in Photoshop, width 900px and height 680px. Then create a new color fill layer or fill the existing background layer with a light pink-ish gray color (#e1dcdf).
shadow and reflection effect in photoshop

Step 2

The next step is to create the Smart Object that will be used for the artwork, the shadow and also the reflection. Draw a rectangle 320 x 320 pixels and in the Layers panel right click the layer and select Convert to Smart Object.
shadow and reflection effect in photoshop

Step 3

Double click on the Smart Object thumbnail to open in it, and design or paste in your artwork. In this example I am using the cover art for the album Another Eternity by the artist Purity Ring.

The cover art copyright is believed to belong to the label, 4AD, or the graphic artist(s), Tallulah Fontaine.
shadow and reflection effect in photoshop

Step 4

Save and close the Smart Object to return to the main document, then duplicate the Smart Object layer and move it below the original layer in Layers panel. Press CMD+T or CTRL+T to enter Transform mode, and drag the top edge of the bounding box down until it is only 60 pixels tall.
shadow and reflection effect in photoshop

Step 5

Still in Transform mode, hold down the CMD key and drag the top left and right points out to the sides as shown in the screenshot below. Try to keep them roughly an equal distance apart on each side, but don’t worry too much if it isn’t perfect.
shadow and reflection effect in photoshop

Step 6

Set the Foreground Color to black and open the Blending Options window for the duplicated Smart Object, then set the Fill Opacity to 0%
shadow and reflection effect in photoshop

Step 7

Apply a Gradient Overlay from Foreground Color (black) to transparent.
shadow and reflection effect in photoshop

Step 8

The duplicated Smart Object layer should now be starting to resemble a shadow.
shadow and reflection effect in photoshop

Step 9

The shadow is currently much too sharp, so let’s start by applying a subtle all over Gaussian Blur filter.
shadow and reflection effect in photoshop

Step 10

Now we can use the Tilt-Shift effect from the Filter > Blur Gallery menu to add a dynamic blur. Lower the position of the effect so that the top solid line lines up with the bottom of the artwork, then bring the dashed line closer, roughly 30 pixels above the solid line. Set the Blur value 25px, or optionally tweak it until you find a value that works for you.
shadow and reflection effect in photoshop

Step 11

After applying the blur effect, click OK and return to the main document. Then duplicate the main Smart Object once more and move it down one place in the Layers panel. Press CMD+T or CTRL+T to enter Transform mode and drag the top edge of the bounding box down around 190 pixels below the bottom edge which will also flip the artwork vertically.
shadow and reflection effect in photoshop

Step 12

Set the Foreground Color to #e1dcdf.
shadow and reflection effect in photoshop

Step 13

Open the Blending Options window and set the Fill Opacity to 25%
shadow and reflection effect in photoshop

Step 14

Apply a Gradient Overlay from Foreground Color (#e1dcdf) to transparent.
shadow and reflection effect in photoshop

Step 15

This layer should now look like a reflection on the surface below the artwork.
shadow and reflection effect in photoshop

Step 16

Apply a subtle 1 pixel Gaussian Blur to the reflection layer to make it look a little more realistic.
shadow and reflection effect in photoshop

Step 17

Select the original Smart Object layer and use the up arrow key to Nudge the artwork up 2 pixels
shadow and reflection effect in photoshop

Step 18

We now have a shadow and reflection, but no discernible light source. So lets add one with a new Gradient Fill layer above all other layers.
shadow and reflection effect in photoshop

Step 19

Use the default Black to White preset gradient, and change the angle to a value of 105° (or something else close to but not quite 90°).
shadow and reflection effect in photoshop

Step 20

Finally, set the Blending Mode of the Gradient Fill layer to Soft Light.
shadow and reflection effect in photoshop

Result

Here is the result:
shadow and reflection effect in photoshop

Conclusion

The techniques covered in this tutorial are the basic building blocks for creating business card, app screen and album artwork mockups in Photoshop. Hopefully by following along you will now have a better understanding of how to manipulate Smart Objects in Photoshop and even use the new Tilt-Shift blur filter for a creative effect that it wasn’t actually intended for.


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

Responsive Screen Perspective 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

Responsive Newsletter Email 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

Designs with Flare

Create an Easy Flaming Wing Butterfly Effect in Photoshop

In this tutorial we're going to create a butterfly with flaming wings. Using the warp transform tool in Photoshop you'll see how easy it is to shape and manipulate fire into wings. We'll also create a custom brush and see how applying a simple texture can add depth to your digital art. Let's get started!

Step 1 - Gathering Resources and Getting Started

We’ll need a couple of images for this tutorial. You can use any butterfly image that you like, or you can download the one I’m using here. For the fire, you’ll need to download this excellent resource provided by sidestreet-stock on DeviantArt.

Open Photoshop and create a new document. Mine is 2000x1500 at 72dpi. Fill the background with a dark gray (#1b1a19). Copy and paste the butterfly image onto our new document.

Step 2 - Applying Fire to the Butterfly’s Wings

Set the butterfly layer’s opacity down to 30%. Now open the fire images and choose a few that look like they can be easily manipulated into the wing shapes. Copy and paste a fire image onto a layer above the butterfly. Set the fire layer’s blend mode to “screen”, then click Edit | Transform | Distort to position the fire over the butterflies wing.

Now click Edit | Transform | Warp to shape the fire within the butterfly’s wing.

Repeat this process until the entire wing is filled with fire. You may not have to warp each flame, but you will have to scale and rotate it into place.

Once you have a nice shape for the wings, combine all of the fire layers into one.

Now set this new combined layer’s blend mode to back to “screen”. Duplicate the layer and click Edit | Transform | Flip Horizontal. Position this new wing copy on the opposite side of the butterfly. Select the two wing layers and press Cmd+E to combine them. You’ll need to set the new combined layer’s blend back to “screen” again.

Let’s add a couple more adjustments to the wings, just to give them more of a painted look. Duplicate the wings layer, and with the duplicate layer selected, click Filter | Other | High Pass. Use a setting similar to mine below, and set the layer’s blend mode to “overlay”.

Combine the two layers by selecting them and press Cmd+E. Set the combined layers blend mode back to “screen”. Now choose Filter | Sharpen | Unsharp Mask. Use a setting similar to the one I have below.

Note: If you have little white lines around the wings shapes, like I do above, after this step, simply erase them with a soft eraser brush.

Finally, let’s set the original butterfly image’s opacity back to 100%. Create a layer mask and use a soft brush with Opacity and Flow set to around 50%, and begin hiding most of the wings. You can let a little show through some of the flames if you prefer.

Step 3 - Adding Texture

No digital art is complete without texture. I chose a file from this Bleached Paper Textures collection(http://wegraphics.net/downloads/textures/bleached-paper-textures/) at WeGraphics. I added it to a layer just above the background layer. I set its opacity to 50% and its blend mode to “Overlay”.

Then I duplicated the texture layer and desaturated it by press Cmd+Shift+U. I set its opacity to 100% and its blend mode to “Overlay”.

Step 4 - Adding Light Effects

To adjust the lighting I added several items. The first is a Gradient Map adjustment layer. It’s positioned above all other layers and is set to the colors below.

Next, use a large soft brush and click once on a layer above the butterfly but below the wings. Use a color similar to #f6bb0d. Set this layer’s blend mode to “overlay”.

On a new layer above the wings use a small soft brush to outline the edges of the wings. Use a color similar to #fc7504. Set this layer’s opacity to 50% and its blend mode to “overlay”.

Step 5 - Create a Custom Brush to add Sparks

To finish it up we’ll add some sparks using a soft round brush. Open the brushes panel and adjust the settings as I have below.

Choose a color similar to #f36f09, and begin painting sparks around the edge of the butterfly.

Conclusion

I hope you found this tutorial easy and informative. Hopefully you’ll be inspired to use the techniques in your own digital art. If so, I’d love to see the results. Please use the comment fields below to share your work!


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

Apple Watch - Free Psd 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

Ink Scrapes Brush Set


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

Floating A4 Paper Mockup 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

Photography & Camera Function 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

Vector City Street Maps


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 Must-Have List

Essential Resources for The Ultimate Designer’s Toolbox

It's essential for a designer to create a toolbox, or an arsenal, of tools that he/she uses to create various effects and techniques in a project. The amount of time it saves allows a designer to concentrate on the job at hand versus having to spend time creating the resources at the core of any given technique. A few years ago it was up to a designer to create his or her own design resources for each project that came along. Now'a days you can go online and purchase any kind of design resources you can imagine, and some that you would have never imagined. These resources are often times small and affordable and have little impact on the project budget. Let's take a look at some of the types of resources that are essential to building an ultimate designer's toolbox.

Fonts

In my opinion fonts are at the core of every design. Fore the most part, we’re only as good as our font collections. There are a ton of free fonts available on the web, and some are very good. Premium fonts tend to offer a bit more options and usability. I typically put fonts into two categories: body fonts and title fonts. Body fonts would be fonts that I would use in the body of an editorial piece or a webpage. These are typically very readable classic style serifs and san serifs. Title fonts are the attention getters and are usually a bit more fun to use. They’re sometimes ornate, hand drawn or very graphical.

Here are some great fonts to put into your toolbox:

Vectors

Vector graphics are the most versatile format to have your toolbox. Vectors are completely scalable and editable. Familiarizing yourself with a vector graphics program like Adobe Illustrator or Inkscape is a skill that every designer should possess. When it comes to vector graphics for your toolbox, it might depend on what type of projects you typically take on. But some basics may include things like ornate patterns, badges and logos, hand drawn items and maybe a few vintage elements.

Here are some good recommendations for your vector collection:

Brushes and Textures

Brushes and Textures are important for adding a custom look to Photoshop creations. These types of resources enable you to give a design a real-world look. Basically transforming perfect pixels into something that is worn, painted, distressed or made by hand. Given the right touch, textures and brushes can give a design a warmer more inviting feel. If overused they will serve as not much more than a distraction to the viewer, so having the right items in your toolbox is essential.

Here are some great packs that I would recommend:

Mockup Files

Mock up files are important to have in your toolbox as they help you to display your finished work in a real world setting. Having your designs on actual t-shirts, posters, books and screens in your portfolio helps make your work appear more finished and in use. Displaying your work as a mockup also helps a client visualize how the finished piece will look. Mockup files can be very basic and utilitarian, or they can be very creative and specific to a certain style. Either way, having a good selection of mockups in your arsenal is a must.

Here are a few examples of mockup files:

Icons and Web Files

Saving time as a web designer is huge. It’s all about maximizing your development efforts and staying on budget. Utilizing preexisting resources is an easy way to make that happen. Everything from icons, UI elements, CSS code and plugins can cut time. These items are out there and available for making your life easier.

Here’s a look at a few sets that are perfect for your toolbox:


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 Painted Vector Badge Shapes


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

Small Splatters Brush Set


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

Data presentation with Material design influences

How to Create a Smooth Segmented Chart using Sketch 3 App

This tutorial will teach you how to create a simple line chart, inspired by Google Material design principles using primarily the vector tool, gradients and masks in Sketch 3 app.

Step 1

Open Sketch App and start by drawing a very large rectangle on the canvas to use as a background layer, this is an optional step but it does provide contrast between the background of the chart and the canvas color which will both be white.
graph ui design tutorial for sketch app

Step 2

Next draw a smaller rectangle which will be the containing box around the chart. The dimensions should be 860 x 540 with a white background fill, no border and a subtle shadow:
graph ui design tutorial for sketch app

Step 3

In the layers panel right click on both layers and select Lock Layer.
graph ui design tutorial for sketch app

Step 4

With the Line (L) tool draw the first vertical grid line. To help you figure out where to place it, the bottom point of the line should be 70 pixels from the bottom and left of the containing box. The line itself should be 340 pixels in length.
graph ui design tutorial for sketch app

Step 5

Duplicate the line 9 times, moving it 80 pixels to the right each time:
graph ui design tutorial for sketch app

Step 6

Use the Text (T) tool to add some labels in between each grid line.
graph ui design tutorial for sketch app

Step 7

Also create a text heading for the chart.
graph ui design tutorial for sketch app

Step 8

We are now ready to draw the data for the chart, the desired effect will be a smooth wave. Begin by selecting the Vector (V) tool and click to place a point on the first grid line. Then click and hold the second point slightly higher on the next grid line, and with the mouse button still held down, drag the handles out until they are roughly in the middle of two grid lines as shown below:
graph ui design tutorial for sketch app

Step 9

Repeat this process creating a vector point on each grid line, to create a smooth wave shape:
graph ui design tutorial for sketch app
graph ui design tutorial for sketch app
graph ui design tutorial for sketch app
graph ui design tutorial for sketch app
graph ui design tutorial for sketch app
graph ui design tutorial for sketch app
graph ui design tutorial for sketch app

Step 10

After drawing the next vector point, change the handle type to Disconnected and remove the right handle by dragging it back in towards the vector point. This will give you a straight corner when you draw the following point.
graph ui design tutorial for sketch app

Step 11

Hold down the Shift key while creating the next two points to constrict them to perfectly straight lines. Go to the bottom of the last grid line and then all the way over to the bottom of the first grid line.
graph ui design tutorial for sketch app
graph ui design tutorial for sketch app

Step 12

To finish the path and complete the shape, click Close Path.
graph ui design tutorial for sketch app
graph ui design tutorial for sketch app

Step 13

Now let’s give our wave some color. Remove the border if it has one and apply a Gradient fill instead. The arrow buttons can be used to quickly rotate the gradient and make it horizontal. Set the color stops to #61FSD2 and #1C9BF7. I strongly recommend saving this as a new preset to save time later.
graph ui design tutorial for sketch app

Step 14

Change the Opacity of the ‘Path’ layer to 50%.
graph ui design tutorial for sketch app

Step 15

Duplicate the ‘Path’ layer and then on the new ‘Path 2’ layer edit the vector shape. First click Open Path and then delete the bottom two points so that all you have remaining is a wavy line from the left to the right (this will look kind of wonky at first, but don’t worry!)
graph ui design tutorial for sketch app
graph ui design tutorial for sketch app
graph ui design tutorial for sketch app

Step 16

With the ‘Path 2’ layer still selected, remove the gradient fill and instead apply a 3 pixel Border, using the same gradient (you did save it as a preset right?).
graph ui design tutorial for sketch app

Step 17

Select both the fill and border path layers (‘Path 1’ and ‘Path 2’) and hit CMD+G to group them. Rename the group to ‘Wave’.
graph ui design tutorial for sketch app

Step 18

Create a new rectangle on a layer above the ‘Wave’ group, this is for the highlighted segment and should be around 40 pixels taller and 40 pixels wider than the actual grid segment in order to give the illusion of depth.
graph ui design tutorial for sketch app

Step 19

Select both the ‘Wave’ and ‘Rectangle 3’ layers and duplicate them. 
graph ui design tutorial for sketch app

Step 20

Select the duplicated ‘Wave 2’ and ‘Rectangle 4’ layers and go to Layer > Mask with Selected Shape or click the Mask icon in the toolbar.
graph ui design tutorial for sketch app

Step 21

Expand the ‘Wave 2’ group in the layers panel and select the sub-group also called ‘Wave 2’. Use the bounding box/transform controls to increase the size of the wave around 5-10% and give it a “zoomed-in” effect.
graph ui design tutorial for sketch app

Step 22

Now expand the ‘Wave 2’ subgroup that you just resized, and select the ‘Path 2’ layer within. This is the layer with the border, increase the Thickness of the border to 5.
graph ui design tutorial for sketch app

Step 23

It is still a little difficult to distinguish between the zoomed in section and the original wave, so let’s go back to the original ‘Wave’ group and reduce the Opacity value of the whole group to 75%.
graph ui design tutorial for sketch app

Step 24

And to cement the illusion of depth, select the ‘Rectangle 3’ layer and apply a Shadow. There is now a clear distinction between the base chart and the highlighted segment.
graph ui design tutorial for sketch app

Step 25

Finally, let’s just add back in the text label for ‘30’ that is now hidden, but make it much darker and larger this time.
graph ui design tutorial for sketch app

Result

Here is the final result, an undoubtably very simple chart but a very pretty one!
graph ui design tutorial for sketch app

Conclusion

Hopefully by following along with this tutorial you now have a better understanding of using the vector tool for drawing smooth wave-like shapes, gradient fills and also how to use shapes to mask groups and layers. It may also provide an introduction to Material design principles that can be implemented into your designs.


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

Noise & Grit Seamless 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

Lumino Pro: 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

Turn Inspiration into Tools

Quick Tip: Creating Custom Color Swatches From Any Photo

In this quick tip we'll be looking at a technique that I use a lot when working with photos. If I like the colors in a photo and want to use those in a design, or in future designs, I'll create and save a custom swatches file. Let's take a look at how it's done in Photoshop.

The Right Photo

Open up Photoshop and start with a photo that contains colors that you like. Here’s mine.

Now click Image | Mode | Indexed Color from the top menu. It will ask you to flatten layers if there are any. On the next panel choose the amount of colors you want to appear in the swatches. I chose 256.

Creating and Saving the Swatches

Now click Image | Mode | Color Table. The table will open with all of the newly created swatches.

Click Save, and name the .ACT file whatever you like. Save it to whatever location you want. Now open the Swatches panel by clicking Window | Swatches. Once the panel is open choose “Load Swatches” or “Replace Swatches” by clicking the arrow in the top right of the panel. Navigate to your new .ACT file to load the new swatches. You can also change your image back to RGB color at this point.

Now you can create new elements and choose consistent colors from within the photo, or you can open and use the colors in another project.


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