To appreciate great designs, it is hidden in the process of how the design came about, including the software or platform used (the technical tool), the idea process, the manipulations, the tools, fonts, colors, sizes of images, and everything else that constitutes a design.
We at Cr8tivespot have created time to breakdown the process of different designs: both flyers, logos, banners, posters, brochures, email headers, book covers, websites, and everything else, so as to expose the creative process of designs for other designers to tap into.
Most of the designs will be our own, and then we will also source out the complex designs of others to breakdown. Reasons for breaking down the design process: it aids the creative journey of design enthusiasts; people who want to learn designs can also get a direct design process from this; and we know that creativity is the core of designs, so learning the creative aspect of designs will help improve the design ecosystem.
In this blog post, we will start with this flyer design above, breaking down every process for easy comprehension. And the design file will be attached to every explained design made by Cr8tivespot, but if we get the design elsewhere, we won't be able to attach the file.
Flyer Design Breakdown
This design was done using Adobe Photoshop.
Step 1: Creating a New File
The first step in achieving this design was to create a new file in PS. Learn how to create a new file in Photoshop using a width of 1000 pixels and a height of 550 pixels, and select the color mode to be RGB. This sets the foundation for the design canvas.
Step 2: Incorporating a Sample Flyer
Now the second step was bringing in an already-made flyer in order to have a sample flyer that would explain the design of professional flyers, posters, and others.
It was placed at the center of the image to maintain a professionally measured standard.
Step 3: Main Content and Creativity Unleashed
Now about the main content [professional flyer design], this is where the major creativity comes in, showing a text that has a part for a complete fill color, and then the middle part is transparent and has a stroke of white. How is it achieved?
Text Creation: First, the text was written with the text tool in PS (creating a text layer). In order to manipulate text, the text layer must first be converted to a normal layer (rasterizing the text layer).
Rasterizing the text layer: Rasterizing a text layer in Photoshop involves converting the text into a pixel-based image layer. This process is irreversible, so it's essential to create a backup or duplicate layer before rasterizing if you want to maintain the ability to edit the text. Here's a step-by-step guide on how to rasterize a text layer in Photoshop:
Before rasterizing, it's a good practice to create a duplicate of the text layer to preserve the original text for future editing. Right-click on the selected text layer in the Layers panel and choose "Duplicate Layer." You can then hide or lock the original text layer.
With the text layer selected, go to the top menu and choose "Layer" > "Rasterize" > "Type." This action converts the text layer into a pixel-based layer.
Alternatively, you can right-click on the selected text layer in the Layers panel and choose "Rasterize Type" from the context menu.
Creating an Outline Text Layer: After rasterizing the text layer, select the pixel of the text layer by holding the ctrl or cmd button and clicking the T part of the text layer in that layer panel so as to select the pixels of the text, create a new layer while that pixel is still selected, and then select the rectangular Marquee tool. On the new layer (while that pixel is still selected), right-click and click on stroke, then stroke the selected part with the white color and stroke with any width of your choice (based on the thickness you wish). It will display the text in white strokes (outlines) on that new layer.
Combining Filled and Outline Text: Now we have two different layers carrying the text: one in a complete fill form and the other in a stroke form (outline).
Locate the layer with the filled text, select the rectangular marquee tool, draw a rectangle that covers only the middle of the filled part, and then delete the selected middle part. Automatically, the stroked layer will cover up the deleted part of the filled layer, and then you will have a result that is a mixture of both filled and outline text joined together.
Step 3: Creating Depth & Shadows
A layer was created and filled with a black color code: #000000
Then the opacity of the layer was reduced to about 50 or less, so that there would be some transparency. and the layer is placed on top of the sample layer and then below the text content of the design.
Then the line edges were achieved by using a rectangular marquee tool to draw a rectangle selected path that is as wide as reaching the edge, then it was stroked to get the outline.
Then the eraser tool was used to remove the unwanted parts. And that is how that design is achieved.
Please feel free to drop your comments on any questions or reviews.
Happy designing 😎😎😎
Comments
Post a Comment