How to Make a Pretty Cute Twitter Header in Seconds With a Twitter Header Maker

How to Make a Pretty Cute Twitter Header in Seconds With a Twitter Header Maker

What You'll Be Creating

Looking for a cute, cool new Twitter header? In this tutorial, we'll create a Twitter header using a cute Twitter Header Maker—and you can do it all from the comfort of your browser. It's easy, fun, and no experience is required.

We're going to use an online tool called Placeit—an awesome, browser-based tool for mockups, designs, and more. Placeit has an entire section dedicated to Twitter headers. This means you don't need to own expensive software to dig in and experiment with a Twitter header design of your own.

We can choose colors, move layout elements, change imagery, text, and more. It really is a browser-based designer.

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

1. How to Use a Twitter Header Maker

Step 1

First, let's head to Placeit. It's free to sign up and get started.

Looking at the main page, we want to go to the Designs area. 

Step 2

Then, browse the resulting sub-menu, and navigate to Twitter Header.

Keep in mind that, alternatively, you could also use the search function to search for "Twitter Header", at any time.

Step 3

Next, browse through the available Twitter header templates. Choose any one you like—consider it a starting point for your Twitter header design. You'll be able to move and change things, once you make a selection.

For this example, we're going to use this cool Twitter header template below. If you can't find it, feel free to click here, or on the image below, to follow along. 

Step 4

Here we are, inside of this header design template. Here is a brief overview of how to customize this Twitter header design.

The design is in the center of the page. On either side, you're presented with options that you can customize. This includes customizing your type (font, color, and size), imagery (adding, removing, and customizing), and background content (like color and overlays). 

Note that you can also directly click on elements within the design itself to move and resize them. Simply click and drag to do so.

2. How to Create a Cute Twitter Header Using a Twitter Header Maker

Step 1

Let's walk through creating a sample pretty Twitter header, using the template that we opened earlier.

First, let's change the text. Click on the text to reveal the resize handles, and then click and drag on the handles to resize the text.

Step 2

On the left-hand side of the screen, change what the text says to whatever you prefer. I'm going to make mine say, "Hello, Friend!". 

Change this text to Josefin Slab, and change the font color. I changed mine to a vibrant pink color.

Step 3

Remember, you can arrange the text by clicking and dragging it. 

Follow the same process to change the sub-header text. I made mine say, "It's nice to meet you," but yours could say anything you prefer. Change the color to a dark blue.

Step 4

Now, let's experiment with the imagery.

The hearts here are cute, but we can remove the imagery completely by clicking on No Image in the Frame section.

Step 5

Likewise, we can browse for a new image here, too. There's a whole host of stock images available here in Placeit. In particular, this item is a frame. 

You can also check out images by search terms—feel free to try a keyword and browse the image results. Click to choose an image, if there's one you'd like to test out. 

Step 6

Or we can upload a custom image. Let's try that. 

First, let's prepare an image. This is an advanced/optional step—so if you'd like to avoid image editing outside of your browser, skip this step and jump to Step 8.

Let's say I'd like to use some custom artwork. Here's the illustration I'm going to use in my Twitter header. It's from Envato Elements, by artist ddraw.

This illustration of a cute girl is by ddraw—and there's plenty more to check out on Envato Elements.

Step 7

However, by default, this image is packaged as a JPG with a white background and an EPS file. Neither of them is going to work just right for what I need—the JPG has a white background, and EPS is not a web-friendly file type.

So I opened the EPS file up in Adobe Photoshop. Notice what the file looks like—it has a transparent background (as indicated by the checkered pattern).

Step 8

Next, I saved this image at a smaller size. Go to Image > Image Size to change the dimensions. We won't need high resolution for a web-based image like a Twitter header. I went with 850 pixels wide by 993 pixels high—which is proportionate to the original image dimensions.

Change the image mode to RBG Color, via Image > Mode > RBG Color.

I saved this image as a transparent PNG file—this will give me the image but with no background, in a web-friendly format.

Simply go to Save As, and choose PNG as the desired file type.

Step 9

Now, back to Placeit. Let's add in our custom image.

Let's keep No Image selected, from our original Image Frame. 

Then, click on Add Graphic, to add a new Image Frame to the design.

Step 10

In our new Image Frame options, click on Custom Image. 

Then, we're able to select an image from our computer. Navigate to the image you'd like to insert into the design, and then click OK. 

Step 11

Placeit gives us the option to crop our image, if we'd like to—I'm going to go ahead and include the entire image. When you're happy with your selection, click Crop to continue.

Step 12

Now, our image is in our design. Perfect! Click and drag the resize handles to resize it. You can also click and drag to move and adjust the entire image.

Move the contents of your design, until you're happy with how they are arranged.

Step 13

Next, let's check out our background options. 

In this particular template, we've got a background overlay. Again, we could upload a custom image—so, for example, you could create your own pattern or overlay, with transparency, and use it here in Placeit, if you wanted to.

However, let's try out one of the options already here and ready for us, within Placeit. Browse through the options, and choose one. I chose the one shown below.

Step 14

Finally, let's change the background color. Since the background overlay has transparency, the background color shows through. I went with a light purple color.

Step 15

But, again, none of this is set in stone. We can totally change things up, if we want to.

For example, let's try remixing our work with a different image. I'm going to try out these cute cats by vintagio from Envato Elements.

These cute cats were drawn by vintagio—there are plenty more cute illustrations on Envato Elements too.

Step 16

Just like before, let's click on Custom Image to change our custom image to a new one.

Select your image from your computer, crop it within Placeit, and there you are! Adjust your image however you prefer.

Customize and adjust your layout to your heart's content. It's addictive, isn't it? It's super fun to just play with designs in your browser.

3. How to Save and Upload a Twitter Header

Step 1

Once you've finished your Twitter header, it's easy to save and download your work.

Placeit is free to use, and it offers two convenient options when it comes to downloading your work. Either pay a very low, one-time fee, or grab a subscription and download to your heart's content. This can be a great option if you're really enjoying the tool, and you know you'd like to use it regularly. It's also a great fit if you'd like to try the other parts of Placeit, like high-quality mockups, T-shirts, and even video. 

Even better, most commercial use is covered with Placeit—so you don't have to worry about those content concerns either. Remember to make sure that any third-party content you upload is also copyright safe and appropriate for commercial use.

It's as easy as choosing the option that's right for you and clicking Download. Here's the final design I decided to download—using the original image from this tutorial.

Step 2

Now, let's head to Twitter.

Go to your Twitter profile, and click on Edit Profile. 

This opens up a window where we can edit our profile content. Click on the camera icon to select a new Twitter header image. 

Step 3

Simply navigate to where you saved your new Twitter header image on your computer. Select it, click OK, and now your new Twitter header is uploaded and ready to go.

Easy, right?

Check Out These Cute Twitter Headers on Placeit!

There's plenty of content to try out on Placeit—and remember, there's no cost to give it a shot! It's free to sign up, and there's no fee to start designing. 

Check out these cute designs. They're already off to a great start, but think of the ways you could customize them. Add your own flair and experiment with these designs, right in the comfort of your browser.

1. Lovely Cute Twitter Header Template

Looking for something sweet? Check out this template—and follow this link for a special, modified version. How would you customize this layout?

2. Pretty Garden Twitter Header Template

Maybe you prefer something soft and flowery. This template has a lot of potential. There are all kinds of different aesthetics you can experiment with on Placeit, no uploading necessary.

3. Custom Twitter Header Template with Quotes

This one's so cute, right? Customize the quotes here—what would you make this one say? This is another custom link to a special, modified layout—so jump in and enjoy!

4. Galaxy Illustration Twitter Header Template

Love the stars? Into a galaxy aesthetic? How might you customize this one? Different background colors? Different text? The sky's the limit.

5. Cute Pet Themed Twitter Header Template

Illustrative content can be a great fit for your Twitter header. If you're an animal lover, this one could be a perfect fit! Customize the text and the colors, and make it work for your Twitter profile.

Want to Learn More?

Whether you'd like to see more of Placeit or you'd like to learn about creating custom designs in applications like Photoshop and Illustrator, there's plenty of awesome free content on Envato Tuts+ to check out. 

Here are some more tutorials to keep your creative juices flowing.

• 
  Social Media
  30 Social Media Tutorials & Roundups
  Andrew Blackman
• 
  Social Media
  How to Create a Multi-Image Twitter Header Image With Adobe Photoshop
  Kirk Nelson
• 
  Adobe Photoshop
  30 Tips & Tricks All Photoshop Users Should Know
  Abbey Esparza
• 
  Instagram
  How to Make Instagram Story Templates
  Abbey Esparza
• 
  Photo Effects
  How to Create a Fun Heart Crown Photo Filter Effect in Adobe Photoshop
  Melody Nieves