Technology has more of an impact on our daily lives than at any other time in history. Smart houses and smartphones are the first interactions most people have when they wake up and the last interaction they have before they go to bed. Doctors use technology for complex medical problems, teachers use technology in the classroom and businesses embrace new trends to attract customers.
The rise of the iPhone is an excellent example of how rapidly technology advances. Apple released the iPhone in 2007. At last count, 2.2 billion people own an iPhone just over a decade later. That is one little example of technology taking off and people embracing the smartphone.
In the coming years, some emerging technologies will become more common. Here are seven likely to take off and become a part of everyday life.
1. Speech Recognition
Speech recognition has advanced in the last few years due to the use of devices such as Alexa and Google Home, as well as advances in the way Siri and Cortana respond to voice commands. Consumers are already using this technology here and there, but expect it to become a more integral part of your day. There’s no need to navigate to Amazon and click on an item to order. Instead, users will tell their phones or smart devices to place the order.
Speech recognition will start to appear in the ways we navigate our vehicles and interact with devices such as smart refrigerators and washers and dryers. Knowing how to program a device will become a thing of the past, as speech recognition advances and a simple verbal command makes technology work.
You’ve probably heard of Bitcoin and other cryptocurrencies, but may not have used them. As business continues its march toward a global market, expect to see more and more use of cryptocurrency. Already, people are much more likely to use Apple Pay or a virtual credit card than cash. In a study by the German bank Bundesbank, researchers shared that for the first time in the bank’s history, cash made up less than 50 percent of all transactions.
As more hackers perfect their skimming techniques, people are reluctant to use debit and credit cards for purchases. Cash isn’t always convenient to have on hand, and it’s bulky to carry around. Expect to see cryptocurrency rise, both for the convenience and the ability to use it across different monetary exchanges.
3. Driverless Cars
There is already quite a bit of buzz about driverless cars. Could the future of driving be one where humans don’t even need a driver’s license or the knowledge of how a vehicle operates? Fully automated cars would reduce traffic accidents, allow people to make better use of their time commuting to and from work and save money on fuel use. Liquid silicone rubber (LSR) is one area where advances impact the driverless car industry specifically. Autonomous cars use LSR parts while reducing the cost and increasing the performance of the vehicles. This tech will help make driverless cars affordable for everyone.
4. Artificial Intelligence
The driverless vehicles mentioned above may make you think about the novel-based movie I, Robot with Will Smith, where the computers try to take over the world — and the car he’s driving in one scene. Advances in artificial intelligence (AI) mean there are fewer menial tasks for humans to do, and people can focus more on creative and management-based endeavors. Through 2020, expect to see a push toward transparency in how AI functions. People still don’t fully trust AI — perhaps because of movies where computers turn on society — and developers are working to figure out how to expose the specific algorithms used for computer decision-making.
As people begin trusting AI more, the technology will take over more and more physical tasks. Although the day where a robot lives in your home and cooks dinner for you may be a decade or more away, the changes are coming. In the future, we may have everything from a robot nanny to a machine which cleans the entire house instead of merely a vacuum.
5. Internet of Things (IoT)
The Internet of Things is growing by leaps and bounds. A few years ago, the idea of connecting all our devices to “talk” to each other may have seemed almost impossibly futuristic, but today, the average home might have a smart thermostat and lights, programmed to turn on minutes before residents arrive home from work. Smart devices range from garage door openers to door locks to ways of interacting with your pets while you’re away.
As 5G Internet speeds hit more areas and more devices enter the market, expect to see an expansion of IoT in nearly every field. One significant issue with all of these devices, however, has been that they all run separately, meaning users must keep track of a lot of different things. As Google Home and Alexa improve and expand which products they work with, expect automation of all devices to become simpler.
AI will also begin working with IoT so that devices can automatically set your preferences based on past behavior and best guesses. Imagine a day where you don’t even have to set your coffeemaker to turn on. Why? Well, your smart home already knows you get up at 6 a.m. and sets the device for you.
6. Eye-Controlled Technology
Advances in facial recognition and eye-tracking software allow people to interact more easily with electronic devices. Already, the iPhone XS Max recognizes the user’s face to open without using a passcode or fingerprint. The user looks at the screen, and the device unlocks, but only for the user through facial recognition. Expect to see more devices using this type of technology in the future. Imagine a car that’s impossible to steal because the vehicle recognizes a list of pre-programmed faces before starting.
In the next age of technology, gestures and facial expressions may operate all types of devices, particularly computers and smartphones.
7. Smart Fabric
Imagine wearing a shirt which adapts to your body temperature, keeping you warm or cool based on comfort level. A team of researchers produced a wearable fabric with sensors embedded inside. Solar receptors could capture the power of the sun and heat the material on a cold day. Multiple sensors might track health metrics and notify someone before they have a stroke or heart attack. It could be used to better track the effectiveness of a workout.
The applications for smart material are limitless, such as bedding that maintains an ideal body temperature while sleeping and tracks sleep patterns. Smart fabric might help airlines ensure their passengers are more comfortable and alert flight attendants about any severe health complications, such as blood clots on long flights.
Impact of Technology
Changes in technology impact people’s lives. As artificial intelligence advances, jobs will disappear — computers will replace people. Either new jobs that use more human intellect will replace old ones, or people will feel an economic impact. Freeing our time from menial tasks will giving citizens additional hours to read, study, learn new skills — or waste more time on social media than ever before.
Technology changes so rapidly that you may not even notice the shifts. Do you remember a time when you didn’t carry your cell phone everywhere, and you went out to dinner with friends instead of sharing a photo of what you had for lunch on Instagram? Technology changes not only the physical aspects of life, but our social interactions. While most technology will make life easier, you must also be aware of potential negatives and work to counteract them for a fulfilling life.
AI in Design
When you hear artificial intelligence (AI) discussed in the news, it’s usually related to new technical achievements in how large sets of data can be organized and understood. But the value of AI goes beyond just data science and can actually extend into other realms like web design.
Normally, web design is thought of as a purely human endeavor, like a form of art that is mostly reliant on creativity. However, advancements in AI have opened up an opportunity for designers to collaborate with smart computer systems to develop user interface (UI) and user experience (UX) content in a more efficient manner.
Let’s explore how AI and machine learning (ML) are used in web design today and how we can expect these two fields to blend in the future.
Basics of Artificial Design Intelligence
The web development community uses the term Artificial Design Intelligence (ADI) first popularized by site builder Wix to describe how new automation technologies contribute to UI and UX work. This change in how professionals approach design methods has skyrocketed in popularity during recent years. Companies like Adobe have even begun to experiment with machine learning to build AI-centric design tools.
Obviously, design has evolved light years since the early days of the world wide web. Back then, webpages were manually coded in HTML while designers tried to determine what colors, fonts, and styles worked best in an online environment. This was a period of great experimentation, marked with plenty of failures and lessons learned.
As the internet matured, common design strategies and best practices emerged to help developers create a consistent experience for users. At the same time, back-end servers have come to rely on automation to build dynamic web-based applications. The ADI movement combines these two concepts to elevate how UI and UX design is accomplished.
Much of modern artificial intelligence is based on a concept called machine learning, where a team compiles a wide range of data and lets a computer network analyze it through a sequence of algorithms. The goal is for the AI system to identify patterns and trends that might not be readily evident to a human.
Early ADI adopters realized that decades of web design experiments – successes and failures – could serve as a useful data collection to run through algorithms. The result has proven to be a powerful tool when it comes to humans collaborating with machines to improve UI and UX.
Consider logos: They’re the foundation of development projects. Back at the birth of the internet, companies would create their own image file to serve as a digital logo. Time passed and some organizations realized they could outsource that task to experts in branding and web design. But still, it remained a purely manual effort.
Fast forward to today and designers leverage logo-makers that run on an AI system. Thanks to the massive data sets that algorithms have already crunched, the process is now as simple as answering a few questions, filling in a few criteria, then waiting for the system to propose different designs. This logo-while-you-wait process relies on the AI engine to analyze the latest logo trends to develop something that fits your company’s needs.
Designing in the trenches – WordPress: If you work in WordPress, and it’s hard to avoid it, you’ll be elbows-deep in artificial intelligence and machine learning plugins before you realize it. There is a true explosion of new products hitting the market in this area, ranging from spam detectors to grammar improvement to a variety of recommendation engines.
A common scenario is a small business owner builds a website on a DIY platform like Wix and then realizes the extreme limitations, so asks you to migrate their website to WordPress, spiff it up, and turn it into a cash cow. Before you realize it, AI and ML are your project partners.
Integration of Tools
Web design is not just about colors, fonts and logos. The best websites in the world deliver a positive UX experience for each visitor. This means that when a person arrives at a website, they are easily find what they are looking for thanks to the combined design power of humans and AI.
One of the primary goals for AI and machine learning when it comes to web design is to make the UI and UX personalized for each user. Not all people agree on what display or set of features is best, especially if they come from different places on the planet and speak different languages. But AI makes it possible for designers to create flexible templates that adapt to the person using them.
Web developers have realized that they can integrate AI-based tools directly into their designs to add value for users. For example, users may want to edit PDF documents directly in their browser. In bygone days, that would have been a tall (or impossible) order, but with AI and machine learning doing the heavy lifting, content can be ”visually” extracted from third-party files and made easier to manipulate on-the-fly, even in a document format formerly considered to be locked-in.
Another design feature that can be AI powered is an in-browser chat tool. Businesses that sell goods or services online often want to provide a way for their customers to get quick support. With an AI-based chat tool, this digital customer service representative can answer questions and point the way to useful information, often finding solutions without having to escalate their query to a human.
You can’t talk about the data that powers AI and ML in today’s world without talking about how to protect it. Proper collection, storage, and use of data is no longer simply an ethical question. With the stringent GDPR regulations put into play in 2018, and the accompanying fines for misbehavior, it’s a financial survival question as well.
How far has AI come? It’s getting perilously close to being able to consistently hack the vaunted Captcha plugin using machine vision. Heretofore Captcha has served as a trusted website gatekeeper against automated spam but appears to be on the verge of becoming obsolete.
Consider implementing the following precautions when working with AI/ML in your own online life and suggest clients do the same when you hand off a completed site:
1 Almost every site collects some sort of data that falls under GDPR bur few site owners take the time to properly secure themselves against the latest smart malware attacks. A WordPress maintenance plan costs a little bit but removes that particular worry. It’s exactly what it sounds like – outsourcing your security. For some, it’s well worth the peace of mind to bring in experts.
2 If you’re a freelancer or work for a company that collects customer data, you should already have a virtual private network (VPN) in place to keep hackers from stealing or corrupting your information. Already in use by 25% of people who go online, VPNs are rapidly becoming the de facto method of protecting all the info an insatiable AI algorithm needs to become smarter.
The Bottom Line
The advancement of AI/ML will continue to revolutionize all areas of technology, including web design. And we shouldn’t depart the premises without allaying fears that the end game of this technology is to replace designers. That’s not the likely outcome of all this – at least not in any foreseeable iteration of the industry.
Instead, what we can anticipate is for web designers to begin trusting AI as an augmented partner, using it to accomplish repeatable tasks in an efficient way. This frees the designer to focus on the creative tasks that no amount of AI can simulate and benefits the end user, which is the ultimate goal.
Space has and will probably always be one of those things that man has long dreamt of conquering. From the darkest corners of the Milky Way to the farthest region of the known Universe we will always poses that urge to explore and look for new worlds, worlds that could change what we know about life itself.
Graphic Design Bundle
It’s a great month to be a member of Go Media’s Arsenal subscription. Not only do you have access to our entire library for only $15/mth, but you are able to download this month’s special graphic design bundle of products at no extra charge.
Not an Arsenal Member yet? Join now and gain instant access to our entire library, including this bundle, for only $15.
Not interested in our membership? No worries. You can still purchase this bundle for 60% off the original price, now through 3/31/3018 – or the individual products inside of it, on their own.
What’s Included in this Graphic Design Bundle by Go Media’s Arsenal:
Free Vector Textures + How to Use Them
We are so excited to announce the release of a new vector set, the Fistful T-Shirt Design Graphic Vector Set.
This new vector set was created by new Arsenal Artist, Dedda Sutanto, and can be found over on our Arsenal for purchase now. This set is exclusive to our Arsenal and includes 43 individual elements, plus the fully completed design. These elements include a fantastic array of frames, crests, wings, borders, bullets, stars, ornate elements, and more. A gun and fist are extra elements that complete this unique set.
We’ll be using elements from this pack, along with free distressed vector textures, to create a distinct weathered design. So, in order to follow along, you will need to purchase the set, as well as to download the free set of distressed vector textures we’ve made available for you here:
Download now: GoMedia_Vector_Freebie_Distressed-Vector-Texture
Step One: Come Up with Your Own Design in AI.
Use the elements from the Fistful T-Shirt Design Graphic Vector Set to create your own unique design. (Or, if you choose, use the fully completed design provided in the set.)
Here’s the design I’ll be using for the purposes of this tutorial:
Step Two: Select (Ctrl + A) and Group (Ctrl + G) all of the elements together. Make sure your design is centered horizontally and vertically within your artboard. This will come into play later.
Step Three: Select (Ctrl + A), then make a copy your design (Ctrl + C). Place your copy next to the original. Then go to Window > Pathfinder to pull up your Pathfinder Window.
Step Four: Making sure your copy is selected, press UNITE on your pathfinder tool. Your copy should merge into one solid shape. Well done!
Let’s leave it there for a moment and go back to our original design.
Step Five: It’s time to paste our vector texture over our original design! Open the vector texture of our choice up in AI.
Copy (Ctrl + C), then (Ctrl + V) to paste the vector texture over top of your design. Head over to your swatch panel in order to change the vector texture from black to white and place your texture where you think it looks best.
Step Six: Add the copy (i.e. the black shape) over top of the original design (and, of course, the vector texture you’ve added to it).
Just like the original design, you’ll want to center this shape to the artboard. You’ll also want to make sure that this shape is indeed at the top of the pile so to speak. You can do this by making sure it’s selected and going to Object > Arrange > Bring to Front.
Step Seven: Next, select all (Ctrl + A) and head back to your Pathfinder Tool. Hit CROP.
Step Eight: and you’re done! But wait!
Hope you guys found that helpful. See you all very soon!
Our Complete Halftone Collection
We’re not sure what’s dreamier than a halftone. The tiny dots that create a gradient-like effect can produce such remarkable results.
Here at the Arsenal, we have nine packs that will give you the effect you’re after without the effort. Download them all in this complete collection – originally $105 – now only $27!
Or, become a member of our graphic design subscription and get them all (plus the rest of our huge product library) for only $15 a month.
All of the packs you see here are also available for individual purchase.
How to Use an Opacity Mask in Illustrator (A Newbie’s Guide)
Hey Fans of Go Media’s Arsenal, the best resources for designers on the planet. We’re here for a quick guide to using your new Brink Design Co. Industrial Vector Brushes, just released a day ago! These 100 handmade vector brushes were created with an unparalleled level of detail, made using a variety of different mediums and techniques to give your work that dirty, grungy, industrial look so many of you, our loyal customers, have been requesting.
Hop on this train, as the pack is 21% off through Monday, December 21st. And these vector brushes are exclusive to the Arsenal, so you won’t find this detailed work elsewhere
Or, if you love the Arsenal products in general, you could join our Membership and gain access to our huge product library ($10,500+ in products) for only $15 per month. No strings attached, cancel at anytime. And yes, we’re totally serious.
Now, let’s get to the tip!
Skill Level: Newbie
Tools Needed: Cool Illustration, Brink Design Co. Industrial Pack and Adobe Illustrator
1. Install your Brink Design Co. Industrial Pack Vector Brushes (or, as I like to call, 100 handmade brushes from the heavens)
Instructions are included with the pack.
2. Open your illustration in Adobe Illustrator. We chose this cute little monster guy.
3. Start going crazy with some brush strokes. This is the fun part. Soak it all in.
4. Group your brush strokes all together. Ensure that your monster is left out of the mix.
5. Object > Expand Appearance
6. Using your Pathfinder Tool (Window > Pathfinder), select the first option – Merge
7. “Control C” to copy this element. Next, go into your Transparency Window. From the drop-down, select “Make Opacity Mask”
8. Click on the small black box within the window.
9. Click “Invert Mask” and BOOM.
10. Click on the masked area if you’d like change where your mask is placed.
11. You’re done! We hope you’ve enjoyed this tip. Make sure to pick up the Brink Design Co. Industrial Pack and create something great everyday.
How to Create an Icon Pack using Adobe Illustrator
Since Halloween is just around the corner, we thought we should give you an early treat this year, in the form of a little icon tutorial. The idea was to show you guys how to create a cute set of three icons from scratch, using some of Illustrator’s basic tools such as the Shapes Tool, combined with the power of the Pen Tool and Pathfinder panel.
In terms of difficulty this course is aimed at those who have a basic knowledge of how Illustrator works, but that doesn’t mean beginners can’t give it a go, since every step is presented as explicitly as possible.
So, assuming you have Illustrator up and running, let’s jump in and start creating!
Download the: How to Create a Halloween Icon Pack Resources (AI + EPS Files)
1. Setting Up Our Document
The first thing you should always do, no matter the project, is make sure that you start off on the right foot by setting up a proper document.
So, go to File > New (or use the Control-N shortcut), and let’s go through some of the settings that need adjusting:
- Number of Artboards: 1 – since we will be creating a small pack, one Artboard will suffice
- Width: 800 px – which is the overall width of our Artboard
- Height: 600 px – which is the overall height of our Artboard
- Units: Pixels – this setting is really important since we will be creating for the digital medium, so screens and other display devices, which are pixel based.
And from the Advanced tab (which can be made visible by clicking on the little right facing arrow):
- Color Mode: RGB – which is the color mode for the digital medium
- Raster Effects: Screen (72 ppi) – this option controls the way drop shadows, textures and other effects are displayed on different media. If you’re creating for the screen 72 ppi will suffice, but if you’re designing with the intent of printing the final artwork on paper, then you should go with one of the higher values
- Align New Objects to Pixel Grid: checked – as we want everything to correctly snap to the Pixel Grid
2. Setting Up Our Layers
Once we’ve properly set up the document, we should take our time and think about the project itself in terms of layers.
Usually when I create detailed artwork, I find it useful to separate the different sections from one another using layers. This way I can easily work on a specific part of the design, without worrying that I’ll accidentally misarrange or affect my other shapes.
Since in our case the project is composed out of 3 assets (icons), it would be a good idea to create a layer for each one, so that we can better manage and edit them along the way.
So, assuming you know how the Layers panel works, let’s create 4 layers and name them so that they’ll be easier to identify:
1. grids – which will house the simple custom grids, that we will be using in order to create a cohesive pack
3. Setting Up a Custom Grid
For those new to the Grid, well you shouldn’t worry since it’s not that hard to master. At its core, the Grid is a system of vertical and horizontal lines that allow you to compose and position you artwork with a high level of precision. It is usually used in UI design, where the process of creating a balanced composition requires the designer to put a lot of consideration into the relation established between the different visual components.
But as with most of Illustrator’s tools, this too gives you the ability to do so much more with, one particular one being that of creating pixel crisp artwork.
Since I’m a strong believer in creating with Pixel Perfection, I always set up my Grid to the lowest values since this will assure me that my shapes are as crisp as possible.
Illustrator itself comes preconfigured with a default set of values, which we will have to adjust in order to be on the same track, by going to Edit > Preferences > Guides & Grid.
Here, a new popup window should appear giving us the option to adjust the following settings to the values indicated below:
- Gridline every: 1 px
- Subdivisions: 1 px
Once you’ve entered the indicated values, you need to make sure that the Grid snapping is actually active by going to the View menu and clicking on the Snap to Grid option.
At this point, we’re pretty much done with the adjustment process, which means we can now move on to building the custom icon grids.
4. Defining Our Icon Grid System
If you’ve ever created icons before, then you should know that the first step one needs to take when creating a new icon pack, is figuring out the size of the assets. There are a dozen of available options depending on where the icons themselves will be used, options that range from just 16 x 16 px all away to 256 x 256 px and even beyond that.
Now, for our current project, I’ve decided to go with something relatively large, more exactly 96 x 96 px, which means that our icons will be big enough so that we can put a considerable amount of details inside of them.
Once you’ve decided on your size, which we did, you will have to create a custom icon grid, which will allow you to build within that size boundary, which in the end will give you the ability to create an all-around cohesive icon set.
The grid itself is usually a square, since this shape allows you to push your pixels all the way to the limits of the confined space.
Yes you could add a bunch of horizontal, vertical and diagonal guides, for a deeper level of consistency, but in our case, a simple square will do the trick.
So assuming you’re on the “grids” layer, lock all the other ones and create a 96 x 96 px square using the Rectangle Tool (M). Position the shape to the center of your Artboard by selecting it and then using the Horizontal and Vertical Align Center options found under the Align panel, making sure that the alignment is done to the Artboard and not to a Key Object or Selection.
Once you have the guide in place, change its color to a light grey (#e6e6e6) so that it will be easily visible without drawing too much attention.
Quick tip: in case your Align panel isn’t showing the Distribute Spacing and Align to options, that’s because you didn’t told Illustrator to do that. To change this, simply click on the right corner down facing arrow and then enable the Show options feature and you should be good to go.
Now, since I usually like to give my icons some inner padding, I tend to add a relatively smaller square to the one I already have.
If you’re wondering why, well let’s just say I like to fool proof my designs so that when exported, I can be sure that none of the sides of the icons gets accidentally chopped off. This would result in a flawed file.
So, using the Rectangle Tool (M), let’s create a smaller 92 x 92 px one, which we will position over the one we already had, giving it a slightly lighter shade (#f2f2f2).
Since we will need a pair of grids for each of our icons, we will have to group the first one that we’ve just created using the Control-G shortcut, and then create two copies which we will distance at 60 px from the original using the Horizontal Distribute Spacing option.
At this point we’re done setting up the icon grids which means we can move on to creating our first icon, the creepy little pumpkin head.
5. Creating the Pumpkin Head Icon
Assuming you’ve locked the “grids” layer, and moved up onto the “pumpkin” one, we can start working on our first icon from the set.
Since all of our icons will have a fill/inner section and an outline, we will follow a pretty straightforward process of creating the inner section first and then applying a 4 px outline to it using the Offset Path effect.
That being said, let’s grab the Rounded Rectangle Tool and create an 84 x 70 px shape with a 35 px Corner Radius which we will color using a dark orange (#bf7355) and then position over the first set of grids, so that we have an even gap of 4 px between it’s left, right and bottom sides and the larger grid itself.
Quick tip: I recommend you turn on the Pixel Preview mode by going over to View > Pixel Preview, since most of the steps from this tutorial will rely on using this mode. I will also be giving you some pretty precise details when it comes to positioning the composing shapes.
Once we have our inner section of the pumpkin, we can give it an outline by selecting it, and then going to Object > Path > Offset Path and giving it an Offset of 4 px.
This will create a larger shape just under the selected one, which we will have to color using a dark color (#392a16).
As soon as we have our outline, we can add the all-around inner ring highlight by first creating a duplicate of the orange fill (Control-C > Control-F) and then adding a smaller 80 x 66 px rounded rectangle with a Corner Radius of 33 px to the center of the fill shape.
This smaller shape will help us create a cutout, which we will do by selecting both it and the shape underneath, and then using Pathfinder’s Minus Front option.
Since the resulting shape isn’t quite there, we will have to change its color to white (#FFFFFF) and then set its Blending Mode to Overlay while lowering its Opacity level to 20%.
Add a little texture to the surface of the pumpkin, by drawing a bunch of 4 x 4 px rectangles which we will color using a darker shade of orange (#9e5943). Then make sure to have them positioned underneath the highlight that we’ve just created, by sending the highlight to the front using the Arrange > Bring to Front option.
Don’t forget to select all the composing elements of the texture, and group them together using the Control-G shortcut, since you wouldn’t want the elements getting misplaced by accident.
Next, we will start working on the vertical delimiting lines, which will give the pumpkin its nice curved look. To do this, we will first create a 44 x 70 px ellipse to which we will apply an Offset Path effect of 4 px.
Now, with both shapes selected, use Pathfinder’s Minus Front option to create a cutout from the larger ellipse, which will result in ring like shape that we will adjust by cutting it in half by removing its right section, and then changing its color to #392a16.
Position the resulting shape towards the left side of the pumpkin fill section, leaving a gap of 8 px between it and the larger outline.
Create a copy of the curved line and position it towards the right side of the pumpkin, making sure to reflect it vertically (right click > Transform > Reflect > Vertical).
Add a secondary pair of vertical rings by creating a slightly narrower 28 x 70 px ellipse, to which we will apply Offset of just 2 px. Repeat the same process of removing the inner shape from the created offset, and then cutting the resulting ring in half, making sure to position a copy on both sides of the pumpkin at about 10 px from the thicker rings.
Next, let’s add a couple of highlights and shadows to the rings, in order to give it more depth.
First let’s add the highlights by creating a copy after the rings and moving them slightly towards the inside of the pumpkin. Make sure to change their color to white (#FFFFFF) and set their Blending Mode to Overlay lowering the Opacity to just 20%.
Add the shadow by repeating the same process – only this time, position the shapes towards the outside of the pumpkin, setting their color to black (#000000) while changing their Blending Mode to Darken and lowering their Opacity to 30%.
As you can see, the highlights and shadows go over the actual outlines and highlight of our pumpkin which is something that we don’t want them to do. To fix this, we will have to create and apply a clipping mask in order to hide the parts of the details that we don’t want overlapping.
First, we will have to create the mask itself by creating a copy of the ring outline, and then separating its inner path from the outer one by right clicking > Release Compound Path. Once the path is released, we will have to select and delete the larger shape since we will be using the smaller one.
With the resulting shape from step 11 and both the highlights and shadows selected, right click > Make Clipping Mask.
Since some parts of the details still go over the outlines, we will have to select all the vertical rings and bring them to the front (right click > Arrange > Bring to Front).
Before we start adding the face features, let’s add one more vertical ring highlight towards the right side of the pumpkin, positioning it a little towards the middle.
Follow the same process as before, only make sure that you’re creating the shape inside the actual clipping mask by double clicking on one of the composing elements, or by right clicking > Isolate Selected Clipping Mask.
Once you’re done simply exit the Isolation mode by pressing Esc.
Up until this point we’ve followed a pretty strict do-this-then-that workflow, so I thought it’s time I gave you a little creative freedom and let you “carve” your pumpkin by your own, so that in the end you will have something special to show off with.
The only thing that you will have to keep in mind is that no matter the expression, you will have to keep the detailing process consistent by adding a 4 px outline to each of the created shapes. Also, for the fill colors you could use lighter or darker shades of orange, I for example, have gone with something darker (#634133) but you don’t necessary have to use the same tint if you don’t feel like it.
That being said, take your time and once you’re done move on to the next step.
Quick tip: there might be situations where the Offset Path trick will produce irregular outlines, so for those cases try and use a 4 px stroke instead.
Assuming you’re carved an awesome scary look, let’s start adding the finishing touches, by working on the pumpkin’s top side that houses the vine.
First, grab the Ellipse Tool (L) and create a 20 x 6 px shape, which we will color using a dirty light green (#87826f) and then position towards the top section of our pumpkin, making sure to position it underneath.
Oh, and as always don’t forget to give it that 4 px outline!
Add a highlight to the vine’s base by creating a duplicate of the green shape, and then cutting out a smaller 18 x 4 px ellipse out of it. Color the resulting shape using white (#FFFFFF) and then change its Blending Mode to Overlay while lowering the Opacity level to 40%.
Finish off the vine by adding a 4 x 4 px square towards its top, which will act as the tip. Then change its color to a darker green (#757061) and give it an outline, only this time make sure to set the Joins option to Round.
Finally add a couple of highlights to the top and right side and a vertical divider towards the center, making sure to send all the tip’s elements to the back (right click > Arrange > Send to Back). You should also group the elements together (Control-G) so that things won’t end up being misplaced.
Add some “hair” to our little old pumpkin, by drawing a couple of curved paths using the Pen Tool (P), keeping the stroke Weight set to 1 px and the Cap to Round.
Finish off the icon by adding three diamond like highlights towards its middle right section, which will have their Blending Modes set to Overlay and their Opacity levels to 60%.
6. Creating the Gravestone Icon
As soon as you’re done creating the pumpkin icon, you can lock its layer, and move on to the “gravestone” one and start working on it.
Let’s start with the base of the grave by creating a 66 x 12 px rounded rectangle with a 4 px Corner Radius, which we will color using #a09793, and then position towards the middle of the smaller inner grid so that it touches its bottom side.
Next, we have to make some adjustments to the shape by selecting its bottom-center anchor points using the Direct Selection Tool (A), and then deleting them by pressing Delete.
As soon as you get rid of the anchors, use the Control-J keyboard shortcut in order to close the path.
Once you’ve adjusted the shape, give it a 4 px outline using the Offset Path (right click > Object > Path > Object Path) which you will color using the same color that we’ve applied to all our outlines (#392a16).
Since I feel that the bottom corners of the outline are a bit too hard, I thought we should adjust them by selecting their anchor points using the Direct Selection Tool (A) and giving them a 2 px Corner Radius.
Using a similar process to the pumpkin icon, start adding a couple of highlights and a shadow to give the shape some depth.
Once you’ve added the highlights and shadows, add a 66 x 1 px rectangle just above the shadow coloring it using the same color as the rest of the outlines (#392a16).
Add a bunch of cracks to the piece using the Pen Tool (P) and give them some highlights where you feel it’s necessary. Then select all the shapes and group them together using the Control-J keyboard shortcut.
Let’s move on to the upper section of the icon, and start working on the stone itself by creating a 52 x 98 px rounded rectangle with a Corner Radius of 26 px. Color the shape using #66605e, and then adjust it by removing its bottom center anchor points using the Direct Selection Tool (A) and finally positioning it above the bottom section making sure to vertical align the two.
Give the stone an outline, and then add a highlight and a 4 px tall shadow where its bottom sections meets the base of the gravestone.
Quick tip: Where the workflow is similar to the previous steps I won’t be repeating the entire process since it will be weird, but I will give you indications where things need to be done a little bit different. In the present case since we already went over the process of creating the highlights and shadows, I trust that you should be able to apply what you’ve learned in the previous steps.
Now, let’s give the stone a texture similar to the one used for the pumpkin by creating a couple of 4 x 4 px squares, which we will color using #514a48. It would be a good idea to group the texture’s elements since you’ll want to be able to keep them in place.
Once we’ve added the texture, we can continue the detailing process by adding a couple of cracks and some highlights underneath each of them using the Pen Tool (M).
Add two vertical highlights, by drawing a wider 2 x 72 px rectangle and a narrower 1 x 72 px one to its right side at a distance of 1 px. Color the shapes using white (#FFFFFF) and then set their Blending Modes to Overlay as we did with the previous ones, while lowering their Opacity levels to 20%.
Position the highlights to the right side of the gravestone so that their bottom sides touch the stone’s shadow.
Now as you’ve probably already noticed, the top side of the highlights overlaps the highlight of the stone itself, which we will need to correct by adding a clipping mask.
To do that, simply create a copy of the stone’s highlight, and then using the Direct Selection Tool (A) remove its outer anchor points, and then close the resulting path by pressing Control-J.
Then simply select the new shape and the two vertical highlights and right click > Make Clipping Mask.
Quick tip: in case you’re wondering why I prefer using clipping masks instead of Pathfinder, well the answer is really simple, while Pathfinder could achieve the same result, it won’t allow me to adjust my shapes later on if I find that I need too, which for me is a deal breaker.
We’re almost there, but something seems like missing? Oh, right, the cross.
Let’s grab the Rectangle Tool (M) and create a 16 x 6 px shape which will act as the horizontal line and another 6 x 22 px one, which will act as the vertical one.
Position the horizontal line towards the top section of the secondary line so that you have a gap of 6 px between the two. Then, color the shapes using #392a16, group them (Control-G) and then position them towards the top side of the stone, aligning the cross to the middle.
Using the Rectangle Tool (M) create a 20 x 8 px shape, and then color it using a dark grey (# a09793). Since this will act as the name plate, we will have to stylize its corners by creating four 4 x 4 px circles which we will use in combination with Pathfinder’s Minus Front option to create those nice looking inner cutouts.
Now, since the Offset Path effect won’t be able to create an accurate outline, we will have to create it manually by drawing a 28 x 16 px rectangle which will follow the same stylizing process as before, only this time we will use four 8 x 8 px circles.
Once you have the outline shape, simply color it using #392a16, and then make sure to position it underneath the plate itself.
Add some highlights to the plate and then using the Rectangle Tool (M) draw two horizontal lines, one thinner and one thicker which will represent the name.
Finally add two 2 x 2 px circles to each side of the plate, which will act as a pair of little screws holding the plate, and a shadow underneath its outline to give it more depth.
Add the three little diamond shaped highlights towards the top right corner, by creating a copy (Control-C > Control-F) of the ones from the pumpkin icon.
Since at this point we’re pretty much done with the gravestone itself, it’s time to start working on the little skull.
First, create a 14 x 14 px circle and color it using a light grey (#d3c6c1). Then, add a 10 x 6 px rounded rectangle with a 1 px Corner Radius just above it, coloring it using the same color.
Now, with both shapes selected, give them an Offset of 4 px making sure to group them together (Control-G) and then position them towards the lower left corner of the stone, so that the jaw’s outline touches the outline of the grave.
Add a pair of eyes to our little skull, by creating two 4 x 4 px circles (#392a16) which we will distance at 2 px from one another, and then position towards the middle lower section of the skull.
Then add a little nose and two teeth insertions to make the object look like an actual skull.
Finish off the skull by adding a nice all-around highlight, and two overlapping elliptical ones towards the top section of the skull.
Lastly, let’s add the little blood drips from underneath the skull.
First, select the Rounded Rectangle Tool and create a 2 x 9 px shape, which we will color using a dark red (#c95b55), and then adjust by removing its top center anchor points in order to give it a flat edge. Then create a copy and adjust it by shortening its height to just 4 px, and position it on the original’s right side leaving a gap of 2 px between the two.
With both shapes selected, give them a 2 px outline using the Offset Path, and then position them towards the left side, underneath the skull, so that the red fills touch the top side of the grave’s grey fill.
Since we want the two drip lines to be connected, we will add a 2 x 2 px square in between them, which we will adjust by cutting out a 2 x 2 px circle from its lower half.
Finish off the gravestone icon by adding a couple of highlights to the blood drips, using the same Overlay Blending Mode but a slightly higher 50% Opacity level.
7. Creating the Eyeball Icon
We are now down to our final icon, the eyeball one. As usual this means we will be locking the “gravestone” layer and move on up to the next and final one.
Using the Ellipse Tool (L) let’s create the base fill for our eye, by drawing a 64 x 64 px circle, which we will color using a dirty grey (#d3c6c1), and then position it towards the bottom side of the third grid set leaving a gap of 7 px between it and the smaller inner grid.
As always, don’t forget to give it that 4 px outline.
Give the inner fill a ring highlight with the Blending Mode set to Overlay and the Opacity to 50%.
Since the eyeball itself is slightly rotated so that its iris will be looking up, we will have to add a second circle over the inner fill that we already have, and position that towards the top, so that the current fill will act as a bottom shadow section.
First, select the fill, and create a copy after it (Control-C > Control-F), which we will position towards the top at a distance of 6 px from the original. Then change the shape’s color to something brighter (#e5ddda), making sure to mask it so that it will remain confined to the boundaries of the underlying circle.
Also, since the ring highlight needs to sit on top, we will have to select it and bring it to the front by right clicking > Arrange > Bring to Front.
Now, let’s add that texture that we’ve used for all the previous icons, only this times mix it up a little by drawing both 2 x 2 px squares and a couple of 1 x 1 px ones, which we will color using a darker shade of grey (#bdb1ac).
Leave the center of the eye free of any details since they won’t be visible once we add the inner iris section.
Start working on the iris, by drawing a 30 x 30 px circle, which we will color using a swamp green (#6a6e48), and then position towards the top section of the main eye fill, at about 13 px from its top side.
Give it a 4 px outline, and then add a smaller 14 x 14 px circle to its center which will represent the pupil.
Give the iris a ring like highlight, making sure to set the Blending Mode to Overlay and the Opacity to 20%.
Start adding a bunch of scattered 1 x 1 px squares (#392a16) which will give it a nice looking texture.
Next, start adding a bunch of circle like reflections to the top right and bottom left corners of the iris, using the same Blending Mode and Opacity level as before.
Give the eye a visual pop by adding a overlaying highlight over the top half of the iris, making sure to mask it using the green shape from underneath.
Use Overlay as the Blending Mode and crank up the Opacity to 30%.
Add a subtle shadow underneath the iris’s outline, by creating a copy of the later, and moving it towards the bottom by 2 px.
Change its color to #d3c6c1, and make sure to position it underneath the outline and not the other way around.
Grab a copy of the diamond shaped highlights from one of the previous icons, and position it towards the right side, and then add two more circular reflections to its left to really make it shine.
As with the pumpkin icon, I’m going to give you the ability to get creative and draw your own version of this cute little eye stabbed icon.
As always, keep it consistent, use as much details as you can, and don’t forget to keep those outlines at 4 px.
Huurraay we’re finally done guys!
I really hope you’ve enjoyed the tutorial and most importantly learned something new during the process. That being said, I’m looking forwards to seeing your final designs, and if you have any questions just leave them in the comments section and I’ll get back to you in a jiffy.
And for more resources like these, join our Arsenal Mailing List!
Texture Tutorial: using metal and rust textures to destroy a design
What’s in the pack?
A little while ago, there was one of these huge metal dumpsters sitting in a parking lot. Since no texture library is complete without rust and metal textures, I got my camera out and shot as many images I could of the banged-up monster. The textures range from subtle speckles in the paint to massive rust damage. This makes this pack highly versatile, and will help you bring either subtle touches or nuclear damage to your pieces.
The textures can be used as overlays, or pasted in layer masks. There are 45 textures in the pack, sized at 3264 x 2448 pixels.
How can I use these textures?
Well, I’m glad you’re asking, because just like with my photocopy noise textures pack, I’ve taken the time to write a little tutorial. We’ll be using OKPants’ sweet Road Hog tee design pack as the base artwork for our experimentation. What’s the Road Hog tee design pack, you ask? The Go Media team wrote a very convenient blog post to answer the questions you could have.
This tutorial is rather short, and takes advantage of layer masks and blending modes. Count around an hour of playtime in both Illustrator (Ai) and Photoshop (Ps). Plug your headphones, press play on some nice music, and let’s go.
The starting point: preparing the Road Hog design to our liking
The Road Hog tee design pack includes a biker/Americana inspired design, that you could take apart and re-arrange to your liking. Or, like me, you could just leave it in one piece. Here’s a shot of the design in Ai. This is the “sea foam” color palette.
The design also comes in a black and white color palette, an “heritage” color palette (rust tones), and an “Americana” color palette. Feel free to choose the one you prefer for this tutorial.
The original sea foam palette is nice, but the tones are a tad too strong and saturated for my taste. After a bit of research on Colourlovers, I managed to find a more subdued version of the color palette. After using the magic wand (Y) and the Select > Same > Fill color menu a few times, our base art was recolored.
The re-coloration process is really easy since the design is simple and the vectors well constructed. Just make sure that all of your shapes are ungrouped and unlocked, and it should go smoothly. I switched the bright yellow to the faded yellow at the left of the color palette image (#f0eec1), the main blue hue to the palette’s faded blue (#b2dabf), and the black to the dark brown/purple (#5c4a4e) at the right of the palette. I created the darker blue by lowering the brightness value of the light blue, which gave me #727d71.
After recoloring the artwork, I added an outline to it. There are multiple ways to do so, but here’s how I do it:
- Make sure all of your elements are grouped together
- Duplicate the design
- Merge the bottom copy in one shape using the pathfinder’s Unite function
- Change the color of the merged shape to #f0eec1. I chose the light color because I thought at that stage that the background of my final piece would be dark (the design has been hidden in this shot.)
- Finally, turn the design back on, and use the Offset path function (Object > Path > Offset path) to create the outline. I use Offset path as opposed to a stroke, because the result looks more polished. The downside to that is that unlike a stroke, you can’t easily edit the width of the outline once it’s been created. A few things about the values I’ve used: the thickness of the offset is set at 1/8th of an inch, and the joins to round for a softer feel.
- We’ve got ourselves an outline. To make things a bit cleaner, you can run the pathfinder’s unite function on that outline group one more time. This will fuse the multiple shapes that compose it together, living us with one big, clean entity. I’ve highlighted in red the area where the most simplification will happen.
Now that we’ve got ourselves a recolored and outlined design, it’s time to move things to Photoshop.
Setting up the stage in Ps
Much like when we were playing with the Awaken design, our Ps document will be an 18″x24″ @ 300 dpi canvas. This time, it’ll be setup in a portrait orientation.
I’ve completed the setup of my document with guides. I might have created a few too many, but oh well. I have guides at the 1, 2, 8, 9, 10, 16, and 17 inches marks vertically, and 1, 2, 11, 12, 13, 22, and 23 inches marks horizontally.
As I’ve said when we were preparing our vectors and adding an outline to them, my original intentions were to have a dark background on our piece. After progressing in my design, I realized that it wouldn’t work very well, so I went back and made sure that my background would be light instead of dark. For the sake of brevity, I’ll spare you that back and forth in this tutorial. So let’s skip directly to the correct layer order for a light background with a dark border.
Let’s fill the background layer with that faded yellow (#f0eec1) from our color palette.
On top of that layer, create a new one, filled with our dark brown this time (#584c4e).
We’re going to take advantage of the Arsenal’s vintage poster borders texture pack to reveal the underlying yellow layer to make it look like there’s a dark border around our design. The process is very simple, and consists of pasting one of these textures (I used the first one in the pack) in a layer mask. Jeff made a video with step by step instructions, and it’s visible here:
The result of that manipulation is the following:
Note that if you don’t own the poster border textures, you could paste any other grunge texture in the layer mask. This series of free vintage film plates textures from Lost and Taken would be an interesting alternate, although a tad too intense in this example:
Anyways. Once you’ve prepared your background, it’s time to move along and import our vector design in our Ps document.
Pasting the design from Ai
That’s probably the easiest step: simply copy your design in Ai, and paste in as a smart object in Ps. I sized mine to be around 16 inches wide.
Texturing the design itself
It’s finally time to use the metal dumpster textures. Place metal-dumpster-textures-018-sbh.jpg above the design.
The elements of the texture we’re interested in are these dark scratch marks. In order to extract them, we’ll need to desaturate the texture (CTRL/CMD+SHIFT+U), and to change its blending mode to Screen.
It’s not yet very exciting, I’ll give you that. Next, we’ll invert the texture (CTRL/CMD+I).
We’re already starting to see these scratches impact the design as if it was painted on metal and exposed to things scraping it off its support. To further the effect, we’ll play with the level palette (CTRL/CMD + L), in order to increase the contrast of the texture.
A few notes about my Levels values: the 100 on the left is the value for the dark tones. It means that I’ve made the dark pixels of the texture darker than what they originally were. The 0.75 is the value for the mid-tones. That slider is normally set at 1. Bringing it to 0.75 means that the mid-tones are also going to be darker. Finally, the 175 on the right is the value for the light pixels of the texture. It’s set to 255 by default. Bringing it down to 175 means that the light pixels are actually going to be lighter. Darker blacks and grays + lighter whites = high contrast texture.
Finally, I’ve leveraged a layer mask to allow the texture to show only on the design and not on the background.
To create such a layer mask is easy. CTRL/CMD+CLICK the thumbnail of your design layer to create a precise selection of its content, then click the new layer mask button at the bottom of your layer palette.
Following a similar process, I also added metal-dumpster-textures-022-sbh.jpg to the design. Its effects are much more subtle, but you can see them in the gear behind the skull/wings/bones element.
My levels values were a bit different:
It’s also to be noted that the texture was not inverted, and put on the Soft light blending mode at 25% opacity. I chose to do so because the results were less aggressive than when using Screen. I’ve also confined its effect to the design only by using the same layer mask process than before.
The next step was to impact the design layer even more than with its two textures. In order to do so, I gave it its own layer mask, and pasted metal-dumpster-textures-001-sbh.jpg into it. After sizing it to cover most of the design, and playing with levels to bring its contrast to new heights, this is the result:
The original texture
Playing with levels
Impacted areas details
To increase the worn feel even further, I created a layer group containing the design’s layer and my texture. I then duplicated the background dark brown layer’s layer mask (CLICK & DRAG + ALT/OPTION+SHIFT) to it. The result isn’t very visible, but some of the mask’s grain lets the dark brown show through.
If the textures at the previous step are important because they give their character to the design elements themselves, the ones we’ll apply now are just as important. They participate to tie the piece together, by giving their artifacts to the various design elements and the background in a continuous manner. You can choose to apply a lot of them, or just a few. I have three in my case.
The first one is metal-dumpster-textures-012-sbh.jpg. As you can see, it’s a fairly clean texture. The main elements I’m interested to see passed on to the design are those black, dirty marks. They look like smeared paint.
After placing the texture in the design (rotated 90° counter-clockwise), desaturating it, I’ve leveraged the levels to get the dark and mid-tones much stronger.
Once the blending mode switched to Soft light, and the opacity lowered to 50%, the result brings some subtle darker areas in the top left of the piece. It’s like some liquid slightly stained the art.
The next to last texture we’ll use is metal-dumpster-textures-037-sbh.jpg. It’s a texture that I use as a grain texture. There are only a few speckles of rust here and there, and the rest are a few light dots.
After desaturating it and playing with levels, here’s what the texture looks like:
And below is the result on the piece after switching it to Soft light @ 50% opacity. It’s very subtle, but still adds a little something.
Finally, the last texture I’ve used to add more of the same dirty stain type of finish to the poster is metal-dumpster-textures-030-sbh.jpg.
Nothing special to add to the process used before, other than because this one was a bit intense, I’ve put on Soft light @ 35% opacity only.
The last touches
We could add more textures to the piece, but it wouldn’t add much to the design. It’s better to stop there. Now, you could either leave the piece here, or add just a tiny bit more of contrast and grain. Either way is fine by me, and will equally look nice. You could also add fake folds too, but we’ll get to that in an upcoming tutorial.
The first of the finishing touches is to create a layer that contains a merged copy of all the layers of our piece. There’s a keyboard shortcut for that: CTRL/CMD+SHIFT+ALT/OPTION+E. Simply select your top layer, and press the keyboard shortcut. It will generate a new layer containing that merged copy of your piece. I renamed mine to “Comp” and placed it in its own layer group.
Next, make two copies of that layer. Name the bottom one Aged 2, and turn the top one off for now.
Download this Aged 2 action created by the good peeps at Go Media for an old tutorial, and run it on the Aged 2 layer. Put the layer on Soft light @ 25% opacity. The action created a photocopy type of effect, with something looking like old ink and grain. Below is a close up shot before and after switching the blending mode.
Finally, we’ll use the stamp effect action Jeff released a little while back. Run the action on that last copy of the Comp layer we have remaining. The action will create two layers, one with just the black pixels of the stamp effect, and another one (usually turned off) with some more details. Turn both of the layers on, merge them together, and call the result Stamp. Place that last layer on Soft light @ 25% opacity and you’re done!
If you want more info about the action before buying it, you can read this quick blog post written for its release.
And the piece is done! Using the metal dumpster texture pack, we were successfully able to age and destroy the design. You should totally mock-up your piece to impress your clients:
That’s it for me today. If you have any questions or suggestion about the tutorial or the textures, don’t hesitate to use the comments, or to tweet at me.
Hello there! Simon from Studio Ace of Spade here. Long time no see. I’m here to introduce you today to a texture pack I’ve created, called the photocopy noise texture pack. I’m delighted to announce that it’s finally on sale at the Arsenal!
What is the pack about?
What’s so special about this texture pack? First of all, these are hand-made textures. They were made using an old photocopier that had a toner on its last leg. The result is a pack of six fantastic noise textures. The process was simple: I created a black document in Ai, and printed it as many times as I could before the toner gave up. Because it was almost ready to throw away, it wouldn’t print a perfectly black sheet. I got these black rectangles, speckled with white spots and stripes. Once scanned in, cleaned up, and inverted, these make up for perfect noise textures.
A closer look at the content
Some technical data: you get six textures, that are around 4760×6400 @ 600 dpi. Here are what they look like:
How can I use these?
I thought you’d never ask! In order to demonstrate the possibilities of the textures, I’ve put a quick little tutorial/demo together, using Jeff’s Awakened t-shirt design pack as the base. We’ll use both Ai and Ps for this. Here’s a preview of what we’ll be doing:
Basically, we’ll use these to age Jeff’s design, along with a few other tricks here and there. Here’s a 100% crop, to get a better sense of what these textures are able to do:
Note that if you haven’t purchased the Awakened t-shirt pack, or have no idea of what I’m talking about, you should go read and watch more info: over here.
Let’s get started
Step 1: document setup
Jeff’s illustration is quite neat, and would look quite awesome on a print. So, let’s go ahead and create a new 24 inches wide by 18 inches tall Ps document @ 300 dpi.
Once you have that new document setup, fill its background with dark gray (#231f20), and setup guides for the center and margins. I might have gone a tad overboard with mine. My vertical guides are at the one, two, 11, 12, 13, 22, and 23 inch marks. My horizontal guides are at the one, two, eight, nine, 10, 16, and 17 inch marks.
Oh, and if you’ve read some of my other tutorials before, you’ll probably remember that I’m a stickler for proper layer naming and other Ps etiquette stuff. My background layer is named bg – #231f20, which gives me both its functionality and its color.
Step 2: importing the design
Let’s have a look at Jeff’s design:
As you can see, there are quite a few elements that compose it (feathers, purple circular element, red circles, white circle, blue geometrical element, silhouette, and off white stars). I could simply select everything, and copy and paste it in Ps. The only issue with doing that is that it won’t allow us to individually texture the elements. Since I want to do something refined and individualized, I won’t go that route. We’re going to copy and paste each element one by one. It’ll be a bit long, but worth it in the end.
Use the main image as a reference point to position your elements, and make sure that they’re always sized at 100%. Also, don’t forget to paste the elements as smart objects, so they retain their vector characteristics. It’ll be crucial for later.
Note: you may have to center or nudge elements manually.
The purple circular pattern.
The red circles.
The blue geometrical element.
The white circles.
The black silhouette.
Aligning the stars back in place (the top star is at the intersection of the top red circles).
Nudging the wings back in place.
Here’s a view of how the design elements are placed compared to my initial guides. If you want your design or some of its elements to be bigger or smaller within the finished print, now is the time to adjust the sizes. For instance, I’ve decided to size my design so it reaches the smaller rectangles inside of my guides.
And here’s a view of my layer stack so far.
Step 3: let’s roughen these vectors up
The next step will involve the use of Illustrator’s roughen filter (Effect > Distort and transform > Roughen). I learned about the effect through that 2011 Method and Craft article by Simon Walker. Basically, the effect distorts your paths and adds more or less subtle variations to them.
We’ll be applying the effect on all of the elements of the design, minus the wings. This is where retaining the smart object quality of the elements pasted in Ps comes handy. You simply have to double click on the layer thumbnails of the smart object in order to be brought back to Ai, and to be able to edit the vector element.
Let’s start with the purple circular pattern element. I’ve turned off the other elements of the design for better legibility, but you don’t have to.
Once you’ll double click on the layer thumbnail, Ai will open and you’ll be able to edit just that element.
Let’s select our element, and bring up the roughen filter (Effect > Distort and transform > Roughen). I suggest zooming in a little bit, in order to fully appreciate what the effect does to your paths. Oh, and tick that “Preview” box to see what’s happening.
Obviously, the default values are a bit extreme in terms of result. After a little bit of tinkering, the values I’ve settled on are the following:
- Size: 0.1%, relative
- Detail: 50/inch
- Points: smooth
Note that you can come up with your own values. These should be considered as a starting point for your own exploration. Also, you could decide to expand the various elements from strokes to paths, or to leave them as is. Once you’re happy with the filter’s values, validate them. The next step: save your work (CTRL/CMD+S), close the file in Ai, and head back to Ps for a little surprise…
The effect is applied! Isn’t that neat? Now, you’ll simply have to go through the same process for the other design elements (minus the wings, once again: the halftone effect they have is enough). I personally used the same values for the roughen filter for all the elements, as it gives consistency to the final piece, but you could spend the time to find the perfect values that works the best for each specific part of the design. Below, a few shots of the process, up close:
Note the special values I’ve ended up using for the white circles: the effect wasn’t visible enough with the other ones I settled on earlier, so I upped the ante a bit. I did return to my previous values for the other elements though.
And done with that part.
Step 4: textures!
Finally, we can play with textures here. The photocopy noise texture pack is made of black and white textures, which will somewhat dictate the workflow we’ll have with them. First, we need a bit of a refresher about blending modes. This wonderful article by PhotoBlogStop will give you every detail you ever wanted to know about them, including math (!), but we’ll focus on Screen:
Screen: Similar to the Lighten blend mode, but brighter and removes more of the dark pixels, and results in smoother transitions. Works somewhat like the Multiply blend mode, in that it multiplies the light pixels (instead of the dark pixels like the Multiply blend mode does). As an analogy, imagine the selected layer and each of the underlying layers as being 35mm slides, and each slide being placed in a separate projector (one slide for each projector), then all of the projectors are turned on and pointed at the same projector screen…this is the effect of the Screen blend mode. This is a great mode for making blacks disappear while keeping the whites, and for making glow effects.
The most interesting part of this quote is the emphasized sentence: “this is a great mode for making blacks disappear while keeping the whites, and for making glow effects.” It just happens that the noise effects in the textures from our pack ARE white speckles and stripes. So we simply have to put the textures on screen to retain just their noisy part, and the rest shows up as transparent. After that, if the effect is too strong, you simply play with the opacity slider of the texture layer. Let’s put this into practice by adding some noise to our background layer.
Go ahead and place photocopy-noise-textures-sbh-001.jpg in your design. It should be just above the background layer, and sized to cover the whole background.
Give it a quick sharpening (Filter > Sharpen > Sharpen), and simply change the layer’s blending mode to Screen. As you can see, the effect is quite strong.
We’re simply going to lower the opacity of the layer to 25% for something a bit more subtle.
Also, I’ve given the background elements their own layer group.
It’s time to start adding our subtle noise to the rest of the design. We could simply use the texture clipped over each element, and tinker with the opacity sliders to create some subtle overlays. But this would show the noise as white or light gray speckles over each design elements. Most of these being line art, we wouldn’t see much of an effect.
We’re going to use another trick from our bag, and paste the textures in layer masks. Remember that whatever part of a layer mask that’s white shows the art, and whatever part of it that’s black hides it. Armed with knowledge, we can deduce that pasting the textures as is will simply obliterate the designs. Nothing subtle here. What we can do however is to invert the textures once they’ve been pasted in the layer masks. From there, playing with levels to increase or decrease the intensity of the effect is child’s play.
The process to paste a texture in a layer mask is easy:
- Add a layer mask to the design element you’re interested in impacting (with the layer highlighted, go to Layer > Layer mask > Reveal all). Make sure to click the little chain link between the layer and the layer mask to make it disappear. This will allow you to move or resize the content of the layer mask without changing the design element itself
- Open your texture file, copy its content (CTRL/CMD+C)
- Go back to your design, and ALT/OPTION + CLICK your layer mask. This will allow you to get access to and edit the content of the layer mask itself, rather than your design
- Paste your texture (CTRL/CMD+V)
- Resize and edit the content of the layer mask at will
- Click back on the design element and admire the result of your work
Here are some images of the process with the wings. I’ve used photocopy-noise-textures-sbh-001.jpg again.
Layer mask added and unlinked.
Pasting the texture in the layer mask.
Resizing the texture to cover the whole canvas. You have access to the same transform controls that outside of the layer mask (CTRL/CMD+T or CTRL/CMD+SHIFT+T for proportional transformations).
Inverting the texture (CTRL/CMD+I).
Using the levels palette (CTRL/CMD+L) to increase the contrast.
Admiring the result.
Comparison with the layer mask turned off.
Some of impacted areas highlighted.
As you can see, it’s quite a simple process, and the result with the photocopy noise texture pack are just the right amount of subtle.
Following a similar workflow, I worked my way through the other elements of the design, using textures #1 to #5 of the pack (#6 will used for the final finishing touch).
Below, some before and after pictures for each element:
Purple circular pattern, before
Purple circular pattern, after (background turned off for better effect appreciation)
Layer mask details
Red circles, before
Red circles, after
Layer mask details
It can seem that the effect is too subtle. Here’s a 100% crop to convince you otherwise:
Blue geometrical element, before
Blue geometrical element, after
Layer mask detail
White circles, before
White circles, after
Layer mask detail
Layer mask detail
Layer mask detail. Note that I’ve used the same textures than for the silhouette. I’ve simply moved it to the top right a little bit.
And here’s the full design after all that process:
We’re almost done. It’s time for the finishing touches.
Step 5: let’s wrap this up
Now that all of our design elements got their individual weathering treatment, it’s time to tie everything up together. In order to do so, we’ll first add a layer mask to the whole design layer group, and paste one of our textures in there. This will unite the elements together visually, by giving them a consistent weathering. I used photocopy-noise-textures-sbh-004.jpg for that (the one with the heavy striping).
Once that’s done, we’ll add two more textures at the top of our layer stack. The aim is the same: to tie all the elements visually together, by impacting them all with the same element. First, let’s add photocopy-noise-textures-sbh-005.jpg to our design. Make sure it fills the whole canvas.
Let’s make it significantly darker, so its effect will be much more intense.
After that, change its blending mode to Screen.
Since the effect was a tad overbearing, I lowered the opacity to 25%.
We could stay there, but I’d like a effect similar to a vignette, that would detach the center piece from the background a bit. I’ll be using photocopy-noise-textures-sbh-006.jpg to accomplish this. Let’s place it into our document, in a way similar to the image below (it’s been rotated upside down, and scaled up so it covers the whole design). I’ve also given the two top textures their own Global textures layer group.
Once it’s in place, simply change the blending mode to Soft light, and lover the layer opacity to 25%. This gives a much softer result than Screen, and still let’s the background’s subtle noise show through.
And we’re done! You could take the time to mock this up on a poster mockup template if you wanted to:
I hope you liked going through this tutorial as much as I liked writing it. I also hope it convinced you to get the photocopy noise texture pack, as well as Jeff’s Awakened tee design pack if it isn’t already done. If you have any questions, feel free to tweet at me (@simonhartmann)! I’ll also be watching the comments in the next few days. Thanks again for reading, and until next time, cheers!
A bit of background information
<Fair warning> the post is fairly long (6000+ words), but I deemed it necessary to take the time to meticulously explain the process I went through to re-design this poster. For instance, I took the time to detail my research and mood-board steps, which are often overlooked in tutorials. I also detailed as much as possible my “trial and error” style approach to choosing typefaces, and to constructing typeface arrangements. If you are a seasoned veteran, these extra steps will definitely seem boring, if not frustrating. Just skip them!</fair warning>
For those of you that haven’t been following, we released our 22nd vector set a few weeks ago. Steve Knerem, the artist behind the set’s content, decided to create a rockabilly themed poster to demonstrate the set’s potential. He then proceeded to write a tutorial about it. We said that we would expand a bit on Steve’s tutorial to bring his design to the next level, and to make it a tad more truthful to the rockabilly vibe.
What are we going to do?
First, we’ll be doing some research. There’s plenty to be learned from gig posters of the 1950s and 1960s, in terms of typefaces, composition, color palettes, etc. Our goal will be to identify some design elements and patterns from that era, and to improve Steve’s design based on them with the tools we have available now in the second decade of the XXIst century.
Second, we’ll see how we will recreate the patterns we’re seeing in our research to improve Steve’s original composition, while respecting his original concept. I’m anticipating mostly type work at this stage.
Finally, Steve’s original goal was to work towards a screen printed poster, hence his limited color palette and work primarily in Illustrator. I’m going to show you some of the techniques I use to texture and weather artwork, to make our clean and digital vector art look a tad more analog, and just like if you had pulled the poster out of your parents or grand parents’ attic after all these years. Sounds fun? Then let’s do this!
Research, research, research
Well, the easiest way to search for something these days is to google it. So I went ahead and researched using the following keywords:
Follow the links to see the results I encountered. I was hunting in the first couple links of the web search, as well as in the image search results.
There are already a few things that jump right to my face just by looking at these:
- The vibe difference between the 3 styles (rockabilly, 50s, and 60s) is pretty strong
- The rockabilly posters draw a lot on the Kustom culture
- The crazy gig posters with a bunch of colors and eerie designs started more in the 60s. This probably comes from psychedelic rock starting to be mainstream, printing techniques improving, and full color printing becoming cheaper
- Condensed, bold or extra bold sans-serif are among the most readable typefaces
- And Steve’s poster is even showing up in the search!
A look up-close
Let’s start with the rockabilly search. I ended up also exploring some of the links the web search turned up. There’s a pinterest board in particular called Rockabilly, Greaser, Pin Up, Posters & Art that was pretty rad. Just look at these:
While the Go Johnny go poster is cool, I prefer the Gene Vincent/Eddie Cochran one. This was a rather cheap poster to design and print: I count only 2 colors (black and red), and there’s no custom illustration. The eye gets attracted by the typeface relationships and color variations. One of the ways to add a few graphical elements is to use that star symbol. I see you coming already by saying that there are some other, way cooler looking other pieces on that page. There’s that Coney Island rockabilly festival poster, that Viva Las Vegas poster, and these 2 Social Distortion pieces. Well that’s the whole problem: a lot of the Rockabilly art that we see nowadays is contemporary art with a flair that’s inspired by the culture behind that music, the Kustom culture, etc. And the faithfulness of their emulation of the original design codes of the gig poster artists of the 1950s and 1960s varies greatly. That being said, looking at the typefaces they use, we can still see the affinity for either the hand painted sign type vibe, or the whole Sailor Jerry/tattoo vibe, or the condensed, cheaply printed, sans-serifs I was talking about earlier. Steve’s art matches the Sailor Jerry tattoo vibe pretty well, so that’s definitely a direction we can explore.
A look at the 1950s posters
These have a bit more color, and feature performers portrait. The “vintage diner” style of type seems to come from there. Looks at the BB King or T-Bone Walker type treatments. There are frames and not-quite-accurately-square color rectangles used as supports for content blocks, among other little design elements that immediately make us associate these posters with that era (stars, horizontal dividers, etc.). More to keep in mind.
And here are the 60s! Enter the psychedelic scene… There’s also that cut paper look. These are getting away from the style we’re trying to emulate for sure.
So, it looks like we’re trying to find a happy medium between the boxing style posters of the 1950s and the modern interpretation of the Rockabilly/Kustom/Sailor Jerry approach. We’ll pay a special attention to type, and might modify or add to the borders already put in place by Steve in his original art. Finally, we might give some hierarchy to thew type with some box elements or dividers. And let’s go!
First: the type elements
Here are the type pieces from Steve’s design:
The title features a type midway between western and country. That’s the good part. The main issue I have with it are these pre-made grunge scratches on it.
The band names features some solid options (The Blue Storm, Hail Hail Hellstorm, maybe Jack is coughing), and some less solid ones (Home Grown Heroes, The Billies, Sound of Thunder, Young Turtles, 1950s Alive).
The gig information space is written in that condensed slab serif. I like it, but maybe we can find a more fitting one. And here are type pieces from our references:
I think it’s time to start looking at our typeface collection, at the Lost Type Co-op, and at Dafont.com. Working at Go Media as its perks, as they’ve accumulated a solid type library over the years. But since it’s not the case for everybody, let’s see what we can find before digging into the secret vault here.
The Lost Type Co-op
Lost Type has quite a few candidates: Mission Gothic, Dude, Mission Script, Sullivan, Bemio, Arvil Sans, Oil Can, Outage, Aldine Expanded, Duke, Onramp, and Tightrope. The cool thing is that you can get a personal license (and sometimes even a commercial one!) for these typefaces for free. But you should totally give a few $$$, as these are so amazing.
(Images via Lost Type Co-op and its various contributors – © all rights reserved)
Let’s be honest, Dafont is a place listing cool typefaces but also some very lame ones. That’s why I’m very wary of using that site anymore. But maybe just for today we can find some good surprises. Remember, not all of these are free! Most of these, in fact, are free for personal use only. You’ll need to get in touch with the font creator if you want to use them on a commercial basis. The two categories I focused my searches on are western and retro fonts. And I have quite a list there too. Anderson Four Feather Falls, Anti Hero, Laredo Trail, Pointedly Mad, Regulators, Alpenkreuzer, ARB-218 Big & Blunt, ARB-66 Neon JUN-37, Franklin M54, HFF Sultan of Swat, NPS Signage 1945, Phat Phreddy, Super Retro M54, and Tattoo Ink.
(Images via Dafont.com – © all rights reserved)
But aren’t we supposed to design something at some point?
Agreed! But at the same time, all that research process is necessary to make sure that you’re producing relevant concepts. A rockabilly poster wouldn’t look rockabilly with the Matrix typeface on it.
There, it starts
So, now that you have downloaded and installed all the typefaces, that you tracked down the file you created when following the first part of the tutorial, and created a mood board with all your references, let’s do this. I wrote earlier that I only wanted to improve on what Steve did. So the pinup, the car, the guitar, and the microphone are going to stay. They form the core of Steve’s composition, and while they’re not really looking like a vintage multi-act gig poster, I think their impact is undeniable. First step: track down your Ai file from the first tutorial, and save a copy with a name clearly labeling the fact that you’re going to alter your design. For example: if my first file was named gma-vector-set-22-rockabilly-poster-tutorial-c1r1.ai (Go Media’s Arsenal – Vector set 22 rockabilly poster tutorial – Concept 01, revision 01), my new file will be named something like: gma-vector-set-22-rockabilly-poster-tutorial-c1r2.ai. You get the idea.
Now might also be a good time to clean out and to organize these layers, groups, etc. This will make your life so much easier in the long run, I promise.
I mean, check this out: isn’t the sight on the right a bit more pleasant?
Also, since we’re going to move elements around, I can tell that having them properly labelled is super helpful to keep track of them. Also, I’d like to point our something in my newly organized file: I have created 3 layers: art, color palette, and type experimentation. Art could end up getting some sub-layers (which allows to add hierarchy without having to group elements together). Color palette is a layer that just features 5 squares, one of each of the colors we’re using. It’s super useful to quickly switch an element or series of elements to the same color, since even when the layer is locked you can still use the eye dropper on its elements.
The rockabilly throwdown
Let’s start by pointing out the typefaces we’re going to try from that bigger list of contenders we’ve assembled. I typically start by typing the text I’m trying to format in uppercase, lowercase, and in a mix of both to see what character combinations look like. I’ll also add the typeface name in there for you to follow. And make sure you’re on the right layer and that it’s unlocked.
Once that’s done, we can start eliminating a bunch of these. It’s pretty clear to me that we should keep that western vibe in the title. Think about the Coney Island Rockabilly Festival poster vs. the Destination Unknown poster. The tattoo type looks great, but the sailor/pirate vibe is too strong and gets us away from the rockabilly feel in my opinion. Let’s weed out whatever doesn’t fit this declaration of intent.
We still have too long of a list, but it’s better. Other than the obvious western typefaces, I’ve also kept Bemio (both regular and italic), because it has the retro vibe we’re after, and a very dynamic quality. Combining these two (italic for “the” and “throwdown,” regular for “rockabilly”) would be swell. Phat Phreddy has also that distinct retro feel, but it doesn’t seem to sit well with that restrained list. Phat Phreddy is then out. Anti Hero is sweet, but it has a “raw” hand drawn vibe that doesn’t match Steve’s clean and detailed hand drawn vector pinup. Out. Tightrope looks sweet, but feels like too much. Out. Regulators seems a bit plain. Out. Aldine is a tad too expanded, but I’ll leave it in to try. Pointedly Mad seems perfect (think of the Coney Island poster again). Dude is simply too much. Laredo Train seems a tad bland, like Regulators. Out. Anderson Four Feather Falls seems like a solid candidate too. This leaves us to the final four (well, five, but I’ll combine both Bemio styles together).
It’s now time to create title treatments based on these typefaces. I used Steve’s as a base, as his was solid. I just didn’t like the typeface he chose. The other thing I’ve kept in mind is the treatment of “rockabilly” on the Coney Island poster. All of the work happens on the type exploration layer, and outside of the main canvas. I’ve also locked my art layer, just in case. I typed each word individually, and moved them around as needed. I’ve also used the effects arc lower and/or arc upper quite a few times (Effects > Warp > Arc upper/Arc lower – use a negative value for arc lower). The stars are just simple 5 point stars, straight out of the shape tool (radius 1: 25px, radius 2: 50px).
Don’t hesitate to heavily rely on your alignment palette to go faster, and to fine tune the overall feel by nudging the words and elements little bit by little bit. Finally, to make sure that my star groups would be well spaced all the time, I made a proficient use of blends (Object > Blend > Make and Object > Blend > Options). You can read more about the blend tool on Vector Tuts+ and on Bittbox.
Letting a little bit of time pass between these iteration and the moment of having to choose which one I will go ahead with is helpful. I realized along the design process that the Pointedly mad typeface is the one used on the Coney island festival poster. While I don’t want to recreate what the designer of that poster did, I’m currently more attracted by the iterations made with that typeface. There’s also one made with Anderson Four Feather Falls that could be a contender.
I’m going to tinker a tad more these 3:
- For the Pointedly mad option (left), I’ll make sure to visually center the stars, and that the spacing is consistent all around
- For the Anderson Four Feather Fall options (top and bottom right), I’ll make sure to
- Mimic the layout of the Pointedly mad option (add a divider, change were the stars are, etc.)
- Add a divider to the current layouts
Bemio alone wasn’t rockabilly enough. Mix it in with either Pointedly or Anderson, and you have a way stronger result. Aldine looks super rad, but it doesn’t nail the vibe right on the head. It’s somewhat there, but there’s a better option available.
Ah also, I’m going to quickly create a new layer and archive the unused type experiments there. I’m just selecting the type combos I don’t want, and cutting them (CTRL/CMD + X) and pasting them in front on the newly created layer (CTRL/CMD + F). Like that, they’ll stay at the same visual spot, but not on the same layer. Once that’s done, just lock and hide the layer.
After playing a bit, I’m once again in front of quite a few variations on the same theme. My goal is to choose the final one out of the group (minus the final alignment adjustments and other touch ups). If I were to be designing this poster for a client, I’d have to be much more careful about how much I’m spending on just that text piece, in order not to blow the budget. Let’s have a look at the options I came up with.
While the choice is difficult, a winner seems to emerge. First, it looks like option based on a type combo have more impact. Exit for options 2, 4, and 5. The lines are way too thick in option 3. This leaves us with options 1 and 6. I wrote earlier that I didn’t want to recreate my Coney island poster reference, but it looks like my preference goes to the Pointedly mad/Bemio based option. Four feather just looks too complex with all the carved out shapes, and more “western” than rockabilly to me.
After a little bit of clean up (alignments, centering, expanding the typefaces to object, etc.), I have my final title element!
And here’s a comparison with the concept I quickly jotted down:
The concept is on top, the final at the bottom. You see that the spacing isn’t the same, the dividers are thicker and extend further, etc.
Time to remove the old title, and to put the new one in place:
Steve’s title (visible above my art board) used 2 colors (our green and our yellow), as well as outlines and shadows to stand out. Time to get some of that magic working.
Steve used a black shadow behind “rockabilly”, and multiple outlines on “throwdown.” Let’s see what a similar treatment would give. But before that, the first thing you want to do is to create a sub-layer on your Art layer, and to call it title. Then cut and paste your title object in front in that “title” sub-layer. It’ll make the editing much easier, as it will separate the title from the rest of the art. To create the sub-layer, just select your art layer, and click on the new sub-layer button. Label it properly, and place that title in there. We’ll that process of separating elements as we go through the edits, and we’ll have a wonderful layer structure at the end.
Let’s start by doing the black shadow.
Let’s have a look at the layer palette to understand how I created the effect (once again, please label your layers and groups!). I have 2 instances of “rockabilly” there, a yellow one and a black one. I simply copied (CTRL/CMD+C) and pasted in front (CTRL/CMD+F) to get my copy of it. I renamed the bottom one, switch its color to our black, and manually offset it with my arrow keys (6 taps down and 6 taps to the right to be exact). I’m pretty happy with how it makes rockabilly stand out. Next up, the treatment of “throwdown.”
First, we want to switch the word to green. Then, if we look at Steve’s original treatment, there’s a red outline, then a white outline to be able to overlay “throwdown” over “rockabilly” and neutralize what would be a clashing color combo (the green of “throwdown,” the red outline, and the yellow and black of “rockabilly”). I’m not overlaying the words on each other, but for the sake of sticking to Steve’s layout, I’ll redo both outlines.
Let’s paste a copy of “throwdown” in front of itself. Switch the bottom copy to the red of the background, and relabel the layer properly. Then, let’s offset the path to accomplish the outline (Object > Path > Offset path). I used 0.1 inch as the value, and left my joins on “miter” to keep their sharp edges.
Then, by using the pathfinder (the unite function, first option of the top row), I made sure to just keep the outlines of the letters. This simplifies a bit the paths the computer has to calculate.
I followed the same process to get my white outline.
And here’s our result, compared to Steve’s treatment:
Let’s be honest, it’s not great. We loose a lot of the dynamism of Steve’s angled words. And his multiple outlines were motivated by overlapping words, which we don’t have here. So I decided to experiment in a different direction. I selected my top, yellow copy of “rockabilly,” and applied a 4 point black stroke, aligned to the outside of the shape. This gives a lot more punch to the word.
Since I liked the effect a lot, I went ahead and removed the outlines and switched back “throwdown” to yellow. I then gave it the same treatment.
The result is nice, but slightly overpowering the rest of the title’s elements. Time to unify everything.
Four points of stroke on the stars and on “the” was too much. Same of a 6 by 6 arrow taps offset. And the offset on my horizontal dividers was too much too.
After tinkering, my final values are as follows: the offset on “the” and the star group is of 4 by 4 arrow taps. I have them configured to be of 0.1″ in Ai’s preferences. The stroke thickness I used on both is of 3 points. I nudged the stars a bit for a better visual alignment, and grouped my elements together for a cleaner layer hierarchy.
And finally, I’ve decided to switch “throwdown” back to green instead of yellow. It’s closer to Steve’s original title treatment, and puts “rockabilly” forward.
Taa-daa, we have our title in place. The reason why I’ve spent so much time detailing the process for the title is that it’ll be the foundation for the treatment of the rest of the text elements. We’re going to use similar values for offseting what will be offset, similar stroke values, and so on.
The date, time and place
These elements are secondary to the title in the original design.
I’m going to make my version close to the original design, I’ll just be using Pointedly mad for the typeface instead. I might also change the layout of the words a tad.
The layout and typefaces are very similar. I chose to make the date more preeminent than the town. I’ve also used resized stars taken from the title to space “USA”, it’s a cool little detail. In terms of sizes, I started with “August” written at 72 points, and “28” written at 144 points. The other sizes come from there. As you can see, I also gave the date and place their dedicated sub-layer. Time to place the date block in the poster.
And here it is. This updated version takes a bit less room, which I don’t mind. Note the object organized in their sub layer, which you can lock (at least for now).
Time to tackle one of the most important piece of the puzzle, the band list.
Here’s a side by side view of the current version of the list, and of my work-in-progress list. I just copied, pasted in front, and slide on the side the original one. I’ve also created the band list specific sub-layer.
Step one, the “Featuring” title. Like I wrote above, I’m going to take my cues from the main title type element. I used Pointedly mad, and went through the same duplication, outline adding, and offseting processes to get the type element. I then quickly unlocked my title sub-layer to steal one of the dividers over, and just switched its color to green rather than yellow. I resized it using my direct selection tool (A) to fit the width of our band list, and taa-daaa.
Time to tackle the band names themselves. I first started by switching the old list to gray, like that I can write the new version above and use the former as a guide.
Here’s my first complete draft. I’ve used Pointedly mad for Home Grown Heroes, Mission Script (Lost Type) for The Billies, Anti Hero for Jack is coughing, ARB-66 Neon JUN-37 for the Blue Storm, Bemio Italic (with a custom line height value) for Hail Hail Hellstorm, Alpenkreuzer (center aligned, with a custom line height value, as well as a slightly bigger second line) for Sounds of Thunder, Aldine Expanded (with a custom line height value) for Young Turtles, and Sullivan Fill for 1950s Alive. Now, it’s time to remove the old list for good, and to clean up the alignments.
I know for a fact that this list is going to be aligned on the right edge of my poster. So I’m going to cleanly align to the right all of the band names that are on the right side of the list, make sure that the vertical distribution is a bit better, and manually place the names on the left of the list to make a visually compelling band name group. Finally, I’ll make sure that the divider under “Featuring” extends a bit more than all the way to the left of the list (cf. how the dividers of the title block extend).
Here’s my almost complete take on the band list. I’ve moved the name around a bit more, but as you can see, there’s still a weird gap at the bottom right. It looks like I’m going to have to add a band name to visually balance stuff out.
Let’s call them the Hot Rods. I’ll use that Oil Can typeface (Lost Type). I sized “Rods” bigger, centered the text, and used a custom line height value to make sure it looks not too spaced out.
Once you’re happy with the placement, it’s time to switch the text to outlines (make sure there are no spelling mistakes!), and to switch our brand new lineup for the evening with the old one.
And it’s pretty clear that we’re having a problem here. Not only is the list too close to the border on the right, but it’s also obliterating the guitar and the microphone on the left. One remedy: let’s take the size of the band names down a notch. I still want to keep the “Featuring” title and divider to the size they’re at right now, to match the main title better.
And voilà, we have a better fitting band list! There’s a little bit of room won at the bottom of the list, which is where I’ll be sticking the “Gates open at 9pm” information. To stay consistent with the original design, I wrote it in Pointedly mad. My type is sized at 42 points, with the kerning set on “optical” (like most of the text blocks throughout this poster). I also switched the “AM” mention to superscript on the character panel’s options. Time to also remove the old “gates open at (…),” and to move forward.
Where are we at?
With this super long tutorial, it seemed a good idea to take a quick step back, and to see what else we are going to finalize. We’re so close to the end I can feel it, but there are still a few details here and there.
- Finalize and touch up the look and feel of the “tickets” text block
- Check if downsizing the pinup just a bit to give more breathing room to the title is a good idea
- Maybe move the “Gates open at 9AM” mention back where it originally was?
- Potential background simplification
- Potential borders touch-ups
Now that the road map is set, let’s go for the final stretch.
Tickets and other miscellaneous information
The main change I want to make happen here is the typeface. I haven’t used a slab serif at all in the design so far, and I think it feels a bit out of place. I might use Sullivan or Bemio from Lost Type to have a certain sense of unity. Sullivan appeals more to me at this stage, but we’ll see as I go.
Here’s my first draft. The type is Sullivan Fill, set in 24 points. The line height is set at 24 points as well. “Tickets” is set at 60 points.
Just to make sure, I made an alternate version in Bemio. You can see the Sullivan version in light gray underneath. Given the somewhat condensed nature of Sullivan, I think it’s a better fit given the space I have available. Bemio looks clean and good, but it would take so much more room.
So Sullivan it is. It’s also time to align my copy to the right, since these text blocks will be aligned in the same fashion than the bands list. I also did some minor adjustments to the pricing block. Let’s put this in place in the poster, and remember to switch the “Tickets” title to our yellow.
I also made a minor alignment alteration for the ticketing information, as it seems to fit the contour of the car better than way.
Next on our list is the pinup’s size issue. In its current state, I believe her head is a tad close to the title. That’s the only thing I want to act on: the width of the stroke around it, the colors, the placement of the halftones, all of these are good.
First, we need to select all of the pinups layers: the line art, the colors, and the outline. Thankfully for ourselves, we already grouped all of the elements together at the beginning. We can see that we included one of the halftone elements (bottom left, under the shoe) with the group.
I’m going to move the pinup on her own sub-layer, and un-group everything there, for better control. It’s just a game of cutting and pasting in front.
Once the pinup is in its own layer and the elements are un-grouped, we can have a better understanding of what needs to move and what can stay as is. I also managed to track down the halftone element as hidden in the outline group. I just slid it, out of there, on the main art layer for the time being.
What we want to do now is to select all of the pinup’s element, and to slowly size her down to leave something like half an inch of extra space. And sizing the pinup down by holding the SHIFT key and from the center top handle allows us to size the element down proportionally, while keeping it in a very similar spot. This avoids me to have to replace the pinup manually afterwards.
When checking in closely, it also looks like the outline is sensibly similar to the other outlines in place (see around the car, the guitar, and the microphone). So we don’t even need to worry about adjusting it.
Last little thing about the pinup: I used the same pathfinder technique than when creating the first version of the title’s outlines to clean up the shapes composing the pinup. The white shapes, once united, becomes a clean silhouette shape, rather than a shape made of multiple shapes. Grouping the inner shapes of the same color also helps to clean things up.
If you feel like it, and while you’re at it, why not applying the same cleanup process to the car, guitar, and microphone?
Background cleanup and simplification
Steve’s background (shown here without any of the type or main illustrative elements) features a star burst, flames, and the borders. First, I’d like to clean up and organize my layers further. Then, it looks like we have to simplify this background, as we’ve added a color (the burst’s light red) to our original color palette, and this will explode the budget of the hypothetical project. Finally, I think we can touch up the borders to make them visually centered.
Removal of the background burst
Select the burst shape, and hit delete on your keyboard. Done. Time to bust out the “That was easy” button.
We have a problem, and it’s the flames. They are also in the light red, and don’t fit there anyways since we removed the burst. Let’s remove them as well.
Now that the extra elements have been removed, we can organize our leftover visual ornaments into a sub-layer as well. I choose to create one for the borders, one for the halftones, and one for the pinstripes.
The borders aren’t fuller centered, and it seems that some of the spacing could be enhanced as well (see my highlights below). I’m going to use my direct selection tool (A) and the alignment palette to make sure the yellow and white borders are horizontally centered, and to make the bottom gap between the white and yellow borders identical to the one side gap between.
Last overall touch ups
I’m pretty happy with the changes so far. Last but not least, the background still seems empty, or missing something. This is because we removed the burst and the flames. Elements like the halftones were arranged around these, and they left gaps.
Instead of putting the burst back in place, I’m going to use the halftones already in the design, as well as some new ones, to “fill” the gaps. The trick for the new arrangement to fit is to keep a maximum dote size consistent with the dot sizes already in the design. Unless you start the halftones placement from scratch. Finally, some halftones elements can be found through your symbol panel.
The button I’ve highlighted in red will give you access to an option menu. From there, navigate to Open symbol library > Dot pattern vector pack.
I created a new sub-layer named “New halftones,” colored the old ones in gray (to keep them visible as a non-intrusive reference), and started placing my new ones.
Symbols are super easy to place: just drag and drop them from the palette into your design. Here’s my first draft after tinkering a bit with placement and sizes. You can see which ones of the pack elements I’ve used in the layer palette. It’s time to turn the old ones off, and to switch the new ones to white.
Since these are symbols, we’ll have to expand them before we can change their color to white. Let’s do so by selecting them all, and going to Object > Expand.
And here are our white halftones.
I don’t think I’ve accomplished the consistency I’m looking for. The one I’m happy (in terms of scale particularly) with is the little one in the back of the pinup. Let’s see if we can reuse it to fill the other gaps.
I’m happier with this second attempt. I basically used Dot Pattern Vector Pack 12 multiple times, after grouping it. In order to not break the scale consistency, I only sized it up very cautiously (check the bottom left corner, under the left shoe). It’s time to shuffle our layers a wee bit to make sure that the halftone at the bottom left covers the void left were we hid the back of the car. I just created a “Halftones #2” sub-layer, and placed it above the car layer. I then proceeded to cut and paste in front the halftone that’s behind the shoe in that sub-layer.
Once that’s done, I moved my “borders” layer up, in order to have the border above the halftone. Time to delete the halftone that’s outside the limits of the borders. Just use your direct selection tool to select the part you don’t want, and hit delete on your keyboard to remove them.
It seemed clear that the gap between the yellow and white borders needed to be cleaned up as well, both from the halftone and from the outline of the pinup. To do so, I created two red rectangles that I placed high enough in my layer structure to be above the girl and the halftone, but not over the borders. I also made sure to size them properly to not go over the edge of the artboard, and gave them their own sub layer.
A bit more layer clean up, and we’re done! Delete the unused halftones, delete Steve’s old halftones, get the type explorations and color palette layers hidden and tucked underneath everything, and taa-daa, you’ve got yourselves a cleaner Rockabilly Throwdown poster.
The next step will be to take this design in Ps to add texture to it. Imagine yourself in your parents’ or grandparents’ attic, and finding it after all these years. We’ll manipulate paper textures, aging Ps actions, noise, stains, fake folds, etc.
Until it’s written, cheers!