featured image american flag

in Blog

American Flag PSD Design

Note: if you’ve come here to just download the American Flag image or PSD you can skip to the bottom and do so quietly but do so kindly while others are working.

Gonna start off by saying this project took me almost 5 hours. I had no idea what I was getting into when I started this, and how many specifications there were for the American Flag. Sure, I could have ignored the specs, but I really wanted to do this right (actually, I did ignore a few minor details).

American Flag Dimensions / Technical Specifications

General Specifications

13 stripes in total
7 red stripes
6 white

50 stars
9 rows of stars total
5 rows of 6 stars (alternating)
4 rows of 5 (alternating)

American Flag Color Specifications

“old glory red”
Hex: E0162B
RGB: 224,22,43
CMYK: 0, 94, 76, 22

“old glory blue”
Hex: 0052A5
RGB: 0,82,165
CMYK: 89, 85, 24, 12

Flag Dimensions

24.764″ width x 13″ height

Stripes should each be 1″ high.

Blue Block

Horizontal guide @ 9.8″
Vertical Guide @ 7″

*the blue block should take up about 40% of the width and go down about 7 stripes.

The Setup

Getting / finding all of these technical specifications is what took the longest. The actual specifications of the US flag is insane. Each star actually has its own specifications and there are a ton of more specs that were just too ridiculous of this simple project.

I setup my canvas based on the dimensions described above, basically 24.764″ x 13″.

american flag PSD

I used these dimensions for the simple fact that it would make setting the guides for the stripes much easier.

The Design

Next, I set the guides based on the above specifications. I made a ton of mistakes along the way, and even more later on.

american flag PSD design


Eventually I got all the guides set nice and purdy.


photoshop of american flag

The Blue Block

Once I got all the guides straight, the next logical step was to create the blue block. I set the guides 7 stripes down (or 7″) and 9.8″ wide. I used the selection tool based on these guides then filled in with old glory blue, or CMYK 89, 85, 24, 12 (had to really dig to find that color).

4 american flag design in Photoshop CS5

Ok, now we’re starting to look like a flag!

Drawing the Stripes

Well, I didn’t really draw anything. The guides were already drawn so I just started to select each row and fill in every other row with old glory red, or CMYK 89, 85, 24, 12.

USAflag in PSD

Highlight, fill. Highlight, fill. Rinse and repeat.

It wasn’t long before all of the stripes were done and now we are really looking like an American Flag!

stars and stripes PSD design

The Stars

Now this was tough. This part really tested my patience, and I think I really earned a stripe as a designer tonight, no pun intended.

I felt the best method for this was to use a star from a font. That way I could type out the number of rows / columns I needed, then just mess with the tracking, leading, font size, and other parameters later on.

This process took me about an hour to figure out and get right.

This is how it looked when I first started.

american flag photoshop design

I didn’t see how I was going to be able to make everything squeeze together. I started messing around with the leading and tracking.

Things did not go well.

PSD of USA flag in Photoshop


I started getting a little closer once I increased the font size. Finally we are getting somewhere.

9 leading and tracking is so key can get bigger fonts


But I still wasn’t even close to perfect symmetry. (this is the point where I said “forget it” to perfect specifications and just wanted to get it right.

At this point I finally thought I had it. 130pt font 52 tracking 100+ leading.

american flag PSD


This is also when I realized that RGB color does not convert to CMYK, so I had to redo all of the colors which was easy.

american flag photoshop design
I looked at a “real” American Flag and noticed I was a little off in the star department.

I changed the font to 121 points, set the tracking to 52 and leading to 200. This made me much happier.

american flag PSD design


My flag is finally complete. I wanted to cry. No, I wanted to salute my beautiful flag.

I was proud to be an American at this point. Even more, an American designer. (ok, still a designer in training).

American Flag (PSD below):
American flag PSDBy Patrick Coombe
Designed in
Delray Beach, FL
Date uploaded:
Jan 31, 2014Image of American Flag PSD. PSD download of American flag below.


What I Learned

Today I learned so much about the design process. It really allowed me to give designers an all new respect. I thought this project was honestly going to be a walk in the park. I actually felt like I was cheating myself when I first started, but every corner I turned I learned something new.

Today I learned that design isn’t about art, it is about the user. It is about standards. It is about perfection and doing what is right.

There is way more to design than just design. There is so much research. There are so many unknowns.

My Personal Satisfaction

Although I am a little giddy tonight, my satisfaction level is a 80%. I could have spent another 8 hours on this project if I wanted to get every last detail correct down to the pixel. In one way, I am almost disappointed I did not but I don’t want to subject myself to that mania.

The American Flag PSD


Update: A few final edits

5/20/2015 – Thanks to Andrew Harasewych on Google+ for pointing out that the stars were a bit (actually a lot) close together. With some tweaking I was able to get the stars to a more suitable size.

american flag


Today is the first project where I think someone might want, or need the PSD or maybe just the specifications provided.

PSD file download: American flag PSD

PSD file download (updated): American flag PSD

PNG file download: American flag PNG

JPEG file download: American flag JPEG

file download: American flag specifications

Also, why do so many designers still zip PSD’s that are ~1Mb? It’s not like that much bandwidth is at stake!

Thanks for stopping by and checking this out.

As always, please feel free to leave any comments or criticisms. Also, if you have any questions feel free to shoot them my way as well.

Patrick Coombe

Patrick Coombe

Patrick Coombe is an internet entrepreneur, SEO consultant and web developer living in Delray Beach, FL. He is the founder of Elite Strategies.
Patrick Coombe
Patrick Coombe
Patrick Coombe

Latest posts by Patrick Coombe (see all)

Loading Facebook Comments ...