Envato Tuts+ Tutorials

Envato Tuts+ Tutorials

How to Create Different Vector Textures Using Adobe Illustrator

Posted: 27 Jun 2021 12:00 AM PDT

Final product imageFinal product imageFinal product image
What You'll Be Creating

Creating interesting textures can sometimes be a difficult and annoying task, especially if you don't know exactly where to start.

Since I've been there, I wanted to help you out by putting together this little tutorial which will show you three different methods that are easy to learn and master.

So, if that sounds interesting, join me as we learn how to create a simple decorative vase and use textures to bring it to life.

Looking to add vector textures to your artwork? Head on over to our article on the best free vector textures the web has to offer.

Follow along with us over on our Envato Tuts+ YouTube channel:

1. How to Set Up a New Project File

As always, let's kick off the project by opening Illustrator and setting up a New Document by going to File > New (or Control-N), which we will adjust as follows:

  • Number of Artboards: 1
  • Width: 1200 px
  • Height: 600 px
  • Units: Pixels

And from the Advanced tab:

  • Color Mode: RGB
  • Raster Effects: Screen (72ppi)
  • Preview Mode: Default
setting up a new documentsetting up a new documentsetting up a new document

2. How to Set Up the Layers

Once we've created our new document, we'll want to layer it so that we can separate our vases (that we'll use as support for the different textures) from the background.

So open up the Layers panel and create a total of two layers, which we will rename as follows:

  • layer 1: background
  • layer 2: vases
setting up the layerssetting up the layerssetting up the layers

3. How to Create the Background

With the document all layered, we can now start working on the actual project, and we will do so by creating the background. That being said, make sure you position yourself onto the first layer and let's jump straight into it!

Step1

Using the Rectangle Tool (M), create a 1200 x 600 px rectangle, which we will color using #FF8269 and then align to the center of the underlying Artboard using the Align panel's Horizontal and Vertical Align Center options, making sure that the alignment is made to the Artboard.

creating and positioning the backgroundcreating and positioning the backgroundcreating and positioning the background

Step 2

With the background in place, we can now lock the current layer and move on to the next one, where we will start working on our little vases.

locking the background layerlocking the background layerlocking the background layer

4. How to Create the Vase

Assuming you've already positioned yourself on the second layer, let's start working on the actual decorative vessels that we are going to display our textures on.

Step 1

Start by creating the lower section of the vase's body using a 128 x 128 px circle, which we will color using #FFE7C5 and then center align to the larger Artboard, positioning it 178 px from its bottom edge.

creating the main shape for the lower section of the vasecreating the main shape for the lower section of the vasecreating the main shape for the lower section of the vase

Step 2

Add the main shape for the neck section using a 24 x 88 px rectangle (#FFE7C5) and the base using a 48 x 8 px rounded rectangle (#FFE7C5), which we will position as seen in the reference image.

adding the neck and base section to the center vaseadding the neck and base section to the center vaseadding the neck and base section to the center vase

Step 3

Open up the path of the circle's upper half and the rectangle's bottom one, uniting them into a single larger shape using the Control-J keyboard shortcut, making sure to adjust the transition between the neck section and the lower body as seen in the reference image.

adjusting the shape of the center vaseadjusting the shape of the center vaseadjusting the shape of the center vase

Step 4

Take a couple of moments and quickly decorate the vase using #2A323D for its darker sections and #FFE7C5 for its lighter ones, making sure to mask them where needed (desired shapes selected > right click > Make Clipping Mask). Once you're done, select and group all its composing shapes using the Control-G keyboard shortcut, before moving on to the next step.

adding details to the center vaseadding details to the center vaseadding details to the center vase

Step 5

Once we've finished working on the vase, we can now add the foreground line using a 160 px wide, 2 px thick Stroke line (#2A323D). After grouping (Control-G) the two together, add the remaining instances (Control-C > Control-F twice) which we will position at a distance of 160 px from the original.

creating the remaining vasescreating the remaining vasescreating the remaining vases

So at this point, we've pretty much finished working on our blank canvases (the vases) which means we can now move on to the part that most of you are interested in, and see how we can add textures to them using three different methods.

5. How to Add Textures Using the Grain Effect

The first method, and my personal favorite, is using the Grain Effect, which is actually derived from Photoshop.

Step 1

Position yourself onto the first vase (that would be the left one), and then using the Direct Selection Tool (A) select the shapes for its body and base, which we will copy (Control-C) and then paste in front (Control-F) where they will be used as a Clipping Mask.

creating the clipping mask for the grain effect texturecreating the clipping mask for the grain effect texturecreating the clipping mask for the grain effect texture

Step 2

Since we want the two shapes to behave as a single larger one, we'll have to turn them into a Compound Shape by going over to Pathfinder's advanced menu and then clicking on the Make Compound Shape option.

creating the compound shapecreating the compound shapecreating the compound shape

Step 3

Next, we'll want to apply a linear gradient to the Compound Shape, setting the color of the left stop to white (#FFFFFF) and that of the right one to the same value used for our darker sections (#2A323D).

creating the gradient for the grain effect texturecreating the gradient for the grain effect texturecreating the gradient for the grain effect texture

Step 4

Once we've applied the gradient, we can add the grain texture by going to Effect > Photoshop Effects > Texture > Grain, where we will want to set the Grain Type to Stippled and then adjust the Intensity and Contrast levels until we get an interesting result. In my case, I went with a value of 40 for the Intensity and 50 for the Contrast, which gives me a heavy enough texture to work with.

adjusting the settings of the grain effectadjusting the settings of the grain effectadjusting the settings of the grain effect

Step 5

Depending on the result, you can adjust the position of the texture by opening up the Gradient panel and then dragging the top slider either to the left to add more details or to the right to remove them. Another thing that you should always remember to do is set the Opacity level of the lighter color stop (in our case the left one) to 0% (or a close enough value like 10%) since otherwise the white will end up ruining the texture.

adjusting the position of the grain textureadjusting the position of the grain textureadjusting the position of the grain texture

Step 6

All we need to do now is blend our texture to our vase by opening up the Transparency panel and choosing a Blending Mode that works. For the current example, I went with Overlay, which as you can see produces a nice, subtle transition between the texture and the vase, which is exactly what I want. Depending on the project, you might end up using a different Blending Mode and Opacity level, so I strongly recommend you play around with them until you find one that produces an interesting effect.

choosing a blending mode for the grain effect texturechoosing a blending mode for the grain effect texturechoosing a blending mode for the grain effect texture

6. How to Create Textures Using a Custom Stipple Brush

Once we've finished adding texture to our first vase, move on to the second one, where we will see how we can create a stipple brush and then use it to decorate our second canvas.

Step 1

As we did with the previous method, we'll first want to create a copy of the vase's main body and stand, which we will turn into a Compound Shape that we will later on use as a Clipping Mask.

creating the clipping mask for the stipple brush texturecreating the clipping mask for the stipple brush texturecreating the clipping mask for the stipple brush texture

Step 2

Next, we need to create the custom brush by drawing a couple of different sized circles (#000000) displayed in a circular formation (highlighted with green), positioning the smaller ones towards the outside and the larger ones on the inside.

creating the main shapes for the stipple brushcreating the main shapes for the stipple brushcreating the main shapes for the stipple brush

Quick tip: as you can see, I went and created a new document so that my brush elements don't overlap with the vases, but you can just as well do it on the same project file as long as you are careful.

Step 3

Once you have all the shapes in place, all you need to do is bring up the Brush panel and, with all of them selected, simply click on New Brush, making sure to set the brush type to Scatter Brush. A new window should pop up letting you adjust some of its settings, but for now just leave them as they are since you won't be able to preview any changes. That being said, give it a custom name and hit OK, since we're going to fine tune it in the next step.

creating the custom stipple brushcreating the custom stipple brushcreating the custom stipple brush

Step 4 

If you take a closer look at your Brushes panel, you should now see the custom stipple brush that we've just created, which you need to select and then use to draw a horizontal line using the Paintbrush Tool (B). This will help us get a preview of all the changes that we're going to make to its different options. 

As soon as you have the line, you can go back to the panel and double click on the brush, which should bring up a new window, where you can adjust its different features and preview them live. 

In my case, I've set the Size to Pressure and lowered its level to 28%. I then adjusted the Spacing to 40%, making sure the Scatter is on 0% and the Rotation set to Random with a -120º angle. Last but not least, I've made sure to set the Colorization to Tints since I want to be able to change the color of my brush later on when I need to.

fine tuning the custom stipple brushfine tuning the custom stipple brushfine tuning the custom stipple brush

Step 5

Once I've finished adjusting my brush, I can go back to my project file and use it to add texture to the sides of my vase using #000000 for its left side and #FFFFFF for its right one. Depending on what you are trying to achieve, you can adjust the Weight of the Stroke in order to get the desired effect. Since I wanted to get a subtle result, I lowered it to a value of just 0.3 px.

adding texture to the second vase using the stipple brushadding texture to the second vase using the stipple brushadding texture to the second vase using the stipple brush

Step 6

Once you're happy with the result, all you have to do is position the underlying Compound Shape in front of the texture (right click > Arrange > Bring to Front), and then use it as a Clipping Mask (desired shapes selected > right click > Make Clipping Mask) in order to constrain it to the surface of the vase.

masking the custom stipple brush texturemasking the custom stipple brush texturemasking the custom stipple brush texture

7. How to Create Textures Using Pattern Swatches

Our third and last method is one that you probably never even thought of using, which is why I really wanted to point it out since it's super easy to use and gives you really interesting results.

That being said, position yourself onto the last vase, and let's see what I'm talking about!

Step 1

As we did with the previous methods, start out by creating a Compound Shape using a copy (Control-C > Control-F) of its body and base.

creating the clipping mask for the pattern swatch texturecreating the clipping mask for the pattern swatch texturecreating the clipping mask for the pattern swatch texture

Step 2

With the Compound Shape selected, open up the Swatches panel, and then click on the Swatch Libraries menu and navigate down to Patterns > Basic Graphics > Basic Graphics_Textures. As you can see, there are a bunch of options that we can choose from, but for this project we're going to use the one called Ripple.

applying the swatch pattern texture to the third vaseapplying the swatch pattern texture to the third vaseapplying the swatch pattern texture to the third vase

Step 3

Next, all we need to do is adjust the visibility of the texture by setting its Blending Mode to Overlay and lowering its Opacity to 60%, which should give us an interesting final result.

choosing a blending mode for the swatch pattern texturechoosing a blending mode for the swatch pattern texturechoosing a blending mode for the swatch pattern texture

It's a Wrap!

There you have it, fellow texture addicts: a nice, easy tutorial on how to create textures for your different projects using three different methods.

As always, if you have any questions, feel free to post them within the comments section and I'll get back to you as soon as I can!

finished project previewfinished project previewfinished project preview

Need More Textures?

Since the process of creating a collection of custom textures can end up taking a lot of time, I thought that I could help you out by sharing some of my favorite ones which you can get over at Envato Elements.

Vintage Halftone Textures

This Halftone Texture pack includes 10 high-quality vector EPS and PNG files derived from high-resolution photos. These textures capture the feel of old-school prints and hearken back to the day when you could easily spot the halftone textures in prints. They can provide an authentic and classic feel to almost any project. Click on the larger view of each of the product images to better see the detail.

vintage halftone textures by envato elementsvintage halftone textures by envato elementsvintage halftone textures by envato elements
Vintage Halftone Textures by Envato Elements

Example of Vintage Halftone Textures applied on vases.

vintage halftone textures vase examplevintage halftone textures vase examplevintage halftone textures vase example

Vintage Grit Textures

This authentic collection features an old-time vintage feel with a variety of textures ranging from very subtle grit to heavier grit so you can find the right texture for the job. Easily drop these finely detailed textures onto your design and add multiple textures onto one design for an even heavier distressed look.

vintage grit textures by envato elementsvintage grit textures by envato elementsvintage grit textures by envato elements
Vintage Grit Textures by Envato Elements

Example of Vintage Grit Textures applied on vases.

vintage grit textures vase examplevintage grit textures vase examplevintage grit textures vase example

Wave Painted Textures

Presenting a unique collection of hand-painted wave textures with a high-impact look. This collection is perfect for projects where you need an abstract background with some dramatic flair.

painted wave textures by envato elementspainted wave textures by envato elementspainted wave textures by envato elements
Wave Painted Textures by Envato Elements

Example of Wave PaintedTextures applied on vases.

wave painted textures vase examplewave painted textures vase examplewave painted textures vase example

Rippled Water Textures

High-resolution textures for all your designing purposes. This pack includes eight Rippled Water textures for photographers, graphic designers, and DIY creatives to help you create cards, backgrounds, banners, or other projects.

rippled water textures by envato elementsrippled water textures by envato elementsrippled water textures by envato elements
Rippled Water Textures by Envato Elements

Example of Rippled Water Textures applied on vases.

rippled water textures vase examplerippled water textures vase examplerippled water textures vase example

Vintage Fabric Textures

Here's a set of high-quality full-page fabric textures for some good old vintage flavor. The set covers a range of fabrics from denim varieties to standard t-shirt fabric. Any of these textures can be used in either Photoshop or Illustrator (or any program that uses either Vector EPS or Transparent PNGs).

vintage fabric textures by envato elementsvintage fabric textures by envato elementsvintage fabric textures by envato elements
Vintage Fabric Textures by Envato Elements

Example of Vintage Fabric Textures applied on vases.

vintage fabric textures by envato elementsvintage fabric textures by envato elementsvintage fabric textures by envato elements

Now, even though the above textures were created using different methods than those presented in this article, you'll be applying them in the same way, by first positioning them on the desired shape, and then masking them, making sure to play around with colors, Blending Modes, and Opacity levels.

Conclusion

So, as you saw, the process of creating and using custom vector textures isn't all that hard, especially when you have a basic understanding of the tools and methods involved.

Even though today we explored just three of the different available methods, you'll be amazed at how much you can achieve using these simple techniques.

That being said, you can always expand your texturing skills by checking out these amazing tutorials that are really fun and easy to follow.

How to Make a Drop-Down Menu in WordPress

Posted: 26 Jun 2021 04:52 PM PDT

Final product imageFinal product imageFinal product image
What You'll Be Creating

Navigation menus are having a bit of a moment in the spotlight. From burger menus for mobile through mega menus for stores to sticky menus for enhanced user experience, there's a great choice in the way you can present your navigation menu in your WordPress site.

But what if you want to create a straightforward menu with a few top-level items and some more items that drop down from them when the user hovers over them?

Before you start getting into coding advanced menus like mega menus and burger menus, it's a good idea to learn how to create a drop-down menu. This will come in useful on more sites than you might imagine (not every site needs a fancy menu), and it will give you the foundation you need to start building more advanced menus.

In this tutorial, I'm going to show you how to create a drop-down menu in your WordPress theme, using CSS to target the HTML that's output by the WordPress menu function. This is designed to be used in a theme you're coding yourself, and not for a third-party theme, which will already have its own menu. However, if you're working with a third-party theme whose menu isn't drop-down and you want to add this, then you'll need to create a child theme and add your menu code to that.

What You'll Need

To follow along with this tutorial, you'll need:

  • a development installation of WordPress
  • a theme you're coding yourself, or a child theme of a third-party theme if you want to modify the menu
  • a code editor

WordPress's Built-in Menu Functionality

The first thing you'll need to understand is how WordPress generates menus. Unlike for static sites, menus aren't hard-coded into your site. Instead, WordPress uses a PHP function to query the database and fetch navigation menu items, then display them in the correct structure.

Each item in your navigation menu is actually a post in the wp_posts table in your database—not a normal post, but a special kind of post that's used just for navigation menu items, with its own metadata including the text to be displayed and the target of the link.

In your theme, open up the header.php file. You should be able to find this line:

wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) );

Your function may look a little different depending on the parameters, but let's break down the example above and see what each element does:

  • wp_nav_menu() is the function that fetches a navigation menu and outputs it.
  • The parameters are then wrapped in an array.
  • container_class is the CSS class that will be given to the container in which the menu is wrapped. In this case, it's main-nav. That's what we'll be targeting with our CSS later on.
  • theme_location => primary tells WordPress that this is the primary navigation. If I create a menu in the admin screens and check the Primary box, then this menu will be used for this spot in the code.

Sometimes you might want to add a navigation menu elsewhere in your theme, for example in the footer, in which case you don't want to use theme_location => primary. You can only use this for one menu. But you may want to use additional parameters, which you can find in the WordPress handbook page on wp_nav_menu().

Here's the checkbox for the primary navigation in the Menus admin screen:

Primary navigation settingPrimary navigation settingPrimary navigation setting

Code Output by the wp_nav_menu() Function

Before we can add CSS to create the dropdown menu, it helps to be familiar with the code that WordPress generates for menus.

Here's a typical menu for a small business, shown in the Menus admin screen:

Navigation menu in admin screenNavigation menu in admin screenNavigation menu in admin screen

Now here's the HTML output for that menu:

<div class="main-nav">      <ul id="menu-navbar" class="menu">          <li id="menu-item-610" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-609 current_page_item menu-item-610"><a href="https://121interviewcoaching.co.uk/">Home</a></li>          <li id="menu-item-613" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-613"><a href="https://121interviewcoaching.co.uk/about/">About Me</a></li>          <li id="menu-item-615" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-615"><a href="https://121interviewcoaching.co.uk/services/">Services</a>              <ul class="sub-menu">                  <li id="menu-item-618" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-618"><a href="https://121interviewcoaching.co.uk/services/services-for-individuals/">Preparing for interviews / individuals</a></li>                  <li id="menu-item-617" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-617"><a href="https://121interviewcoaching.co.uk/services/services-for-groups/">Preparing for interviews / groups</a></li>                  <li id="menu-item-619" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-619"><a href="https://121interviewcoaching.co.uk/services/conducting-interviews/">Conducting interviews</a></li>              </ul>          </li>          <li id="menu-item-30780" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30780"><a href="https://121interviewcoaching.co.uk/succeed-at-your-next-job-interview/">My Book</a></li>          <li id="menu-item-614" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-614"><a href="https://121interviewcoaching.co.uk/clients-2/">Clients</a></li>          <li id="menu-item-616" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-616"><a href="https://121interviewcoaching.co.uk/interview-tips/">Interview Tips</a></li>          <li id="menu-item-612" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-612"><a href="https://121interviewcoaching.co.uk/where-i-work/">Areas covered</a></li>          <li id="menu-item-611" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-611"><a href="https://121interviewcoaching.co.uk/contact/">Contact &#038; Links</a></li>      </ul>  </div><!-- #main-nav -->

If you examine that code, you'll see that it consists of:

  • A div with the main-nav class, defined in the wp_nav_menu() function.
  • Inside that, a ul with the ID menu-navbar and the class menu. These are defaults defined by WordPress.
  • Inside that, a number of li elements, each with the class of menu-item menu-item-type-post_type, plus other classes specific to the type of post that the menu item leads to and the state of that menu item at the time. Each one also has a unique ID, with a number corresponding to the post ID of the navigation menu item in the database.
  • Inside one of the li elements is another ul with its own li elements inside—the second-level menu items. It's this that we want to drop down when the user hovers over the top-level menu item.

Coding the CSS to Create the Drop-Down Menu

So now we know what's being output by WordPress, we can determine which elements we want to target with our CSS.

We want to achieve a couple of things:

  • When the page is opened, the second-level menu items are hidden.
  • When the user hovers over a top-level item, the second-level items below it appear.

Hiding the Second-Level Items by Default

In your theme's stylesheet, start by hiding the second-level items by default.

Add this:

main-nav ul ul {      display: none;  }

This will hide the ul element inside another ul element inside the main-nav element. It won't hide a top-level ul element, however, as it requires one ul to be nested inside another ul inside the menu.

Now, if you open the page and try to view the second-level items, it won't be possible—they'll be hidden. Let's fix that.

Making Second-Level Items Appear on Hover

Now we need to ensure that the ul nested inside the top-level li will be displayed when the top-level li is hovered over.

Add this to your stylesheet:

.main-nav ul li:hover > ul {      display: block;  }

Now, when you hover your mouse over the top-level item, the list beneath it will appear. But you'll find that it won't display the way you want it. Specifically, it will be pushing down the content below the menu. We want it to appear as if it's floating on top of the content. To fix that, we need to add some layout styling to our ul ul element.

Adding Layout Styling to the Second-Level List

Open your stylesheet and find the line with display: none in it. Edit that block to add layout styling:

.main-nav ul ul {      display: none;      position: absolute;      top: 3em;      left: 0;      z-index: 99999;      width: 180px;      background: #fff;      box-shadow: 0px 3px 3px rgba(0,0,0,0.2);  }

You also need to give the top-level list item relative positioning:

.main-nav li {      position: relative;  }

Let's take a look at what that code does:

  • position: absolute gives the second-level list absolute positioning, taking it out of the flow of elements in the page. For the higher-level item, position: relative puts the top-level list in the flow of the page and allows for an absolutely positioned element to be placed inside it.
  • top: 3em positions the top of the list relative to the top of the element it's inside, namely the top-level list item. This 3em value reflects the height of the top-level navigation bar. Edit yours if your top-level navigation has a different height.
  • left: 0 places the list to the left, relative to the item above it.
  • z-index: 99999 defines where the element sits in a three-dimensional model of the page. A high value of 99999 ensures that it is displayed on top of everything else.
  • The remaining code gives the list width and also adds display styling to it, including a shadow to make it look as if it's on top of the page.

Now let's take a look at what we see when we hover over the top-level item:

Hovering over menuHovering over menuHovering over menu

It works! When I hover over the top-level item, the drop-down menu is now displayed.

Making Your Drop-Down Menu Mobile-Friendly

The code above is great for the desktop version of the site, but the reality is that most people will be visiting your site on a mobile phone.

The menu here is too big to fit onto a small screen, so the best solution is to edit the CSS on small screens and use some JavaScript to create a burger menu.

Here's how to do it.

Adding a Menu Icon to the Banner

First, add the icon that people will need to tap on to access the menu on a small screen.

Add this to the header.php file, in the place where you want the menu icon to go:

<a class="toggle-nav" href="#">&#9776;</a>

That will output the burger symbol, using the HTML code for the symbol, inside an element with a class we'll use to hide it on larger screens.

Adding the CSS for the Burger Menu

Now you need to add the CSS to your stylesheet. First, hide the icon on larger screens:

.toggle-nav {        display: none !important;    }

Now inside a media query, add the CSS for the menu:

@media screen and ( max-width: 550px) {             	a.toggle-nav {  	    float: right;  	    margin: 0 0 0.5em 0.5em;  	    display: inline-block !important;  	    color: #fff;  	    transition: color linear 0.15s;  	}  	  	a.toggle-nav:hover, a.toggle-nav:active {  	    text-decoration: none;  	    color: #fff;  	}        	.menu-header {  	    display: inline-block;  	    position: relative;  		margin: 0;  		width: 100%;  	}  	  	#access .menu-header ul {  	    display: none;  		position: absolute;  	    top: 80%;  	    right: 0px;  	    min-width: 200px;  	    background-color: #7B3D84;  	    font-size: 1.2em;  	}  	  	#access .menu-header li {  	    display: block;  	    float: none;  	    padding-right: 2%;  	    text-align: right;  	}  	#access ul li:hover > ul {  		display: none;  	}  		   }

Note that you'll need to edit this if you're using different classes and IDs in your theme.

Adding the JavaScript

The final step is to add a script to make the menu appear when a user taps on the icon. Create a folder in your theme called scripts, and inside that, a new file called burger-menu.js, and add this to it:

jQuery(document).ready(function() {      jQuery('.toggle-nav').click(function(e) {          jQuery('.menu-header ul.menu').slideToggle(500);             e.preventDefault();      });        });

Now make sure the script is called by the theme. In your theme's functions.php file, add a function to enqueue the script:

function tutsplus_burger_menu_scripts() {        	wp_enqueue_script( 'burger-menu-script', get_stylesheet_directory_uri() . '/scripts/burger-menu.js', array( 'jquery' ) );     }  add_action( 'wp_enqueue_scripts', 'tutsplus_burger_menu_scripts' );

Now save all your files, and you'll have a burger menu on small screens.

Burger menuBurger menuBurger menu

Drop-Down Menus Are Useful for Small, Multi-Level Menus

When your site needs a menu with multiple levels but you don't need a lot of links outside your top-level menu, a drop-down menu is the simplest way to achieve this. The site I've used to demonstrate this only has one item in its menu with other items below it, and there are only three of those. Using a mega menu would be overkill, and a single-level menu wouldn't allow me to display everything I want.

Being able to add a menu like this to your themes will give you more flexibility with your menus and enhance the user experience. And you can do it with just a few lines of CSS.

20 Best Free Modern Resume Templates (Download Clean CV Design Formats 2021)

Posted: 26 Jun 2021 06:55 AM PDT

When you're job hunting, a modern resume design is one of your most important tools. Your resume is how recruiters decide whether you make the cut and get to the interview stage. 

Modern Resume Templates on Envato ElementsModern Resume Templates on Envato ElementsModern Resume Templates on Envato Elements
Premium Modern Resume & Cover Letter template from Envato Elements

But creating the perfect resume isn't always easy. One way to save yourself some hassle is to use a template, so you use the right modern resume format to wow potential employers.

A great place to find the best modern resume templates is Envato Elements. There are also more modern resume styles on GraphicRiver.

Find Premium Modern Resume Templates on Envato Elements (With Unlimited Use)

Free modern resume templates are okay if you're on a tight budget. But don't you want your resume to stand out? The best way to do that is with a premium template.

It doesn't matter if you're searching for the best modern CV templates that'll enhance your current resume or help you create a new one. Envato Elements has a great offer you won't want to miss. Download as many premium modern resume styles as you want, all for one low price. 

Envato Elements - Design Without LimitsEnvato Elements - Design Without LimitsEnvato Elements - Design Without Limits

To find the perfect modern resume format on Envato Elements, select Graphic Templates to the right of the search box. Then type modern resume into the search box. You'll see more than 10,000 clean CV designs to download. When you find the perfect template, click Download. Then start customizing your resume.

Find clean CV designs on Envato ElementsFind clean CV designs on Envato ElementsFind clean CV designs on Envato Elements

To learn more about creating a resume that stands out to hiring managers, check out our guide to creating a great resume.

5 Best Premium Modern Resume Templates on Envato Elements for 2021

If you really want to wow the HR manager, then a professional design is the way to go. If you're not confident about your design skills, using a modern resume template gives you a professional design to start with. It'll also speed up the resume creation process. Plus, you'll end up with a polished resume that attracts recruiters. 

To help you get started, check out these best premium modern resume layouts on Envato Elements:

1. Modern Resume Design Template

Modern resume templateModern resume templateModern resume template

This modern minimalist resume template is very attractive and will make your CV stand out. It's well-designed, with an infographic style approach to showing off your skills. This is an A4 modern resume template. Edit it with Microsoft Word, Adobe Illustrator or Adobe Photoshop.

2. Modern Resume and CV Template

Resume design templateResume design templateResume design template

This is one of the nicest modern resume examples with a contrasting side panel to highlight your photo, contact details, and skills. Education and work experience are on the light-colored panel on the left, making for a visually appealing package.

3. CV Resume Template, Creative, Clean & Modern

CV modern resume templateCV modern resume templateCV modern resume template

Many modern design resume templates make good use of color. This clean CV design is no exception. This US Letter template has an attractive look and makes the different sections of your resume stand out. 

The template pack includes Microsoft Word and InDesign files. You won't find this quality in free modern resume templates you find online.

4. Modern Minimalist CV Resume

Minimalist modern CV templateMinimalist modern CV templateMinimalist modern CV template

This modern CV and resume template are professionally designed and easy to edit. The template set includes a cover, cover letter and resume template. This modern resume format offers a crisp, clean look to your professional details.

5. Resume Vol. 93

Resume vol 93 modern resume templateResume vol 93 modern resume templateResume vol 93 modern resume template

The bright yellow background certainly makes this modern resume format layout stand out. It's an A4 template for InDesign that's easy to edit. Once you create your resume with this template, it'll be hard to ignore. Modern resume templates for free download can't compare to this.

5 Best Modern Premium Resume Designs on GraphicRiver for 2021

Are you planning to create modern resume format designs? Then you'll definitely need the unlimited downloads on Envato Elements. But if you're just planning to create a single CV, then the best premium modern resume designs on GraphicRiver are a good starting point.

Find modern resume styles on GraphicRiverFind modern resume styles on GraphicRiverFind modern resume styles on GraphicRiver
You can find and download thousands of modern resume styles on GraphicRiver.

To find the perfect modern resume layout, go to the Graphics tab on GraphicRiver, then type modern resume into the search box. Browse thousands of modern resume layouts. Get started with some of our top picks:

1. Modern Resume Template

Modern Resume Example SetModern Resume Example SetModern Resume Example Set

This modern CV and resume template is designed with eye-catching colors. It'll certainly make your resume more visible. The neat and organized layout lets you share your expertise, experience, and valuable skills. The modern resume template set download also includes a matching cover letter.

2. Modern Resume - Clean Resume Lines

modern resume designmodern resume designmodern resume design

This modern resume example lets you create a two-page resume, so it works well for someone with a long and varied career. The template set includes a cover letter layout. This crisp design is professional and easy to read, to give you a great chance of landing your dream job.

3. Modern Resume - Editable Design

modern resume formatmodern resume formatmodern resume format

Use several applications to customize this earth-toned modern CV template. Every element is editable and resizable. 

Use Microsoft Word, Adobe Illustrator or Photoshop to adapt it for your needs. This is an elegant, A4 CV template. Free modern resume templates found on the internet can't match this.

4. Lucky Resume

lucky modern resume templatelucky modern resume templatelucky modern resume template

Not sure which color scheme you want for your new resume? This set of modern resume layouts includes eight different colorways. Not only can you use it to create a resume and cover letter, but there's also a portfolio template. So, you can show a complete package to hiring managers with this modern resume design.

5. Modern Resume - Minimal Design

get a modern resume template on GraphicRiverget a modern resume template on GraphicRiverget a modern resume template on GraphicRiver

This minimalist modern resume design is in black and white. The template set includes a two-page resume template, along with a cover letter template, and a reference page template. 

This is an attractive and professional design. You won't see this kind of quality in a modern resume template for free download.

20 Free Modern Resume Templates to Download in 2021

It's hard to beat the advantages of using a premium modern resume design template. It's hard to match the professional design and easy customization they offer. But sometimes you just don't have the money.

Before looking for a free modern resume templates for Word and other software on the web, check Envato's free offerings. Try out various premium template files (not always free modern resume templates) at no cost to you.

Here's the deal: 

But if you're on a tight budget and can't find premium quality, then it's worth looking around for free modern resume templates. Here's a selection free modern resumes to start you off:

1. Free Two-Page Resume and Cover Letter

This free modern resume template to download is my favorite from this selection of best resume templates for free. I like its clean and minimalist layout and how each element has its own space. Edit this two-page resume and cover letter convo using Photoshop.

Resume Template Modern Free DownloadResume Template Modern Free DownloadResume Template Modern Free Download

2. Spirited Professional Free Modern CV Download

Spirited Professional is a modern template that lets you showcase your skills. This modern Hloom resume is free to download and includes a column layout so recruiters can assess your experience at a glance.

3. Fades of Green Modern CV Template Free

This a great free modern resume template to download from Hloom. It features a sleek design with a touch of green to help you stand out. The free resume template has a modern layout that includes neat sections.

4. Crisp and Clean Resume

If you're searching for a modern resume template in 2021 that's free to download, check out the Microsoft Office site. The Moo template modern CV to download is well-designed and attractive.

resume template modern free downloadresume template modern free downloadresume template modern free download

5. Free Clean Resume Template

Behance offers some of the best resume templates free for the Adobe suite. This modern resume free to download has a clean design with the right color accents. Edit this free resume template in Illustrator.

6. Free Contemporary Photo Resume

This is a modern resume template free to download from Microsoft Office. It was designed to showcase your experience and talent in a modern, stylish way. This modern CV template for free download has a space for your photo and vibrant colors to stand out!

7. Free Resume / CV Template

This is a free modern resume template to download from Behance. This free resume template features attractive header images, and activity icons. Edit it in MS Word, Photoshop, Illustrator or InDesign.

Resume Template Modern Free DownloadResume Template Modern Free DownloadResume Template Modern Free Download

8. Balanced Free Resume Template

This modern CV template free to download from Microsoft Office is a single column resume template that puts your skills at the forefront. It features an attractive, modern minimalist resume design.

9. Show and Tell Modern CV Template Free

This free modern resume template to download comes from Hloom. It features a section where you can include your professional summary, with plenty of space for skills and experience. One of the good CV templates to download free.

10. Google Docs Swiss

Looking for more free modern resume templates to download? Another place to get a clean resume template for free is from Google. Go to File>New> From Template when logged in to access them. The Swiss template has a clean, crisp look. It's a great modern CV to download.

11. Free Bold Monogram Resume

This modern resume free to download features a bold and modern design. It's really easy to customize in MS Word, change the colors or fonts of this free resume template. We think it's one of the best editable CV templates for free download.

Modern Resume Template Free DownloadModern Resume Template Free DownloadModern Resume Template Free Download

12. Google Docs Coral

This is another clean resume template that's free to download from Google. With a coral and white color scheme, it's a single column resume template. This one is a great modern resume template free to download.

13. Google Docs Spearmint

If you select this modern editable CV templates free to download, you'll love the fresh crispness. This is the Spearmint free resume template for Google Docs. Check this modern CV to download!

14. The Muse

Searching more free resume templates to download? Look no further than The Muse for modern resume styles. It's an attractive modern CV to download that's easy to customize in Google Docs. 

free modern resume templatesfree modern resume templatesfree modern resume templates

15. Google Docs Serif

This is an attractive and stylish resume template that's easy to make your own. It's one of several modern CV templates free to download from Google. This is one of the best resume templates free!

16. Google Docs Modern Writer

The red and white color scheme of this free resume template from Google draws the gaze. In keeping with its name, it looks like it's been created on an old-fashioned typewriter. Don't forget to take a look at this modern resume template free to download.

17. Cavalier Modern CV Template Free

Here's another of the modern editable CV templates that are free to download from Hloom. The modern and clean resume layout is designed to highlight job titles, experience and skills. It's really easy to edit and customize in MS Word.

18. Free Modern Resume Template

If you're looking for the best CV template to download free, this is a great option. This free resume template has a really modern and unique design. Fully customize it using Photoshop.

Modern Resume Template Free DownloadModern Resume Template Free DownloadModern Resume Template Free Download

19. Freebie Resume Template

Another nice and modern resume free to download from Behance. It features a clean and organized layout so recruiters can easily read through your experience and details. Edit this free resume template with InDesign.

20. Free Modern Resume Template

This free resume template to download is a great free option. The modern free resume also includes a cover letter. This is another one of the editable CV templates for free download that's InDesign compatible. 

How to Quickly Customize Modern Resume Templates (For 2021)

When you use a modern CV template from Envato Elements, you're sure to wow potential employers. But you might be afraid templates are hard to use. Don't worry—you can customize a modern resume template in just five easy steps.

Want to follow along? We'll be using the premium Modern Resume Template from Envato Elements.

Modern CV templateModern CV templateModern CV template
You won't find stunning style like that found in this premium template with a free resume templates download.

Let's get started:

1. Change Text

Once you've got your modern resume template open in Photoshop, it's time to add in your own details. Pre-built text placeholders are there to help. 

Text modern CV templateText modern CV templateText modern CV template
Change your premium modern resume template by selecting text boxes, then press Delete to remove unused boxes.

Click on any block of text, then select it by pressing Control + A on your keyboard. Delete any existing text, then begin typing in your own. Repeat where needed.

2. Change the Colors

Changing colors is a handy way to add contrast to a modern CV template. In Photoshop, these options live in the Layers panel. In the lower right, click to expand the folder trees to see specific objects. 

Colorful modern resume templateColorful modern resume templateColorful modern resume template
Browse the layers panel in your purchased modern CV template to adjust the color of key layers.

Once you find one you want to change, double-click. You'll see a color wheel to make any change you want.

3. Add a Headshot

A modern CV template for free download won't include premium features like the photo placeholders on this modern resume template. To add your own headshot, find the layer containing the image layout. In this case, it's called Your Photo. 

Photo modern CV templatePhoto modern CV templatePhoto modern CV template
Use the Create Clipping Mask option to select your photo placeholder in this premium modern resume template.

Expand it, then drag and drop your photo onto the layer. Drag the corners to scale and resize, placing the photo over the placeholder. Finally, right-click the layer and choose Create Clipping Mask. That snaps the photo into place.

4. Customize Fonts

Once you've added all your credentials, you might want to change the text. That might include adding bold fonts or changing the color of a word for a little contrast. 

Font modern resume templateFont modern resume templateFont modern resume template
Use the Fonts menu to update your premium modern CV template.

Click on a block of text, then press Control + A again to select it. The font menu sits at the very top of the Photoshop window. You'll find text and font options there, along with a text color-chooser.

5. Save a PDF Copy

After you're done building your amazing resume, it's time to save it. Remember, don't plan to share an actual Photoshop file. A PDF copy is the best approach because those files can be opened on almost any device. 

PDF modern CV templatePDF modern CV templatePDF modern CV template
Export your finished modern CV template (premium) as a PDF for easy-to-send results.

To do it, click File and then Save As. From the Format drop-down list, choose Photoshop PDF and finally, click Save.

5 Quick Design Tips to Make Modern Resume Designs in 2021

I hope you've liked the resume templates to download I just showed you. Now, if you want to enhance the appeal of your resume, check out the resume design tips below:

1. Create Visual Hierarchy

see modern resume templates on Envato Elementssee modern resume templates on Envato Elementssee modern resume templates on Envato Elements
Premium modern resume format from Envato Elements

Make it easy for recruiters to find key sections of your resume by using fonts to create visual hierarchy. Don't overdo it. A title font and body font should be enough. Read our guide to pairing fonts to help you make the right font choices. 

2. Use Color

There's no rule that says your CV or resume has to be in basic black print on a white background. With so many CVs delivered electronically, make yours stand out with a splash - or more - of color. This is a great way to draw attention to some of your best characteristics.

3. Showcase Your Results 

Visit Envato Elements to find modern resume layoutsVisit Envato Elements to find modern resume layoutsVisit Envato Elements to find modern resume layouts
Premium modern resume design

When choosing a clean resume template, free or premium, ensure there's an easy way to make the key results you've achieved stand out. That's one of the parts that'll interest recruiters most, so don't hide it away.

4. Avoid Distracting Design Elements

If there's anything on your resume that doesn't contribute to the goal of getting you the job, take it out. Yes, you want your resume to look great. But you want to avoid anything that distracts recruiters from that purpose. A simple, effective design is often the way to go.

5. Use the Right Language

find modern resume styles on envato elementsfind modern resume styles on envato elementsfind modern resume styles on envato elements
Modern resume examples (premium) from Envato Elements

When you're talking about your achievements, use some of the language that's in the job ad. This helps show that you're the right person for the job and can make a difference in getting you to the interview stage.

5 Modern Resume Design Trends for Professionals in 2021

A premium modern CV resume template is the best choice for professionals in 2021. Free resume templates from around the web simply can't equal the quality of a premium design. Remember, this is your career, and first impressions are key. 

To ensure that you build the best resume possible, keep these five modern trends in mind:

1. Skillset Analysis

Measuring skills with a clear visual: that's a hot new trend you should consider. The best resume templates free you to craft a spectacular layout that won't go unnoticed.

Skillset modern resume templateSkillset modern resume templateSkillset modern resume template
CV Resume (premium template) has sleek visuals in this premium option that you can't find in a modern CV template free download.

Quick and easy to edit, skill sliders like these let you show off your core skills at a glance.

2. Intro Summary Statements

A quick intro summary goes beyond simply a list of credentials. It lets you introduce yourself in your own words. Tell recruiters and hiring managers exactly what you bring to the table.

These are clearly very important, so it's key to get it right. Go explore our helpful tutorial to get started:

3. Layouts Tailored by Job

Many free resume templates download options may be basic. But premium layouts give you specific focus. Choosing a job or field-specific resume has many advantages. 

Web developer modern CV templateWeb developer modern CV templateWeb developer modern CV template
This premium modern resume template targets web developers. 

They help you highlight specific skills essential for the position. Plus, they help you with ideation. In essence, you can "follow the prompts" to make sure all key areas of your specialty are captured.

4. Carefully Managed Length

Crafting a modern resume is a balancing act. You never want to run too long, but you don't want to omit important details either. It helps to consider both the length and depth of your work experience. Plus, think of specific factors that make you a great fit for a given position. 

Sounds a little daunting, right? Don't worry. We've got a full tutorial just for you that you can use with your modern resume examples.

5. Personal Interests Noted

Your career experiences and education are resume essentials. But it can help to briefly highlight your own personal interests. These help recruiters connect with you as an individual. 

Personal modern resume templatePersonal modern resume templatePersonal modern resume template
Unlike many modern CV templates free download choices, this premium option leaves room for personal skills and interests.

Plus, many hobbies and interests outside of work hint at specific skills you might have. Don't take up much space with these, but they're worth including in your modern resume template.

Discover More Modern Resume Templates for 2021

In this roundup, you've seen some of the best premium and free modern resume templates to download. For even more choice, take a look at the following articles:

Where to Find the Best Modern Resume Templates in 2021 (Envato Elements vs GraphicRiver)

If there's one thing you know by now, it's this: editable CV templates with free downloads aren't the best option. The best resume templates (free) just can't match the options you'll unlock with one of our download options.

You've seen modern CV templates on Envato Elements with unlimited downloads. Plus, the amazing modern resume templates on Envato Market. Which should you choose? Let's find out below.

1. Key Benefits of Envato Elements

One subscription, unlimited downloads. That's a powerful offer, and that's exactly what Envato Elements brings to the table. 

Free resume templates can't match these options. The modern CV templates on Envato Elements are impressive. They give you the features you need. And they're all included for a flat rate. That's an unbeatable offer for nearly every creative.

Envato Elements modern CV templateEnvato Elements modern CV templateEnvato Elements modern CV template
Top modern CV templates on Envato Elements (2021).

2. Key Benefits of GraphicRiver (& Envato Market)

Need a single template to get started? Envato Market be the right choice for you.

A single purchase modern resume template from Envato Market is also a great way to get started. It's low-cost and gives you the design you need to put your best foot forward while applying for your next job.

GraphicRiver Modern CV templateGraphicRiver Modern CV templateGraphicRiver Modern CV template
Top modern resume templates on GraphicRiver (2021)

Your Choice (What's Right for You?)

Envato Elements is the ultimate bang for the buck. Skip using modern CV templates for free download and lock into the unlimited creative library. You'll see the best modern resume templates and so much more! Sign up for Envato Elements now.

Envato Elements Design without limitsEnvato Elements Design without limitsEnvato Elements Design without limits
Envato Elements - Design without limits.

But do you need a single modern resume template or another file type to download right now? Then head over to GraphicRiver (or another Envato Market site) to find what you need.

Common Resume Questions Answered (FAQ)

I hope you've enjoyed my selection of premium and free resume templates to download. After some useful design tips, let me share some of the most frequently asked questions about resumes:

1. Which Software Can I Use to Create a Resume?

As you've seen from our selection of premium and free resume templates, there are plenty of software options to edit a resume. The most popular is MS Word, because of its wide availability. Other great options from the Adobe Creative Suite are Photoshop, InDesign and Illustrator.

The Adobe Creative Suite gives you more graphic formatting options and flexibility. An Illustrator resume, a Photoshop resume, or an InDesign resume is more likely to impress human reviewers. But a Word resume can also be impressive when done correctly! Check more details here:

2. What Can I Do If I Don't Have Adobe or Microsoft Software Installed?

We know not everyone has every type of software installed. If you don't have the Adobe Creative Suite or the Microsoft Office suite, you can still create a winning resume. One alternative is to use resume templates for Google Documents, which is free to use if you've got a Gmail account. More details here:

3. What Format Should I Choose for My Resume?

When you're ready to save your new resume, you usually choose between two main formats: .pdf or .docx.

The number one rule to know which one to use is to read the job listing carefully and to follow any instructions there. 

If the description says to attach a resume in .docx format, use a Word resume format. If it asks applicants to attach a PDF file, use a PDF resume format. If there aren't specific instructions, then it's best to know the pros and cons of each format:

4. What Do I Need to Consider When Doing My Resume?

Graduates and professionals tend to dread creating a new resume because they don't know what to include in it or what to exclude. Let me help you with that. This what you should consider when doing your next resume: 

  • Content. Include your skills, job experience, and any post-secondary education.
  • Design. This encompasses the fonts you use. The margins you set, and the spacing on the template.
  • Keywords. Use powerful words such as action words or job-specific keywords.
  • Type. There are more than chronological resumes. The other two other formats are combination and functional resume, each with their own pros and cons.

5. What Phrases Should I Avoid in My Resume?

The words you include in your resume are very important. Consider deleting cliché and useless information phrases. You don't want the recruiter to read the same common and cliché phrases on your CV. Some of the phrases you should avoid are: "References Available Upon Request, "Duties Included" and "Selected As". Learn more here:

Learn More About Creating Modern Resumes

Want to learn more about how to create a modern resume? Take a look at the tutorials and guides below:

Get a Modern Resume Template Today

Free modern resume templates are okay if you can't afford anything better. But the modern resume templates you find for free download typically lack quality and features. Professionally designed modern resume templates don't have that problem.

If you want recruiters to take you seriously, it's essential to have a polished, professional resume. Download as many premium modern resume templates as you want from Envato Elements for a single, low price. Plus, you can see modern resume styles for one-off use on GraphicRiver. Grab your template and update your resume today.

Editorial Note: This post has been updated with contributions from Maria Villanueva, Andrew Childress, and Nathan Umoh. Andrew is a freelance instructor for Envato Tuts+. Maria and Nathan are staff writers with Envato Tuts+.

25+ Best Free Architecture PowerPoint & Background PPT Templates for 2021

Posted: 26 Jun 2021 05:55 AM PDT

Are you pitching for an architecture or construction project? Or are you a student with an upcoming architectural project presentation? If you need an architecture PowerPoint template, you've come to the right place.

Arno - Architectural PowerPoint TemplateArno - Architectural PowerPoint TemplateArno - Architectural PowerPoint Template
Arno - Architectural PowerPoint Template, a premium template on Envato Elements

You'd want a presentation that represents your or your business well. One that reflects well on your professionalism, creativity, and uniqueness. By leaving the design to the experts, you can create an impressive presentation with minimal effort and skills. All you need is an excellent pre-built architectural PPT template. 

This article lists over 25 free architecture background PowerPoint templates found online. We'll also explore premium architectural PPT templates from Envato Elements and GraphicRiver architecture PPT templates. You'll have plenty of options to look through before you make your final decision. 

The Best Premium Architecture PowerPoint Templates on Envato Elements for 2021 (Unlimited Use)

Start your search for professionally designed architectural PowerPoint presentations with Envato Elements. Unlock unlimited downloads of various creative digital assets such as audio, videos, photos, and PPT templates. All this for an affordable monthly fee. 

Download as many premium templates as you need as often as you need themDownload as many premium templates as you need as often as you need themDownload as many premium templates as you need as often as you need them
Download as many premium templates as you need as often as you need them.

Invest in your business with a subscription from Envato Elements. Once you gain access to these creative assets, you can create unique and impressive materials for your brand. Take your marketing, business development, and other projects to new heights, hassle-free. 

Find loads of premium architecture PPT templates on Envato ElementsFind loads of premium architecture PPT templates on Envato ElementsFind loads of premium architecture PPT templates on Envato Elements
Find loads of premium architecture PPT templates on Envato Elements.

The free templates that you find online do have their downfalls. They often have limited slides and are not unique. These shortfalls can become risks that hurt your brand.  

Would you like to test out premium templates without a monthly subscription fee? Check out GraphicRiver. Pick and buy a premium architecture PPT template one-at-a-time. We'll explore this option in the following section. 

5 Best Premium Architecture PowerPoint Templates for 2021 (Envato Elements & GraphicRiver)

Professional architectural PowerPoint templates look modern. They come with enough features for you to create the best possible presentation. There are loads of premium architecture background PowerPoint templates to help you create an impressive presentation in 2021. 

Let's dive in and explore a few premium architectural PPT templates from Elements and GraphicRiver:

1. HOMERHOUSE - Architecture Background PowerPoint

HOMERHOUSE - Architecture Background PowerPointHOMERHOUSE - Architecture Background PowerPointHOMERHOUSE - Architecture Background PowerPoint

Homerhouse is a multipurpose architecture template that comes with 30 slides. It's designed to help guide your audience's eyes to important parts. This templates sections are all laid out to help you make an excellent pitch presentation. 

2. Era - Architecture PPT Template

Era - Architecture PPT TemplateEra - Architecture PPT TemplateEra - Architecture PPT Template

Era is perfect for building or architecture projects but is quite versatile enough to be used for other corporate projects. This template is clean, minimalistic, modern, and professional. It comes with 40 unique slides that are fully customizable and helps you create the best possible presentation.

3. Building PowerPoint Presentation

Building PowerPoint PresentationBuilding PowerPoint PresentationBuilding PowerPoint Presentation

Use the Building PowerPoint Presentation template for construction, renovation, and other building-related projects. It comes with 50 unique slides and has a light and dark version. This template is fully editable and comes with vector icons, elements, and maps. When you create a presentation with this template, you'll be representing your business in style.  

4. Prohomes - Property & Real Estate PowerPoint Template

Prohomes - Property Real Estate PowerPoint TemplateProhomes - Property Real Estate PowerPoint TemplateProhomes - Property Real Estate PowerPoint Template

Prohomes comes with 45 sleek looking slides. This template is perfect for anyone in the real estate, architecture, or property development industries. Prohomes helps you make a business portfolio and pitch to new clients like a pro. 

5. Architecture PPT Template 

Architecture PPT Template Architecture PPT Template Architecture PPT Template

This ultra-modern template comes with thirty six beautifully crafted slides. It'll help you stand out from the competition. You're sure to create the best possible first impression with this template. Create your next professional presentation without having to spend time on the design. It's time to work smart!

25 Top Free Architecture PowerPoint Templates & PPT Backgrounds to Download for 2021

Envato has free offerings for those who want to test out premium files. Before we explore free architecture PowerPoint templates online, let's have a look at this month's free offering by Envato.

Envato Elements Free FilesEnvato Elements Free FilesEnvato Elements Free Files
Each month Envato Elements offers a different selection of free files for you to try. You can also find free files each month in Envato Market. 

Here's the offer:

  • Envato Elements provides 12 different files every month. They're like plugins, themes, videos, music, photos, and more. Download this month's premium free files by creating a free account. 
  • Envato Market provides seven freebies every month. Sign in to get this month's premium freebie from all seven creative sections within Envato Market. 

Can't find an architectural PowerPoint presentation template among this month's premium freebies and can't afford a low-cost premium template? Free architecture PowerPoint templates found online may be your only option. 

Let's look at 20+ free architecture PowerPoint templates from around the web:

1. Free Architecture Background Images for PowerPoint Presentations features an image of tall buildings in black and white. 

2. Free Presentation - Architecture Portfolio PowerPoint Template comes with an image of a building and is in grey-tones. 

3. Urban - Free Architecture Background PowerPoint. This template comes with four slides. It uses a blueish structure as the main image. 

Urban - Free Architecture Background PowerPointUrban - Free Architecture Background PowerPointUrban - Free Architecture Background PowerPoint

4. Free Architecture Concept PowerPoint Template has a geometric sketch of a house. The colors used are light grey, dark grey, and yellow.

5. Free Dark Architecture PowerPoint Template. As the name suggests, this is a dark template. It uses grey tones.  

6. Tower - Free Architecture Background Images for PowerPoint Presentations uses an illustration of a tower at night. 

7. Free Buildings and Sky PowerPoint Template is a bold and colorful illustration of a skyline. 

8. Berlin - Free Best PowerPoint Templates for Architectural Presentations is a simple template with the blue skyline of Berlin. 

Berlin - Free Best PowerPoint Templates for Architectural PresentationsBerlin - Free Best PowerPoint Templates for Architectural PresentationsBerlin - Free Best PowerPoint Templates for Architectural Presentations

9. Free Big City PowerPoint Template uses an illustration with skyscrapers. The primary color used is blue. 

10. Free Big City Night PowerPoint Template. The illustration here is of the sun setting in a city with a purple sky. 

11. Green City - Free Architecture PowerPoint Template. This template comes with an illustration of a green city skyline from the future. 

12. Historical - Free Architecture Background Images for PowerPoint Presentation. This template comes with images of famous old architecture from around the world. 

13. Salisbury - Free Architecture Portfolio PowerPoint Template is a simple template. It uses photos of urban buildings as the background image.

Salisbury - Free Architecture Portfolio PowerPoint TemplateSalisbury - Free Architecture Portfolio PowerPoint TemplateSalisbury - Free Architecture Portfolio PowerPoint Template

14. Verges - Free Architectural PowerPoint Presentation Template comes with a few slides of a city skyline. The template has a few bold colors as its slide background. 

15. Elementum - Free Best PowerPoint Templates for Architectural Presentations uses yellow, black, and white. This creates a good contrast. 

16. Free Architecture Home-Real Estate PPT Templates comes with a master background and an internal slide. The main image is of a huge house.

17. City Building Scenery Real Estate - Free PowerPoint Template comes with thirty three slides and uses blue as the primary color. 

18. City Building Skyline - Free PowerPoint Templates has a colorful building silhouette design on a gray background. It uses light green as the primary color. 

City Building Skyline - Free PowerPoint TemplatesCity Building Skyline - Free PowerPoint TemplatesCity Building Skyline - Free PowerPoint Templates

19. House Renovation - Free PowerPoint Templates features 48 colorful slides. The paint roller is the main element in every other slide. 

20. Statue of Liberty New York Skyline - Free PowerPoint Template uses iconic American architecture for a travel presentation.

21. Bond Free Template comes with a pencil drawing of famous city skylines. The font looks like handwriting.  

22. Free Architecture Portfolio PowerPoint Template uses a geometric approach. It comes in yellow, black, and white.

23. Architecture Studio - Free Architecture Background Images for PowerPoint Presentations comes in shades of brown. It's a template that gives out a calm and grounded feel.

Architecture Studio - Free Architecture Background Images for PowerPoint PresentationsArchitecture Studio - Free Architecture Background Images for PowerPoint PresentationsArchitecture Studio - Free Architecture Background Images for PowerPoint Presentations

24. Free Smart City Company Meeting uses isometric designs and dark slides with contrasting green graphics and fonts. 

25. Blue Business - Free Architecture Portfolio PowerPoint Template is a clean and simple template in blue shades. 

How to Make a Professional Looking PowerPoint Presentation

Once you've downloaded your premium architecture PowerPoint template, it's time to customize it to fit your brand. In this next section, we'll go over five quick and easy steps for you to follow for how to customize your template. 

For this example, we'll be using the premium template, ARCHITECTURE - PowerPoint V410

Architect premium templateArchitect premium templateArchitect premium template
A premium template to use as an architecture presentation template.

The template features one hundred and fifty slides, five color schemes, and a unique layout. Let's get started:

1. Choose the Slides

Before you begin customizing each slide, go through our template and find the slides that you want to use. Our premium template comes with many different unique a professional slides, but not all fit your presentation.

To delete certain slides, right click on them from the left hand slide menu. Choose the Delete option.

Choose SlidesChoose SlidesChoose Slides

2. Change the Color Scheme

The first customization you'll want to make is the color scheme of the template.

We're going to change the color scheme to fit our brand's colors. To do this, go to the top menu header and choose the Design option. From there choose from all the preset colors there by clicking each of the themes. 

Color SchemeColor SchemeColor Scheme

3. Replace Text

The next step is to add in your content to each slide. All the slides in our template have dummy text that you can replace.

To replace the text double click it and copy and paste in your presentation's text. Keep the document with all the presentation text handy when completing this step.

Add TextAdd TextAdd Text

4. Add Images

Next, add in your presentation images to bring the slides to life. Our premium template has image placeholders that are already set on each slide.

To add in an image, click on the image placeholder icon. This opens up your computer files where you can choose the images to add from your computer. 

Add ImagesAdd ImagesAdd Images

5. Add Transitions

Transitions give your presentations that professional polish.

To add transitions to your slides, click on the Transitions tab. This opens up all the available transitions for each slide. Choose the desired transition for each slide. To preview what each transition looks like, click on the Preview button on the far left of the menu.

Add TransitionsAdd TransitionsAdd Transitions

Now let's look at a five quick design tips for you architecture presentations. 

5 Quick Tips to Design Better Architecture Presentations in 2021

Here are some design tips to help you create the best possible architecture presentation:

1. Pick Premium Over Free

A premium PPT template includes loads of useful features like icons, infographics, and animation. Some templates have all the sections laid out as well. This makes it easy for people who are new to creating presentations.

Rakennus - Architectural PPT Template a premium template on Envato ElementsRakennus - Architectural PPT Template a premium template on Envato ElementsRakennus - Architectural PPT Template a premium template on Envato Elements
Rakennus - Architectural PPT Template, a premium template on Envato Elements

The best part of premium templates is that all design elements are taken care of by the experts. All you've got to do is add your content. Create an impressive and professional presentation with minimal effort. 

2. Tell Visual Stories

A wordy presentation can get long and dull really quickly. A dull presentation reflects poorly on you and your company. 

To avoid this, presenters try to turn their presentation into an enjoyable visual story. There are a few ways to do this. This tutorial takes you through the how-tos: 

3. Use High-Resolution Images

If you need to include your images of your architectural work, team members, or plan drawings, make sure the photos are in high resolution. Pictures are a big part of any presentation. It helps draw attention and send a message. 

Not sure how to work with images for your presentation? Check out this tutorial:

4. Cut Distractions 

Building PowerPoint Presentation a clean and well designed template on Envato ElementsBuilding PowerPoint Presentation a clean and well designed template on Envato ElementsBuilding PowerPoint Presentation a clean and well designed template on Envato Elements
Building PowerPoint Presentation, a clean and well-designed premium template on Envato Elements

The ultimate goal of any presentation is to effectively pass information along to your audience. To do this, keep focus throughout the entire presentation. Identify possible distractions and avoid them. Distracting elements can be anything like these:

  • cluttered or busy slides
  • poorly designed or outdated slides
  • too much audio or video
  • bad alignments
  • too much text or difficult words
  • too much flashy animations or transitions

5. Keep Up With the Latest Trends

If you're not a graphic designer, chances are you don't keep up with the latest design trends for 2021. You may have a standard style that you stick to for every presentation. Or you may not be able to tell the difference between a dated presentation or a modern one. Check out this tutorial to get a good idea of the latest presentation design trends:

Discover More Top Microsoft PowerPoint Template Designs for 2021

Haven't found what you are looking for? Browse through other free business templates for 2021. Here are three selections to start with:

Top Design Trends for Architecture PowerPoint Templates in 2021

It's important to stay on top of the current design trends for your architecture PowerPoint presentations. This shows that you're in tune with what's happening in the industry.

Below is a list of the top five design trends that you can use for your own presentations:

1. Feature Your Images

Architecture PowerPoints place a heavy emphasis on the images in the slides. Images for architecture PowerPoints take up much more room than images in most other presentations.

Feature ImagesFeature ImagesFeature Images
This premium template leaves plenty of room to feature images.

For each slide that has an image, increase the size of the image so it takes center stage. This allows you to really highlight all the various designs and past projects that you and your company have worked on.

2. Keep the Design Spacious

To create a more modern look to your presentation, leave plenty of room around the elements on your slides. Including enough white space around each element helps highlight your elements. It'll give your presentation that professional polish. 

3. Use Images as a Background Layer

Another way you can feature your images on your architecture PowerPoint templates is to have them set as a background. Doing this brings your slide to life and helps you deliver a more interesting presentation. 

Background LayerBackground LayerBackground Layer
This premium template uses images as the background for a few of its slides.

4. Use Three Different Font Sizes

Having three different font sizes on your slide helps create a more three dimensional look to your presentation. At a minimum use two font sizes: one for the title and one for the body text. Adding in a third font size for other subheadings, titles, or image text works best here. 

5. Use a Highlight Color

Using a highlight color in your slides designs helps create a more uniform look to your presentation. Using different shades of the highlight color can add more interest to the presentation. Try adding a highlight color to these areas:

  • highlight color graphs
  • design shapes
  • borders
  • icons
  • other elements on your slides
Highlight ColorHighlight ColorHighlight Color
This premium template features a main highlight color on all of its slides.
Now let's look at some PowerPoint tutorials for 2021.
 
Learn More About Making Great PowerPoint Presentations in 2021

Are you new to PowerPoint creation or are you looking for architectural presentation layout tips? Add our How to Use PowerPoint (Ultimate Tutorial Guide) to your browser favorite. Whenever you get stuck at something or see room for improvements, this guide comes in handy. Pick a tutorial and learn more about it. 

Here are three examples of helpful PowerPoint how-tos:

Grab a Premium Architecture PowerPoint Templates Today!

Create your next presentation slides like a pro. Start by browsing through premium architectural PowerPoint presentation templates on Envato Elements. With a subscription you get unlimited access to all the digital assets. This includes all the PowerPoint templates. 

Want to go premium without a monthly subscription? With GraphicRiver, pick and download a template with a convenient pay-per-download model. Check out the vast selection of premium pre-built architectural PowerPoint presentation templates to get started.

Is going premium out of the question for you? It's still a good idea to use a pre-built template, so you don't have to start from scratch. Try out any of the free architecture PowerPoint templates found in this article. 

Select a premium architecture PowerPoint template and start creating your presentation. Download one now! 

Editorial Note: This post has been updated with contributions from Daniel Strongin. Daniel is a freelance instructor for Envato Tuts+.

Post a Comment

0 Comments