Loading...

Follow Design Shack | Graphics on Feedspot

Continue with Google
Continue with Facebook
or

Valid

A few years ago, there was a debate stirring on the web about black. Ian Storm Taylor’s “Never Use Black” was shared and tweeted and read by designers all over the world.

You can debate whether you should use black or not all day long. But the reality is that you will use black. Every designer does – by choosing or not.

So it’s best to understand the color and how to use it properly in a variety of design projects.

CMYK vs. RGB

The definition of black has a lot to do with how you are publishing – in print or online.

Print publication uses a four-plate scheme to create colors on the page. This process layers four inks – cyan, magenta, yellow and black – to create every color combination, giving each hue a specific CMYK color value. This even applies to different shades of black.

Online, color is made from combining red, green and blue. Both RGB and HEX values are based on these three colors, which are used as the standard for how digital screens (from televisions to computers) display color.

Pure Black vs. Black

Black is more than just a color. There are numerous variations of black in both print and web publishing. So when is black just black?

Pure black refers to the absence of color in black. In CMYK printing, only the K plate would be used. In RGB publication, zero values for each color would apply.

All other blacks have some color in them, whether it is a combination of all colors or just a hint of a single color for a certain tone. This addition of color can create a much richer hue. But it can also cause concerns for some CMYK printers.

Most people, when looking at a grouping of black items, will feel more visually attached to blacks with some color added. These blacks are deeper, brighter and more saturated than pure black.

Black in Print

So how do you know what black to use in print projects?

It all depends on what you are trying to accomplish, how your project will be printed and what it will be printed on.

Don’t try to change blacks in images or photographs. You will end up with a mess. Think about the color mix of black when creating elements anew – text, backgrounds, etc. You may also think about the color of black when printing black and white images. Should the image be converted to grayscale or use a four-color rich black to create all of the black tones?

Print jobs that use heavy stock paper will give you much more leeway in selecting a four-color black. The ink will be less likely to over saturate the paper and printing is typically precise. Printing on thinner papers (think magazines and newsprint) often works best with pure black.

5 Tips for Using Black in Print
  1. Use pure black when setting type so that you do not have concerns about registration.
  2. For backgrounds or large areas of black (even text), opt for rich black to add dimension to the color.
  3. Know your printer. Use the type of black that yields the best, sharpest and cleanest print job each time.
  4. Avoid using registration (100 percent of all four colors) for general printing. The ink saturation will be too high. Watch this percentage even more when printing on newsprint. Anything more than 220 to 240 percent (get this number by adding each of the four color values) can cause ink to over saturate the often-thin paper.
  5. Set a color mix for rich black and set it in the swatches of your computer software so that you can consistently use a mix that looks great and prints well.
Black on the Web

Because you don’t have to print it, your eye is the best judge of what kind of black to use in digital publication.

Avoid slight variances in blacks across the project. Pick a color value and stick to it.

The big difference in black in print and online is that blacks in print actually use a black plate for printing. No actual black is mixed into your color choice using RGB values, so even the most pure black is made from color. You will not get the “flatness” that pure black printing can have.

Standard black is a great starting point. But then really think about what the color says for your project and think about other variations – changes in saturation or the addition of other hues to create even more depth.

Avoid slight variances in blacks across the project. Pick a color value and stick to it. Small changes in blacks will not register on the screen to the naked eye. Choose a color value that is representative of your project and use it throughout.

6 Tips for Using Black Online
  1. Think about use of black and add a little color to make the tone match your project – warm or cool.
  2. Play with saturation values. Sometimes the best blacks online are actually gray depending on screen contrast and backlighting.
  3. When creating in black, use different shades to create dimension and visual interest.
  4. Black can absorb some of the color around it. Keep in mind how black with pair with other colors.
  5. Be wary of small white text on an expansive flat black background. For some people, it can be especially difficult to read.
  6. Remember that RGB devices can display RGB values differently. So your black may look slightly different from one screen to another.
Color Mixes

You can adjust the type of black easily in publishing software such as Adobe InDesign or Photoshop. Just enter the proper CMYK or RGB values into the swatches palette and you have the black of your choosing.

CMYK

Pure or flat black: 0C 0M 0Y 100K

  • Rich black: 63C 52M 51Y 100K
  • Cool black (bluish tone): 60C 0M 0Y 100K
  • Warm black (reddish tone): 0C 60M 30Y 100K
  • Registration: 100C 100M 100Y 100K
  • Designer black: 70C 50M 30Y 100K
RGB
  • Standard black: 0, 0, 0 or HEX #000000
Conclusion

Using black is a common part of every designer’s repertoire. It has many uses and understanding how to create different shades of black can add dimension and flair to your work, from projects that have dark themes to setting readable type.

When working with black, explore ways to add life to the color. But use it wisely. Sometimes the best choice is to just use black.

Image Sources: David Gunter, mant, karen horton and GorillaSushi.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

You can create a more engaging presentation by inserting a YouTube video in your PowerPoint slides. Today, we’re going to walk you through the whole process of how to embed a YouTube video in PowerPoint.

While this task used to be rather cumbersome and clunky with older versions of the standard software, Microsoft Office 365 and PowerPoint 2019 make embedding videos a lot more manageable.

Here’s how you do it step-by-step for a great presentation that includes video. Now, the only hard part will be picking what video clip you want to use!

Pick Out a Video


If you want to embed a YouTube video in PowerPoint, it’s best to have the video handy before you get started. Pull that video up in a browser window so that the URL and video information is readily available.

Note that if you plan to play the video during a presentation, you will need an internet connection to stream the video from YouTube into the PowerPoint. Adding a link and embedding a YouTube video in a slide does require a connection to play successfully.

If you have doubts about the available internet connection during your presentation, consider using an alternative way to embed a video, such as using a video file that’s saved directly to your computer or using a static image instead.

Open PowerPoint and Pick a Slide

Once you know what video you plan to use, open the PowerPoint presentation you want to insert the video in. Make sure to select the slide you want to use as well.

Go back to the YouTube video in your browser and copy the URL.

Come back to PowerPoint and navigate to the Insert tab > Media > Video > Online Video.

A new window will open. Paste the URL in the box and click insert.

After a couple of seconds, the video will appear in the center of the slide. The time it takes for this “download” varies depending on the size of the video.

Position the Video on the Slide

Position the YouTube video on the PowerPoint slide by dragging and dropping it to the location you desire. You can also change the size using the handles on the corners of the video frame.

Add other elements to the slide here as well, such as a text description for the video.

Play the Video

Play the video to make sure it works. Click the big play icon in the center of the video to test it.

The video should play from the beginning, just as it would on YouTube. Audio will play if you have speakers; otherwise, you will see the video but will not hear the sound.

You can play the video in Normal view or in Slide Show mode.

When using Slide Show mode, YouTube videos play in click sequence by default. This means that once you get to the slide where the video is located, the next click to advance will play the video. This works using a tap of the spacebar or when you use a clicker to advance slides. You don’t have to directly click the play button.

Remember, to play back a YouTube video during a PowerPoint presentation, you must have a connection to the internet. If your video does not work, check your connection.

Don’t forget to take a look at our full PowerPoint templates guide, or our collection of the best PowerPoint templates for your next project!

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

With so many logo design concepts, trends, and examples out there, how do you sort through all the clutter to create a logo that has a purpose for our brand or company?

It’s not always an easy task. The best and most memorable logos are not just designed well, they have purposeful meaning that creates a connection between the mark and organization it represents.

This can happen quickly with a brand that grows in popularity fast or steadily over time as a mark is established.

Here are some things to think about as you tackle creating (or recreating) a logo so that it has a purpose.

1. A Logo Should be Identifiable

When planning what your logo mark or brand, think about the user first. Approach it like you would a UX problem.

A logo design should be identifiable in a way that connects the symbol to the company or brand. You don’t need to see the word Nike to know the swoosh or Airbnb to understand the looping A. Think of the universal icon for recycling, above. You’d know that mark anywhere and know exactly what it means.

The key component of identification is with your target audience.

Think of a brand you interact with all the time. You can probably spot the logo quickly, knowing just what it means. But that might not be as universally true as a big brand. Regardless, it is equally effective. The logo is identifiable to the audience it serves.

2. It Should be Modern but Not Too Trendy

To connect with audiences, a logo design should have a modern look and feel, but shouldn’t be overly trendy. That’s mostly to protect the mark.

A trendy logo will force you to redesign frequently if trends change so that design isn’t dated. How will you establish a purposeful and memorable brand design if it is constantly changing?

The Spotify logo, above, is a good example because it has a flat style and bright color – both trending design elements – but the mark isn’t too trendy. The circle is something that seems like it can hold up over time if trends change.

3. A Logo Should Tell Me How to Feel

Do you identify with the logo? You might even have a sticker with the logo on a water bottle or phone case.

The connection or community feel, tie people to a brand emotionally. It can be through color or imagery. (Think of the smile below the word Amazon. It’s all about creating the right emotion. Shopping makes you happy.)

4. It Should Connect to Your Business/Brand/Organization

Does your logo say anything about your brand or business? Does the imagery connect to what you do?

Even something as simple as including green for a nature-friendly brand or using a funky font for something new and innovative can help establish the purpose of your company. People pick up on dozens of visual cues and these little things can communicate a great deal.

Just be careful not to overdo it. You don’t have to create a full mural describing your business for a logo. Subtle cues can be much more effective.

5. A Logo Should be Simple

A logo design should be simple. Just think of how much quicker the mark will be identified, connecting your brand to its overall mission and purpose by users.

A simple logo can stand out in a crowded world of visuals.

A complex logo can be a challenge to read and understand, which can get in the way of what you want people to see and take away from your mark.

A simple logo can stand out in a crowded world of visuals. Plenty of space, a simple color, and interesting overall aesthetic can go a long way to pulling attention toward your image, rather than away from it.

(RED) has a simple design that has become synonymous with AIDS research. This simple design includes a simple word and a single color. Note that a simple logo can be text- or image-based.

6. It Should Create an Impression

A logo with purpose creates an impression. (Ideally, it will be a positive impression.)

The impression will last from the first time someone sees your logo – did they engage or ignore? – and can influence the relationship they establish with your brand.

Even though you’re not supposed to judge a book by its cover, think about how often that happens. You buy a product or investigate a company because something about the way it looks appeals to you. The impression likely started with a logo.

Think about the strength that the Stand Up to Cancer logo, above, showcases. That’s a distinct impression that’s created from color, type style, and even the directional arrows.

7. A Logo Must be Flexible

With so many needs and uses for a logo today – print, online, static, dynamic, varying shapes – the design needs to be flexible enough to show the brand in different ways.

The applies to the shape of the logo as well as color and ability to adjust for specific situations. Can your logo serve multiple purposes? Will users still know you and your brand if you make these adjustments?

That’s creating flexibility in the logo and branding.

Note how the Windows logo, above, has evolved over the years. The design provides just enough flexibility that changes to the color or structure of the shapes doesn’t make it unrecognizable.

8. It Should Show What You Stand For

While the main purpose of a logo itself is to identify and establish your brand, it can also represent what you care about. A purposeful logo also communicates what you stand for.

This can be a tall order for a mark that supposed to be simple and memorable and timeless and flexible…

But it’s doable.

For Pride Month, Tumblr adjusted its logo, above. It’s an obvious representation of brand values and meaning. But there’s no mistaking that the logo is still for Tumblr. The design checks all the boxes and shows purpose.

Conclusion

To create a logo design with purpose, start with what you want people to know about your brand or business. Then incorporate all the tenants of good visual design to get there.

A logo or brand probably won’t explode overnight, but if you are connecting with the right people and the visual message resonates with them, you are doing something right.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Shadows in CSS are quick and easy, whether you’re slapping on a box-shadow or a text-shadow. But how comfortable are you with inner shadows? Can you pull off an inset box-shadow? How do you do the same thing on some text?

Today we’re going to learn some really simple inset shadow techniques that you can pull off with just a few lines of code. I’ll walk you through both the box-shadow and text-shadow syntax and how to change them to pull off an inset shadows.

Shadow Syntax

Before we jump into inset shadows, let’s look at the basic syntax for building the two different types of CSS shadows. Even if you’ve coded these before, it’s worth a quick review just so we’re all on the same page.

Box-Shadow

Box-shadows are probably the most common type of CSS shadows. The potential uses here are incredibly diverse and developers have come up with all kinds of crazy awesome applications. The box-shadow syntax is actually fairly complex and includes six separate values. We’ll start off by taking a look at five of the most common of these.

As you can see, listed above in order, the order of values is horizontal offset, vertical offset, blur radius, spread radius and color. The first two values, horizontal and vertical offset, are fairly straightforward. Positive values will push the shadow right and downward respectively and negative values will push the shadow left and upwards. Here’s an example of both:

The latter two values, blur radius and spread radius are a bit more complicated. The biggest question that you might have is, what’s the difference? To answer this, let’s first look at the one that you’re probably the most familiar with: blur radius.

As you can see, no blur radius produces a shadow with a hard edge and a high blur radius produces a blurry edge. Pretty simple right? So what about the spread radius then? How does that differ? A picture is worth a thousand words so here’s an example:

As you can see, without affecting how blurry the shadow is, the spread of the shadow essentially grows and shrinks the surface area occupied by the shadow. If you thought of it as the size of the shadow, you wouldn’t be too far off.

If you leave off either the blur or spread radius, their values will default to zero. Looking around the web, you’re likely to see that most demos that you come across, including those on Design Shack, have no spread radius defined.

Text Shadow

Now that we have a solid understanding of how the box-shadow syntax works, we can take a look at the syntax for the other type of CSS shadow: the text-shadow. Fortunately, this syntax is even simpler than that for box-shadow.

As you can see, most of the values are the same here, so if you understand one, you understand the other. Interestingly enough though, you don’t have access to a shadow’s spread with text-shadow. It would be great if you did, but unfortunately the feature simply isn’t there.

Inset Box-Shadows

All righty, now that we’ve laid a basic foundation and you completely understand CSS shadow syntax, it’s time to jump into creating “inner” or “inset” shadows. To shift a shadow to an inset shadow, all we really need to do is add a single word, “inset.”

This is why we started with the basic syntax. As a whole, the box-shadow chunk of code can look pretty intimidating, but if you break it down as we have done, it’s actually really simple.

All of the values here essentially perform the same way, only the shadow is placed inside of the box. Here we can see how the spread of a shadow can still have a big impact on how the shadow looks:

Notice that this time I actually used RGBa color instead of a hex value. This is great for shadows because the alpha value provides a quick and easy way to lighten or darken the shadow.

With Images

It’s easy enough to throw a box-shadow onto an empty div, but what if you want to place one on an image. It sounds simple, but the reality is a little tricky. Let’s look at some code and its ultimate effect. We’ll begin with an plain old image tag.

<img src="http://lorempixum.com/800/400/transport/2" alt="airplane">

Now we’ll target this in our CSS and add an inset box-shadow. You’d think that something like this would work:

img { 
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}

Unfortunately, this gives us the following result. The picture is working fine, but the shadow isn’t visible!

So how do we pull off an inner shadow on an image? There are quite a few different ways to do it, all of which have their pros and cons. Let’s take a look at two popular solutions.

The first solution is to wrap the image in a div that’s constrained to the same size as the image, then set the shadow to that div while using some relative positioning and z-index voodoo on the image itself. Here’s what that looks like in code:

<div>
  <img src="http://lorempixum.com/800/400/transport/2" alt="airplane">
</div>

div {
  height: 200px;
  width: 400px;
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
}

img { 
  height: 200px;
  width: 400px;
  position: relative;
  z-index: -2;
}

This solution is workable, but it involves a little extra markup and quite a bit of extra CSS. As an alternative, you could simply drop the HTML image and insert a background image via CSS. Using this method, the image doesn’t cover up the shadow but instead is placed under it by default.

<div>
  <!-- just an empty div -->
</div>

div {
  height: 200px;
  width: 400px;
  background: url(http://lorempixum.com/400/200/transport/2);
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
}

If we combine these techniques with a heavy spread, we can achieve a pretty dramatic image vignette effect using only CSS.

Inset Text-Shadows

Even at their most complex, inset box-shadows are pretty easy to wrap your mind around. Toss in the word “inset” and your drop shadow becomes an inner shadow. Super simple.

Unfortunately, text-shadow gives us a lot more trouble here. The “inset” value isn’t compatible with text-shadow so something like this simply won’t work:

Instead, we have to hack it together. How it works is pretty bizarre so we’ll build it in two steps so that you can see what’s happening. First, we’re going to type out an h1 and apply the following styles:

h1 {
  background-color: #565656;
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
}

Already we’re in some weird territory. We’ve set a dark background color, a white text-shadow and a fill color of transparent. If you think that’s weird, check out the result:

This isn’t what we want at all! Interestingly enough, we’re off to the perfect start. The secret ingredient to make everything work is the “background-clip” property with the value set to “text.”

h1 {
  background-color: #565656;
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}

By setting the background-clip property to text, we can effectively clip anything going on in the background (images, gradients, colors, etc.) to the bounds of the text. When we do that with the code that we already had set up, this is the result:

As you can see, we’ve pulled off a really nice letterpress effect. That blurry edge is being cropped and now creates the illusion of an inset shadow. Meanwhile, the white text-shadow is providing us with the degree of lightness for the background fill and a little bevel effect outside the text. If we bump that shadow from 0.5 to 03., the text gets darker.

Conclusion

There you have it, just about everything you could want to know regarding how to apply inset shadows with CSS. It’s an interesting area to explore. The techniques aren’t very intuitive and take some fiddling to master, but if you start with the code above you’ll be a pro in no time.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

One of the most important locations on your website is the footer. Yes, seriously. It may not be the area of the greatest design or most impressive content but it is a place where users frequently look for information. So it is vitally important that you don’t neglect this area when planning a web design project.

But what elements should you include? How can you keep the footer organized and in line with your overall aesthetic without being obtrusive? You’ve come to the right place. Here we’ll look at tips for creating a great footer with examples of some websites that are doing it well.

1. Keep the Design Simple

Yes, this is one of the keys to most design projects, but it is worth stating right off the bat. Simple design is important when working with a lot of information, which will likely be the case for a footer. Stick to clean elements, plenty of space and organize with purpose. Try to avoid clutter and think about what elements will live in your footer and why they should be there. Footer size is often related to the amount of information and number of pages on your website.

Agra-Culture uses color, icons and text in the footer but it is simple and has great flow. Every link is easy to click and the subtle detail with the farm image in the green box is a nice touch.

2. Link to Your Information

Two of the most important links in any website footer go to the “About Us” and “Contact Us” pages. Users will want to know who you are and what your company or brand is about. Make it easy to find that information. Many will also want to know about your team members and how to reach them. (This is a vital tool. Many people lose business cards and will return to your website to retrieve that contact information.)

Heckford includes plenty of links to the company, social media and information about their work.

3. Include Basic Contact Information

While you should link to a full “Contact Us” page, including relevant contact information in the footer is nice as well. Include a main phone number, email address and physical address. (Bonus points for setting each element up so that it auto dials, emails or maps when clicked.)

The Root Studio created a footer that almost goes against everything you imagine when you think “footer,” but it works. The text is large (as well as the box that contains it) and it is boiled down to a super simple list of contact information. (This is a n impactful design concept for a website that wants users to contact them for projects and work.)

4. Organize Footer Links

Grouping like footer items can create a nice sense of organization for links and information. Consider several columns (or rows) of relevant information such as contact, links, services, social media and sections from your most popular pages. Place each section under and header so that every element is easy to see and find.

SugarSync includes multiple columns of information for easy access to footer information. With “Product,” “Company,” Learn More” and “Connect with Us” headers, it is easy to find the part of the site you want to use next.

5. Include a Copyright Notice

This tiny line of text can be a lifesaver. Don’t forget it. While most sites include it as a single line across the bottom of the screen, you can design it to be more integrated into the rest of the footer. A copyright notice can be written or include the small, circular “c” symbol. The text often includes the year of publication and name of the copyright owner. Multiple copyright notices can account for content and design (for sites that are partially created by a third party.)

Adventure.com keeps it simple with a copyright notice at the bottom right of the screen. The information features low-contrast type so that it does not get in the way of more important footer navigation elements.

6. Include a Call to Action

Once users have navigated to your footer, give them something to do while they are there. Include a box to sign up for an e-newsletter or invite them to follow you on a social media channel. Don’t forget the value of this space in terms of converting clicks.

Collabogive dedicated a significant amount of footer space to “Join Our Newsletter.” This call to action is easy to see, fits the design and gives users a way to interact without necessarily joining a campaign.

7. Use Graphic Elements

Too often footers are just a block of type. Add logos or graphic elements for added visual interest. Just be careful not to overload this small space with too many elements. Think of it like this: Rather than spelling out “Follow me on Facebook/Twitter/whatever,” include icons for these outlets. You could also use small iconic elements for links such as maps or phone numbers (but you should probably include a hover state that has the information “spelled out” as well).

The Kikk Festival uses footer space to highlight festival partners using just logos and quick contact information. Note the size of icons – every one is easy to see and read – and use of a slider so that a large number of elements can be displayed in a small space.

8. Be Aware of Contrast and Readability

Footer information is typically small … very small. This makes thinking about color, weight and contrast between the text elements and background vital. Every word should be readable. Consider simple typefaces (sans serifs with medium weights are nice) and a touch more leading than you might typically use. Opt for colors with high contrast, such as a light background with black text or dark background with white text. Avoid using varying colors or ornate typefaces.

P53 uses one of the classic (and most readable) text and background combinations around for footer information – white on black.

9. Maintain Your Design Theme

The website footer should not look like an afterthought. It should match the overall design theme for the site. Colors, styles and graphic elements should mirror the overall tone. Don’t make the common mistake of adding a “box” footer that does not match. Think about this space and how it will be used from the start of a project to avoid getting stuck with a mismatched element late in the design process.

Swiths Interactive Group uses a simple footer that completely integrates with the overall look of the website, which features a person sitting at a desk with items strewn across it. The simple footer shows relevant information and looks like it belongs on the site.

10. Think Small (But Not Too Small)

Footers by nature include a lot of small items. Just be careful not to go too small. Text can be a few points small than the size used for the main body of the website. Icons or images need to be readable at the size you choose. (If you can’t tell what the icon is, it’s probably too small.) Elements must be large enough to easily click or tap. If users can’t access the links because they are too small or too close together, they will not work as intended.

While Curious Space uses a quite non-traditional footer style, you can get a good sense of scale from the type sizes used. Footer text is a bit smaller, thinner and lighter than all of the other copy on the page, but still large enough to read easily.

11. Use Plenty of Space

Because footers typically live in tight locations, space and spacing is important. Leave plenty of room around elements in the footer as well as between lines of text. Adequate spacing will keep the footer area from looking cramped or uninviting. It also goes a long way toward click- or tap-ability. Since many (if not all) of the items in the footer are linked to something else, this is an important aspect of user function. The amount of space you use does not have to perfectly mirror spacing on the rest of the site, although it can. (This is especially true for sites that use tight spacing in the main body of the site for a specific effect or impact.)

Sailing Collective uses plenty of space vertically and horizontally between elements. They are clustered by type and clickable.

12. Be Wary of Too Many Objects

While using graphic elements and headers is a good idea, there is a line between just right and too much. Use these items sparingly and for a very specific purpose. Ask yourself why you are using a header, icon or photo. If the answer is “because it looks good,” reconsider it. Every element should serve a purpose. This will help you design a usable footer that makes good use of the space available.

Less is more as you can see from the footer for Master & Dynamic. Simple icons and text are enough to get you through footer content with ease.

13. Create a Sense of Hierarchy

Just like the rest of the website a footer should be hierarchical in nature. This is a two-fold design. The footer should fall at the bottom of the overall site hierarchy. (That is where it is located after all.) The footer should also contain a hierarchy of elements within its “container.” The most important elements (often contact information, call to action or site map) should be the most prominent. Standard information, such as the copyright notice, is often the smallest in scale.

Griflan Design Inc. tells users what to do in the footer, in order of how they want them done. First, email them; if that does not work, call them; and if neither of those options works, visit the company on social media.

14. Consider a Sub-Footer

Does your footer need a footer? Consider a sub-footer for additional layering. (It’s a very popular practice.) The sub-footer might be a great place to create some additional hierarchy, add dimension to the footer space if it is too dense or just provide a space for fun content. Use this area to highlight accolades or insert a call to action.

The Smart Passive Income Blog does a great job with a multi-level footer. There is a call to action, then site links, then a sub-footer with media mentions in a faded color, followed by site disclaimers and policies. The levels of navigation provide depth in the footer and make it easy to skim and click through.

15. Don’t Underline All Those Links

The biggest footer mistake? Allowing links to have underlines. There are still a large number of websites with underlined links in the footer. This dated technique is not appropriate for a modern site design.

Baxter of California has a footer that is clean and includes a lot of links. It does not look cluttered thanks to simple linking, without all those pesky underlines.

Conclusion

A footer can say a lot about your website. It tells users who you are, what they can do and how to get around your webpage. It also shows subtle things about you as a designer such as attention to detail and ability to work in a small space.

The footer is an important part of the design. Pay attention to it. Make sure to include the right mix of information, design elements and usability to get the most of the lowermost space in every web design project.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

A great website doesn’t have to cost a fortune. You can get a professional-looking design with a few pages – that’s enough to get started – with a small budget. Here’s how.

The good news is that you can create and design a website yourself using a tool such as an online site builder, or work with a professional while maximizing your budget. The key is to be realistic. A website is not free. Even if you do it yourself, you’ll need a domain, hosting, and other tools (many site builders have a monthly fee) depending on how you plan to create the website.

The best practice is to start with a little research, then set a budget. That way you know what you can afford and how to have conversations about planning the website design. Here’s how you do it!

1. Set Goals

What do you want your website to do? Whether you are creating a portfolio or new website for a startup company, knowing what to expect from the website can help you plan and manage it more efficiently.

You’ll probably have a smaller budget for the website design and build if it is solely informational, such as a blog.

Setting goals can also help you plan a potential website return on investment and set a budget for the initial project and managing the website in the long term.

Think of goals like this: You’ll probably have a smaller budget for the website design and build if it is solely informational, such as a blog. But if your website helps sell a product or service, allowing users to sign up for an email list or information, there’s greater potential for return, and maybe gives you more room in your budget.

Finally, if the website will be used for e-commerce, the potential return on investment from your website is any sales from the website. Look at that goal in connection to budget to see what you think you can afford.

Remember a budget is relative to the business or person building a website. Not sure how to plan a budget? We have a guide to what a website costs here.

2. Pick a Foundation

One of the best ways to adhere to a budget long-term is to do some of the work yourself. If you plan to manage content over time, from blogging to adding items to an online store, pick a website foundation that you are comfortable with.

While WordPress is the most commonly used content management system available, you might already have experience with something else and that familiarity can be advantageous.

If you don’t have a preference, do a little homework and look at different website builders and content management systems.

If you don’t have a preference, do a little homework and look at different website builders and content management systems. Do you prefer something that’s visual with a drag and drop interface? Or do you know just enough that you can work in a more traditional CMS environment?

If you picked the website builder option, you can stick to a pretty tight budget by doing it yourself, using tools that come with these builders. (Common website builders include things like Squarespace and Wix.)

At this point, you need to make a decision: Will you build the website yourself or hire someone else? (Subsequent tips apply either way.)

3. Use a Theme or Templates

Regardless of the foundation you choose, there are themes, templates, and plugins to build features and functionality. While you don’t want to go crazy installing too many things at once, picking a solid theme, can provide the basic design elements you want for the website.

When choosing a theme, look for something that appeals to your sense of style and includes features you need. More features aren’t always better if you don’t need them. Make sure to pick a template or theme that’s responsive, so the design and website will work on all device types.

Themes, templates, and plugins are budget-friendly because of time savings. They can jumpstart a design with a ready-made framework and aesthetic that just has to be customized to meet your specific needs.

4. Have Website Content Ready to Go

Do you already know what needs to be on your website? Is the content – text, images, videos, links to email and social media accounts – packaged and ready?

Having all the content for the website ready in one location can save time (and money), speeding up the website build process. One of the first things a website designer will ask for is the content for your design.

If someone else has to create the content for you, it can be more costly and take more time to build the website. Gather everything you want to include and have it ready when the project starts.

5. Cut Out Unnecessary Features

More features and more pages often result in high-priced website design. Why do e-commerce features need to be built in if you aren’t planning to sell anything online?

Cut out unnecessary features. If you think you might want something later, have a conversation with the website design about adding on features at a later time and if your website foundation has the potential for growth. (In most cases, the answer will be yes. This gives you the budget flexibility to grow the website project over time.)

6. Manage Content Yourself

Take the time to learn enough about your website to manage content yourself.

…ask your website designer if they will do some basic training with you.

Yes, it is a good idea to have a website professional manage updates and tweaks to the site itself, but you can probably add your own blog content. You can probably add new items to the online store. You can probably add events or update email addresses.

Having the ability to make these types of small content adjustments can save a lot of time and money in the long run.

If you aren’t certain about your ability to perform these tasks, ask your website designer if they will do some basic training with you. (Expect to pay for it.)

Then you can keep a website professional on hand for things you don’t feel comfortable doing yourself but can manage more mundane content creation work.

7. Have a Go-To Person for Help

Once your website is off the ground, how do you plan to keep it in top working condition? You need a go-to person for help.

This might be the person that built your website with a monthly retainer or pay-as-you-go option. It might be a friend or colleague. It could be someone else you hire altogether.

Regardless of who you choose, it’s important to have a solid relationship with someone who can help you through website issues in a pinch. If you have to cold call someone for help, costs can add up quickly.

Proper maintenance will save time, effort, and money in the long run.

Conclusion

So, what is a realistic website budget? If you think you can get a new site online for less than $1,000, that’s probably quite optimistic. It is possible if you can do it yourself, and much less likely if you need help.

Think about building a website just like you would for any other part of a business. It’s an investment in future growth. It’s your “storefront” to the world, a tool to build credibility and legitimacy, and the first impression someone might have of your brand.

Generally, creating a website is a good investment when you plan it for the scale of your organization or business.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Do you have dreams of ditching your day job and becoming a full-time freelance graphic designer? Start putting your plan in motion.

Most freelancers start with graphic design as a side hustle, but with determination, business planning, and a solid work ethic, you can build as much business as you want to create a sustainable career.

Here are 10 steps to help you get started.

Trust me, I’ve tested them all in my decade as a freelancer!

Step 1: Start Building a Portfolio


A strong portfolio is a must if you plan to bring in clients on your own.

While it can be tempting to dump everything you’ve done recently into a portfolio, be selective. Only include projects and examples that are stellar examples of the kind of freelance work you want to do. (If you plan to focus on print, don’t pack your portfolio with digital projects.)

Use your portfolio as a showpiece to sell your work to potential clients. You’ll quickly find that the type of work you showcase often results in similar inquiries for future projects.

Step 2: Create a Brand
Consider whether you plan to do freelance work under your name or create a business name.

Start building a brand for yourself early.

Buy a domain, create an email address, and establish an online presence as a graphic designer. While you are doing this brand work, consider whether you plan to do freelance work under your name or create a business name. (You might want to do the footwork for both if you are on the fence.)

There are pros and cons to both options – using your name or creating another company name – making it a personal choice of how you want to do business as a freelance graphic designer.

Step 3: Establish Yourself as an Authority

Part of building your brand is to establish yourself as an authority in all things design, with a specific focus on the type of freelance work you want to bring in.

Write guest blog posts on design topics, use social media to highlight work of interest (yours and that of others), and make connections in the industry. Enter contests and engage in professional networks to expand your circle and show off your expertise to others.

Step 4: Network


Put yourself out there. Even if you have a job and are just toying with the idea of going freelance, you need to grow your professional networks. (You will generate a ton of business from these strong connections.)

Think about who your target clients are and network with professionals who work with those clients now. That might include joining local networking groups or professional organizations or spending some time networking at design conferences.

Find a champion or mentor in this space that’s already doing it in the way you envision for yourself. (And when you are in a position to mentor someone else, make sure to jump on the opportunity to give back.)

Step 5: Create a Business Plan and Goals
You need to think about time, taxes, and the balance of revenue and expenses.

So much of becoming a freelance graphic designer isn’t creative at all. It’s laying a solid business foundation to facilitate future success.

If you plan to use freelance work as merely a side gig, a full business plan might not be necessary. But you still need to think about time, taxes, and the balance of revenue and expenses. (The goal is to make money, right?)

If you plan to enter into freelancing as a full-time job, you need a business plan and goals. How much income do you need to make it work? What about costs from healthcare to taxes to software and computers and marketing? What services and contractors do you need (legal, CPA, licenses, and insurance)?

Create measurable goals to help you figure out if your plan is working. And have a fallback plan if the freelance lifestyle ends up not being for you.

Step 6: Start Taking Clients

Start taking freelance clients.

While you are probably ready to jump in, it’s a good idea to start small. The first few clients and projects might take more time or work that you anticipate. From meetings to revisions to figuring out what exactly a client needs, you want to give yourself plenty of time to be successful (and not burn out right away).

Over time, you’ll get an idea of what client time looks like, how long certain projects take, and where you can focus on making the most money and getting creative fulfillment.

Step 7: Diversify Work and Clients


Don’t spend all your freelance time working for one client or on just one type of project. You never know when that business might dry up.

It’s a good idea to create a diverse client base. An ideal mix includes a few regular clients with predictable needs, a couple of big projects that you can complete and move on, and a few new clients or projects. If you can figure out a way to generate some regular income from tools (such as UI kits or reselling hosting to website clients) that’s always a bonus as well.

Step 8: Create a Referral Network
Creating a referral network can work reciprocally when other freelancers refer clients back to you.

There will come a time that every freelancer is maxed out. You just can’t take another project because you are busy or need a little time off. And that’s OK.

Refer clients to other graphic designers that you trust. Creating a referral network that you can send clients to establishes your reputation and can work reciprocally when other freelancers refer clients back to you. Only send clients to other designers that you trust.

Have a conversation with designers that you might send clients to. These might be others that you work with regularly (or even contract work with) or designers from your extended network. Make sure they know you may send work their way. (It’s good for business in the long run.)

Step 9: Evaluate and Specialize (If Necessary)

While it is good to have a mix of clients and projects, some freelancers can benefit from specialization. Do you do something that there’s a strong demand for and not a lot of people to meet it? Specialization might be the key.

If you want to specialize in a specific area, do your homework. Is there enough work to support your business? Can you work efficiently in this area? Will you be satisfied with one line of design work?

Don’t box yourself in. Just because you decide to specialize in something, it doesn’t mean you can’t take other projects. It also doesn’t mean that you can’t change over time.

Market and client needs change. Stay on top of your business and the industry. Evaluate your projects and clients periodically to make sure you are doing what’s best for your career.

Step 10: Pay Yourself a Salary


Now for the fun part – make sure to pay yourself!

Separate business and household money. Use different accounts, credit cards, and keep track of everything. Operate the freelance work as a business to make everything more manageable in the long run. (Believe me, your CPA will thank you.)

Then from the business, pay yourself a salary. (Hopefully, you’re are doing enough business to pay yourself well.) Don’t pay household bills from your business accounts. Keeping the business and personal accounts separate will make for easier, and less stressful accounting over time.

Conclusion

You can be a freelance graphic designer. It’s more than a dream, and in a growing gig economy worldwide, you can find a place in the creative industry on your own.

You will have to work at it. But if freelance graphic design is something you are interested in, you can use this plan to get started.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

One of the biggest challenges in today’s online and digital landscape is getting your presence or business online fast. You need a brand, logo, and social media profiles that shine to help get your efforts off the ground.

Design tools can help. Even for those with little design experience, a good tool can help you create a logo and brand as well as create elements to share on social media.

Best of all, you can get started in just a few minutes. That’s where Placeit comes in.

What is Placeit?

Placeit is a design tool that’s packed with easy to use templates for all kinds of design projects. What’s different about this tool is templates are “smart.”

That means you can make adjustments right on the screen and change from a basic template to something that looks customized. It’s a quick way to create anything from a logo or brand elements to a video to share on social media.

And you don’t need access to expensive tools to do it. All manipulations happen right on the screen using simple drag-and-drop actions.

The Placeit library includes more than 26,000 smart templates with starter designs for everything from mockups to logos to videos. Plus, more templates are getting added all the time.

See for yourself — just search for what you are looking for.

Create a Brand

If you need to create a brand mark or logo, Placeit is a great place to start.

Here’s how it works:

  • Start with a search using your brand name and Placeit will make template suggestions
  • Pick a template based on your business (we used the fast food logo maker template)
  • Adjust color to match your style or brand
  • Pick out new icon elements
  • Change words or fonts
  • Save and export

Every element is customizable, making this a quick option when it comes to developing a logo quickly. You can mix and match elements, colors, and fonts to match your style.

It doesn’t cost anything to try it out. If you need to establish a brand presence, the Placeit Logo Maker is a good starting point.

Establish Social Media Presence

Once you have a brand concept started, design tools can help you promote your brand and establish a presence online. Creating images for social media is a big part of this.

Placeit can help with that, too. The tool has thousands of options for ad and social media templates to choose from. Use them to create static images or create engaging Instagram Stories to draw more users into your channel.

Just like with logo elements, every aspect of a social media template it customizable and it only takes a few clicks. Just remember to use a visual theme for social media that matches your brand identity with the same palette of fonts and colors.

Design Tools You’ll Love

Placeit is packed with design tools for almost any task you need to accomplish.

The Video Maker allows you to create videos for your brand in just a few minutes with images, text, and audio. Start with a template and use the same tools that power the logo maker to customize video elements before downloading your unique video.

If you have your own video clips, you can use those to make intros for your existing video content. Video content is what’s driving social media as well. Use the Instagram Story video maker to create content that will keep users double-tapping.

Pair it with the YouTube Thumbnail Maker to create professional thumbnails that will help people find your videos. The thumbnail maker includes plenty of pre-made templates to get started and everything is customizable. You’ll spend more time creating and sharing videos, not creating thumbnails.

Other key features of Placeit tools:

  • Largest collection of mockups on the planet with everything from shirts to mugs to phones
  • Slideshow templates to make presentations a breeze
  • Collection of more than 4,500 logo starters
  • Design templates for print elements including business cards and brochures
  • Innovative search to help you get started, even if you have no idea how to design a logo
Placeit Pricing

Get access to the full Placeit library for $29 per month. (Annual plans are just $99.) Paid plans allow users to download anything with unlimited access and use.

If a logo is all you are looking for, create a logo and if you love it, pay just $39 for a single license to purchase it directly without a subscription. The download includes a vector logo that works for anything from websites or social media to business cards, t-shirts, and banners.

Conclusion

Even seasoned graphic designers can benefit from the Placeit collection of tools. Use it to create elements quickly and perform easy customizations. This can be a great option for working on personal projects that you don’t have a lot of time for.

Placeit tools are robust, easy to use, and have professional quality. If you need a set of design tools for any reason, this is the place to start. Look around and try it today.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

If you aren’t using it already, Google Slides might quickly become one of your favorite tools. For anyone with a Google account, the presentation software is included to use completely free of charge.

It’s packed with tools to help you make great presentations with ease, and it supports downloadable templates to help you get started fast.

Make the most of this presentation tool with these tips and tricks that make Google Slides that much more functional!

1. How to Wrap Text in Google Slides

As a designer, you probably love text wrap. Put a halo on an image and all the text just bumps right off it. Unfortunately, Google Slides doesn’t quite work this way.

To wrap text in Google Slides, take care with text and image frames.

Use the handles on text and image boxes to adjust the height and width of these boxes. That’s how you essentially wrap text using this tool. It is not as precise as design software, but it can do the trick for most slide designs.

One more trick? Send the image to the back using Arrange > Order > Send to back. Then use returns to stack text in a certain format within the text frame.

2. How to Add Bullet Points in Google Slides

Bulleted lists seem to be a staple in presentations.

Short lists can actually reinforce an idea without forcing the audience to read too many things during the talk.

Add bullet points in Google Slides text boxes by navigating to Format > Bullets & numbering > Bulleted list > Pick the style you like from the visual options. Make sure you first clicked on the box to which you want to add bullets (it will bullets to each paragraph) or highlight only the text elements you want to convert into a list.

Choose from multiple style options to find what works best for your presentation. Subsequent paragraphs will also use bullet formatting.

3. How to Print Google Slides with Notes

Plenty of presenters like to add what they plan to say or notes into the notes view of each individual slide. Google Slides allows printing with both the slide image and these notes printed on each page.

Navigate to File > Print settings and preview > Change dropdown to 1 slide with notes.

Other printing options include the ability to print single slides or handout views with 1, 3, 4, 6, or 9 slides per page. Prints can be done in landscape or portrait view and can be printed to a physical print or to PDF for digital sharing.

4. How to Insert a GIF into Google Slides

Spice up your presentation with an animated GIF.

Google Slides supports using still images in most common formats as well as GIF animations and video.

To insert a GIF, navigate to Insert > Image > then pick where your GIF file is located. If you will have an internet connection during the live presentation, you can even use that URL to pull and add the GIF to your slide.

To do this, select By URL and then paste in the image location. If an animated preview appears, you added a valid image address. (If the URL is not valid for a GIF image, it will return an error message.) Note that to use a URL, it has to be the image link, not a link to a webpage containing an image.

Click Insert to add the GIF. Then drag and drop the image to the preferred location on the slide.

5. How to Convert Google Slides to PowerPoint

Depending on where you are presenting, it might be better to convert your Google Slides to a PowerPoint document. This can be because of the computer or system you are using or because you might present in a location without an internet connection and don’t want to use offline mode.

Regardless of the reason, Google Slides can be exported into a number of different formats including PowerPoint. Note that internet-connected features, such as inserting a GIF from the web or linking to a video will render as still images in an exported Google Slides file.

To export Google Slides to PowerPoint go to File > Download as > Microsoft PowerPoint (.ppxt). Once you click the file type – in this case PowerPoint – the download should start. It will be located in the downloads folder of your local computer unless you specify otherwise.

You can open the file in PowerPoint and make changes or run the slide show. Formatting, text and image elements, and created slides will all download in the new file. Everything is editable so you can continue to work or make changes.

It is important to skim through slides before presentation after an export. If anything funny is going to happen to the formatting – from font changes to missing images – this is where it is most likely to happen. Look at all the slides ahead of time to make sure everything in your presentation is formatted and looks like you intend.

Conclusion

Google Slides is a powerful presentation tool and although it works differently than some other software you may be more used to, it is rather intuitive and easy to manage.

Jumpstart Google Slides projects with themes from our collections here on Design Shack. Themes can be a great design starter with slide options for almost every presentation imaginable. Pair them with these tips and you’ll be creating highly-visual presentations in no time.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

If you’re an Adobe Lightroom user, learning how to save a preset can make your workflow much smoother. Today we’re going to teach you how to create your own Lightroom presets in a few quick steps.

A Lightroom preset is a “package” of settings that can speed up the photo-editing process. Presets can be reused to create the same effects over and over again. Using them can take a lot of time out of the editing process for repetitive actions.

We have a full guide to Lightroom Presets if you want to learn more, or find presets that you can download and use right away.

Figure Out What Kind of Preset to Create

What sliders do you use frequently in Lightroom? That’s the starting point for creating a preset. The best presets are for steps you commonly take to save time during the image editing process.

Presets can be created for different types of sliders, which adjust elements in a photo using a scale. There are sliders for color, ton, contrast, vibrancy, exposure, and elements such as white, black, and shadows.

You can edit all of these controls in detail view using the Profile, Light, Color, Effects, Detail, optics, and Geometry panels.

How to Create a Preset in Lightroom

Once you know what editing controls would serve you best, you can create the Lightroom preset.

Open presets from the Edit icon, then Presets. (You might already use this to work with presets that you already have downloaded.)

Then, use then choose Create Preset to add a new preset. That option is located by clicking the three dots at the top right of the Presets Panel. A menu will open where you can choose what settings you want to save. The nice thing about presets is that if you don’t get it right the first time you can continue to tweak the preset and make adjustments later.

Pick a name for the custom preset. It will save in Lightroom in the User Presets area.

Organize Presets for Easy Access

The most important step in creating a Lightroom preset might be how you organize them. This step can determine if you actually use the tools you’ve created or not.

Use a preset name that tells you what it does. Names like Preset1, Preset2, etc. are not helpful later. A name like Grainy or Sunshine Blowout can tell you exactly what the tool does for later use.

Consider adding your initials to the beginning or end of every name if you use a lot of presets. This makes it easy to see presets you have created versus ones you may have downloaded from another source.

How to Use a Saved Preset in Lightroom

Once you have created and saved your Lightroom preset, it’s time to test it out.

Open the photo you want to edit. Open the Presets panel.

You can preview how a preset will impact the look of a photo by hovering over the selected present without clicking. If you like it, click the preset and the changes will apply to the image.

You can use multiple presets on the same photo and commands such as Undo and Revert to Original give you the t=option to go back. You can also create multiple edits for the same photo using different saved presets. Make a copy of the image from the edit menu to take advantage of this feature.

Conclusion

Adobe Lightroom presets can be super tools when it comes to photo editing workflow. Make the most of them by creating and saving presets for functions you do most often.

Although it might be tricky the first couple times you create a preset, learning this tool and functionality can save you a lot of time in the long run. It will make editing that much easier and help you create consistent edits and image styles that you can reuse with just a click.

Read for later

Articles marked as Favorite are saved for later viewing.
close
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview