This weekend I took 30 minutes of my time to watch Kung Fury. What a masterpiece! It's a true homage to the 80s actions movies full of the cliche styles that made that era the most creative and visually rich in my opinion. After watching the movie I had to go back and dust off my Photoshop skills to create something inspired by that. The movie is full of references and of course the computer glowing grid effect which happened to inspire this tutorial. So for this tutorial I will show you how to create an 80s style composition with the classic glowing grid. We will use Photoshop for most of the tutorial and a little bit of Illustrator for the vector part. Step 1 Let's start by creating the grid that we will use in Photoshop. The best way or the easiest at least, for me, is to use Illustrator and the Rectangular Grid Tool Options. Create a grid with 40 dividers for both horizontal and vertical. That's it, the next steps will be all in Photoshop. Step 2 In Photoshop, create a new document. I am using 2880x1800 for the size. Paste the grid in the document and then with layer styles change the color of the grid to white. Step 3 Go to Edit>Transform>Distort. Then just start distorting the grid till you get the effect you want. Step 4 I am pretty much using half of the screen, a little bit less actually. Below you can see my result. Step 5 Select the background layer and then go to Layer>Layer Style>Gradient Overlay. Change the colors for purple to blue and make sure that the Dither option is selected. Step 6 Select the grid layer and group it. Change the Blend Mode of the group to Color Dodge. After that duplicate the grid and first apply a Gaussian Blur (5px). Then for the same layer apply a Layer Style Outer Glow. Use 30px for the Size. As you can see you will have a nice glowing grid. Step 7 Duplicate the group and flip it vertically so you create the top part. Step 8 With the Ellipse Tool create an ellipse filling the center of the screen line the image below. Step 9 Go to FIlter>Blur>Gaussian Blur and apply a 60 pixels radius blur to the ellipse. Step 10 Add a new layer and fill it with black. After that with the Brush Tool create an oval brush and paint with white in the center of the document like the image below. Step 11 Change the Blend Mode of the layer with the white ellipse to Multiply. Step 12 Add a new layer and fill it with white. After that go to Filter>Noise>Add Noise. Use 8% for the Amount and Gaussian for the distribution. Step 13 Change the Blend Mode to Overlay.You can also add a new layer with a scanline pattern to create an even more retro effect. Conclusion Of course to finish the design we need to add our logo. This time we are using the beautiful SN Neo-Noire Font font by the mighty James White from Signal Noise. The font fits like a glove to this style and as you can see we are pretty much done here. You can create variations with or without the top part. I kind a prefer without it. It is up to you. Now take 30 minutes to watch Kung Fury and also get inspired to play and learn new techniques in Photoshop. Download the Photoshop File Download Photoshop file
The last tutorial I wrote was back in January, it's been quite a long time and boy I missed it. I have been trying to organize myself to start playing more with not only Photoshop and Illustrator but also Sketch and other tools so I can share some new things with you. It's always a challenge due to my day to day job but it makes me feel so good when I finish something that went from my head to the final design in a very short period of time. Quite refreshing. So this week I will share a tutorial on an image I created inspired by some similar artworks I saw on Pinterest, more precisely, the project call Linea by Marcos Bernardes.. The tools I used were Illustrator for the basic vectors and Photoshop for the final details and shadows. Referencens Step 1 Open Illustrator and create a new document. After that with the Line Segment Tool create 2 lines like the image below. The rectangle size is for a 2880x1800 resolution. Step 2 Select the Blend Tool and create a blend object by tapping on both segments. After that double click on the Blend Tool icon to open the Blend Options dialog box. Change the Spacing to Specified Distance and use 30 pixels for it. Step 3 With the Pen Tool (P) create the shape you want to pop from the lines. I am using the Abduzeedo symbol. Step 4 After creating the shape you want duplicate it 3 or 4 times to make the symbol spread to more lines, like outer stroke. Also you will have to create a shape with the color of the background to hide the lines that go under the symbol. Step 5 After that with the Pen Tool and the Direct Selection Tool make sure to connect the new lines with the ones that they should diverge from. Step 6 Select the points that the lines connect and then change the corner option. I am using 90 pixels for the roundness. Step 7 Change the colors to the ones you prefer. I am using a dark grey and teal color. I like the dark themes, this one heavily inspired by Google Material Design. Step 8 With the Polygonal Lasso Tool select the symbol and create a new layer from it (Layer>New>Layer from Copy). After that go Layer>Layer Style>Drop Shadow. Step 9 For the shadow options I used Multiply for the Blend Mode, 120º angle, 20 pixels Distance, 40 pixels Size and the most important, 25% Noise. The noise is really cool because it adds some nice texture to a rather uniform vector illustration. Step 10 Group the layer and then apply a mask to hide the areas selected below. That way the shadow will give the perception that the lines are going over or popping from the rest of the composition. Conclusion You can also add some vignette and more textures if you want. For me it's pretty much done. I could go over some details that still bother me a little bit like some of the lines in the middle of my symbol. But that is beyond my little thought/practice exercise. I hope that is useful for you and you can play with that on your own ideas. Download Photoshop file Click here to download the Photoshop file
This weekend I started working on an Android mobile version of the site using the Material Design spec. The style-guide is super complete and covers a lot of basic visual design needs like grid system, typography and color palettes. Besides that Google was awesome to provide sticker sheets in Photoshop, Illustrator and Sketch. So for the next couple of weeks I will be exploring some new designs for Abduzeedo and will be sharing with you here. In this first post I will share my first steps, downloading fonts, files and basic layouts. I would love to hear your feedback and also if you want to join the redesign of Abduzeedo please do share and we can definitely apply your design tips and give all the credits to you. Getting started The first thing to do is head over to Google Design (http://google.com/design/) and check out the spec, communities and everything available. After that focus on the spec because there are so many cool things already done for you so you can spend time trying to solve your design problems and improving your product. Typography My idea is to design an Android app, so I will first try to stick with Roboto for the font, but later on I might try to bring back some of our current design which used Varela Rounded. So again, download the font and install it so we can get started. Resources Besides downloading Roboto, make sure you get other resources available on the site as well, including layout templates, sticker sheets and icons. I downloaded the Components sticker sheet for Sketch for my project. Example of the sticker sheet in Sketch. All components I need to start designing my mobile app. References Another important thing is to know where to look for some references. Of course there are much more than just digital references but it's good to see what others have been doing with the Material Design spec. That said, Materialup is a great website with tons of amazing examples from visual to motion design. Designing the app Abduzeedo is a website that is all about images, we started it as a way to share images and other things that inspired us and because we decided to write it in english we were always trying to be short because of the limits of our english skills but also because we knew that there was a universal language commonly understood by all and images do an amazing job of speaking to that. That said for the mobile app, based on stats, we believe there are some things we could explore: Horizontal navigation for different categories (tabs) Full screen images for the featured content like Flipboard Simple yet elegant grid for verticals. Questions we always ask ourselves: Do we need description text besides the title? What metadata do we need to display? Could we not show title at all, just the image? How will we handle ads? Those questions are extremely important for us to set some constraints. Advertising is always the most complicated, at least on desktop, due to the format sizes that usually are fixed and not responsive. For mobile, at least for the first part, I won't bother with ads. I know it's wrong but I want to focus on creating a super compelling visual experience. The first thing I did was to get one layout template. The dark theme looks interesting, but it's quite different from the desktop experience. I won't scratch it off my list but I decided to try a light theme using the tabs navigation. As you can see below, it definitely looks very coherent with our current experience. One version I also explored with the Abduzeedo symbol in the center of the app bar. I know that it's not in the spec, but as I said, I want to explore ways to apply the style but not get limited to it. Another thing that you can see in the mocks, is that I tried to use cards. I am not a fan of cards, but it's important to explore all possibilities. Explorations The navigation with tabs feels good to me, especially in apps like Newstand and Flipboard. There are a couple of issues I encountered: The navigation tends to take a lot of real state. Is there a smarter way to solve that? Facebook Paper does a great job with gesture navigation and pretty much a transparent UI. How discoverable will it be for the users and also how many tabs should the app have? Below you can see some explorations with the Featured screen which would have 1-3 articles using full screen images with big and bold text. Swiping to the left we would have the Recent tabs, which is the current stream of our website. For this session my idea is to have full width content with 8dps space between content inspired by the Inbox. For the vertical areas I explored a grid with just images. The idea sounded good in my head, but the first exploration looked a bit too overwhelming for the users, especially due to the lack of text. It's hard to understand what's going on. These explorations gave me some clear understanding of the direction to follow and that I had to simplify the design even more. Simplifying By removing the navigation the design gets to a level of simplicity that really pleases me. The featured screen really makes the image shine. The grid seems a bit weird, I tried to keep the 72dps left alignment for the title, it works for that screen, but for the Recent screen it was a bit to much, so I moved back to 16dps. To increase contrast, I decided to put the text over the images on a overlay block using a color extracted from the image. The first one you can see has a green color. To make it more subtle I changed the opacity to 70%, that way we can see the photo but still read the text quite well. The logo on the top right works really well, but I have to think about the navigation, that will be a much longer conversation To be continued... This is just the beginning of this process. I will try to keep this going for the next couple of weekends, going through the whole process and ending with dynamic prototypes. As I said, I would love to see you guys trying as well. I am curious to see what you guys would come up with for the Abduzeedo mobile design. So feel free to share with me via comments or via email at firstname.lastname@example.org. Thanks so much and till next Sunday.
Since we started the blog in 2006 I have been creating an artwork to celebrate the new year. It's a way to start the year motivated and challenged. This year, 2015 we will celebrate 9 years on the road, so nothing better than put together the ninth installment of our series. This time I am using just Adobe Illustrator to create a simple and abstract 2015 poster. I will probably try to do that in HTML/CSS just for fun in the next couple of weeks. So I hope you enjoy and Happy New Year! Let's make it great! Step 1 Open Illustrator and create a new document. Start with 2 simple forms, a square and a circle. Step 2 With the Direct Selection Tool (A) delete the right side of the square. Also move the bottom part of the square to end at the top center point of the circle Step 3 Still with the Direct Selection Tool (A), delete the top left segment of the circle. Step 5 Now move the top part of the square to make it a little smaller. The number 5 will be pretty much done. Step 6 Create the number one using the Pen Tool (P) Step 7 Create a square to use as a frame/background for our logo. Step 8 As you could see in the previous step, I was playing with rounded corners for the numbers, however I think it's better to keep the edges sharp. So I moved back to the simple version. Step 9 Color selections. Here's the palette I decided to use. It's a pastels/80s style. Step 10 Time to apply the colors. The first thing to do is to make the strokes bigger and change them to white. Then start applying the colors from the color palette. Step 11 Create a rectangle and duplicate it 4 times to create a stripe effect. After that use the colors from the color palette in order, from the lighter at the top and darker at the bottom. Step 12 Select the 15 object and group it. After that copy it and paste it on top of the other objects. Select the top object and the color stripes (make sure they are grouped). Then press Command + 7 or Object>Clipping Mask>Make. Step 12 Now make sure that the background rectangle clips the numbers as well. Conclusion For the text I added a line per stripe to say "Welcome 2015 - Let's make it Great - ABDZ - Since 2006" and the design is done. It was a simple idea that I wanted to put together to celebrate the 9th year of Abduzeedo online. I hope you like it and happy 2015 to all.
This weekend I went to the movies to watch Interstellar in IMAX 70mm. This movie was for me the most anticipated one this year and I left the theater in awe. The movie is visually stunning and as expected from Nolan, a mind-bending experience in terms of storytelling. Still blown away, I decided to create an image in Photoshop inspired by my experience watching this incredible film. So in this little tutorial or case study, I will walk you through my process from Illustrator to Photoshop. I won't provide a lot of details because I think it's better for you to try and not follow instruction, but I think you can have a good idea of how the end result was achieved. Step 1 In Illustrator, create a new document and then with the Polygon Tool create a polygon with more than 8 sides. Step 2 With the Line Segment Tool start creating lines and connecting them to create the polygonal effect we want to achieve. Step 3 Once you finish the full sphere, delete some areas in the center like the image below. After that with the Ellipse Tool, create a circle for each intersection of lines. Step 4 I repated the same process for the Abduzeedo symbol. Step 5 In Photoshop, create a black circle in the center of the document. Step 6 Import the design you created in Illustrator to Photoshop. Step 7 To add stars in the background, an easy techinque is to create a new layer, fill it with black and then go to Filter>Noise>Add Noise. Use around 10% for the amount. Then go to Image>Adjustments>Levels. Adjust the black and the white leves until you have just a few white dots. Step 8 Add the text you would like to add to your design. I am using a quote from the Interstellar movie. Step 9 Using Google Image search I searched for a light leak image. Then with the Adjustments>Hue and Saturation I changed the colors to a cool, blue/purple palette. After that change the Blend Mode to Linear Dodge (add). That will make the image only visible over the dark areas of the composition and invisible over white. Conclusion The process behind this image is quite simple and it was something I used to do a lot in the beginning of the blog, just playing with Blend Modes and the space theme. With vectors and the white area the composition got simpler and more refined. It would work really well for a poster as well. Now it's up to you to come up with your own design, but first, got to the movies to watch Interstellar and get some inspiration.
I've recently written about Google's newly launched visual design language called Material Design. The goal of this new design is to create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. The idea is to create a UI that has the best of both worlds, digital and physical. Some of the imagery they presented in the spec share some common characteristics, like depth, paper style effects and vibrant colors. I decided to take a pass and try to create an image inspired by the Material Design styleguide. So in this tutorial I will show you how to create a simple composition in Photoshop inspired by the Material Design styleguide. The whole process will take over one hour or even more if you get into the details. Step 1 Open Photoshop and create a new document. I am using 2880x1800 pixels, the resolution of my Macbook Pro. Step 2 With the Rectangle Tool (U) create a rectangle and rotate it. For the colors I am using the Material Design color palette called Blue Grey (http://www.google.com/design/spec/style/color.html#color-ui-color-palet…). The colors I will use will come from the palette, the only different one will be the accent color. Step 3 Again with the Rectangle Tool (U) add another rectangle and rotate it again to create the outer part of the A. Step 3 Duplicate the rectangle from the previous step and move it a little bit to the right to create a second pane for the left part of the A. Step 4 Do the same for the right part, but this time use pink for the accent color. Step 5 Keep adding rectangles until you have the form you like. Remember to keep the idea of pieces of paper stacked. Step 6 For the textures I used to different techinques. The first one is by using images and clip masking. The other one is by using patterns and layer styles. For this step we will use clip masking. Search for paper textures you want to use and paste in the document. Step 7 Change the Blend Mode to Color Burn and move the order of the layers. Step 8 For the Layer Styles, I used Bevel and Emboss, Pattern Overlay and Drop Shadow. Use the values below to see how I did. The biggest change for the other layers will be the Drop Shadow values. Step 9 Here's the first sheet of paper with the effects. Step 10 Repeat the same process for the other sheets of paper. The main difference will be the drop shadow values. Conclusion After all these steps you will end up with something similar to the image below. It's important to play with some values for shadow, bevel and also blend modes depending on the colors you choose. The palette I chose is not super vibrant so it's a bit different than if I used a more vibrant and saturated tone. The shadows also make a huge difference. Some will have to be more subtle while one or two will be long and strong. Those details will create the depth you want for the composition. Now it's up to you. I will keep playing with mine trying to improve the realism of the shadows and edges of the paper. I hope you have fun creating your own version. I also would like to thank Shutterstock for some of the textures I used in this tutorial.
A couple of weeks ago I posted an image with a polygonal background that I discovered on the Pattern Library website and got some requests to recreate so herein lies my attempt. So in this tutorial I will show you how to create a vector polygonal pattern using Illustrator and the Pattern make feature. The process is quite simple but there are some details that are very important to make sure your pattern is tileable. Step 1 Open Illustrator and create a new document. With the Rectangle Tool create a square like the image below. Step 2 Duplicate the square by holding Option+Shift. Make sure they snap with no space between them. Step 3 Create a grid by repeating the step 2 process. Step 4 With the Direct Selection Tool (A) select the top and bottom points on the same column. Them move them to any direction. It's very important to do that for these points because that will make sure that the illustration will be tillable. Step 5 Here's the outside points that will connect when you create the pattern. Step 6 For the internal points you can do whatever you want. If you want smooth polygons don't move them too much. Also if you want to add more square to your grid that will allow you to give more details to your background. Step 7 Add some colors, I used greyscale because I can change the hues in Photoshop later on. Step 8 Select polygons that have the same color and duplicate them in place. Then go to Window>Swatch Libraries>Patterns>Basic_Graphics_Lines. Use one of the horizontal lines presets. Step 9 Select the image you created and go to Object>Expand. After that group the shapes and go to Object>Pattern>Make. Select Size Tile to Art and Move Tile with Art. After that change the H and V spacing until you have no space between the tiles. Step 10 Click done and you will have a nice poliygonal pattern to play with. Step 11 In Photoshop, create a new document. I am using 2880x1800 pixels. Copy a big rectangle with the pattern in Illustrator and paste it in Photoshop. Step 12 Add a new layer on top and change the color. After that change the Blend Mode to Overlay. You can try as many colors you want by doing that. You can also play with the Levels to reduce the contrast . Conclusion Add your logo and you are good to go. The process is quite simple, it's just about paying attention to the details and you will have a nice wallpaper for your laptop or new iPhone ;) Download Illustrator File Download the Illustrator file used for this tutorial
Last week I posted a couple articles on typography, more precisely ligatures, and despite the fact I have never been a huge fan of this style it is extremely popular. With that in mind I decided to practice and learn more about it. For this first image, I've created a simple composition in Illustrator using a popular quote. The process is quite simple, I just played with text sizes and tried to connect the ligatures albeit in different rows. So for this post I will walk you through my process very briefly though I must admit it took me quite some time to achieve a work that satisfied. Step 1 Create a new document in Illustrator and with the Horizontal Type Tool add the text you want to use for the composition. I am using a quote that was said to be Mark Twain's but there are controversies. The font I am using is PF Champion Script and it can be purchased at https://www.myfonts.com/fonts/parachute/pf-champion-script-pro/ Step 2 Reorganize the words and try to connect them by the ligatures. Step 3 The font comes with fantastic glyphs and they are perfect to fill some areas between words. Step 4 For the "The" I used to glypch, one connected with the "T" and the other with the "e". Step 5 Here's the final text composition. Step 6 Now let's start adding some subtle shadows. I used this effect for letters that have crossing segments and any looping form. Step 7 The final colors I used were #242529 for the background and #D4EA61 for the text. Conclusion The final composition is fairly simple, the goal is to drive all the attention to the text and ligatures. I also added the Abduzeedo logo using #FF4240 to create some contrast. Besides that I also created another version with a super cool pattern from The Pattenr Library titled Shattered Island (http://thepatternlibrary.com/#shattered-island). You can try different variations, but now it's up to you, meanwhile I will keep playing and trying to refine my ligature skills.
For this week's tutorial I will extend the Chrome Effect in Photoshop tutorial and add a super cool light effect simulation featuring a fan hole in a computer. We will use some images and Photoshop's layer styles for the whole tutorial. The process is quite straightforward but it is a little time consuming, roughly one hour to create your own image. Step 1 Open Photoshop and create a new document, as usual I am using 2880x1800 pixels for the dimensions so I can use it as a desktop wallpaper. Using the Paint Bucket Tool, fill the bakcground with #201E1E for the color. Step 2 Add a new layer and fill with with black. After that go to Filter>Noise>Add Noise. Use 15% for the Amount, Uniform for the Distribution and Monochromatic. This is pretty much the same process we did to create the plastic texture in our previous tutorials. Step 3 Duplicate the noise layer and then just flip it horizontally. After that group the 2 layers and apply a layer style for the group. Go to Layer>Layer Style>Gradient Overlay. Use Radial from mid grey to dark grey. Step 4 For the internal part of our speaker or computer search on Google Images for some videocards, they usually are super cool in terms of design. I also used an image with light effect I did a lont time ago for the Abduzeedo Book. You can use anything you want for the light effect. Merge both images and then go to Image>Image Adjustments>Hue/Saturation. Select Colorize with 40 for Hue, 50 for Saturation and -13 for Lightness. Step 5 Time to mask everything. For my design I used a vector I found online with the circles like a round phone speaker. Create a marquee selection of the shape and mask the internals. Step 6 This is what you will have after the masking. Step 7 With the shape you used to create the mask go to Layer>Layer Style>Blending Mode. Change the Fill Opacity to 0. Select Bevel & Emboss and then use the values below, after that select Contour and use 56% for the Range. In the end duplicate this layer and change the opacity to 10%. Step 8 Add a new layer on top of the other layers and fill it with black. With the Brush Tool (B) paint a circle with a dark grey like the image below. After that change the Blend Mode to Color Dodge. Step 9 Go to Layer>New Layer Style>Photo Filter. Use Warming Filter at 30% Density. Step 10 Select all layers and duplicate them. Merge the new layers and with the new layer selected go to Filter>Blur>Gaussian Blur. Use 15 pixels for the Radius. Change the Blend Mode to Screen at 70% Opacity. Conclusion Now to finish the design just add your logo with the same nice chrome effect we created in our previous tutorial, Chrome Effect in Photoshop and your design will be done. Now it's up to you to come up with your own. I hope you have fun. Download Photoshop File Download the Photoshop file used for this tutorial
A couple of weeks back we featured an image for the wallpaper of the week that was the Abduzeedo symbol with a chrome effect. Quite a few people asked me how it was composed so this weekend I decided to write a simple tutorial on how to achieve a cool chrome effect using Photoshop. I am using the Photoshop CC but you can create a similar effect with pretty much any new version of Photoshop. So, in this tutorial I will show you how to create a chrome effect in Photoshop using just layer styles. The whole process is very simple but it might require some tweaking and a little bit of time. Step 1 In Photoshop create a new document. I am using 2880x1800 for the size so I can use it as a desktop wallpaper for my laptop. After that put the logo/symbol you want to apply the chrome style. Step 2 Add a new layer and fill with with black with the Paint Bucket Tool. After that go to Filter>Noise>Add Noise. Use 12.5% for the Amount, Gaussian and Monochromativ. Step 3 Duplicate the layer and for the one on top go to Edit>Transform>Flip Horizontal. After that change the Blend Mode to Screenat 40%. Step 4 Group the 2 layers with noise and then for the group apply a layer style. Select Gradient Overlay and use Radial with a light grey in the middle and black for the edges. Step 5 Select the symbol and then go to Layer>Layer Style>Blending Options. Use the settings like the images below. Note: The settings might vary depending on the type and size of you symbol, so play with the values until you find the best result. These are the best settings for the Abduzeedo symbol. Step 6 Here I added the logotype and apply similar chrome effect. Step 7 Select all layers and duplicate them. Merge all the new duplicated layers onto one layer and then go to Filter>Blur>Gaussian Blur. Use 15 for the amount. After that change the Blend Mode to Screen at 50% and go to Layer>Add Layer Mask. With the Brush Tool make only the symbol area visible so this layer will create a sort of glow effect. Conclusion Here is the final result. As you can see the last step add a nice shine and glow to the image making the chrome look more realistic. I mentioned before, but it's important to play with the settings because they might have different results depending on the form of your symbol. Now it's up to you, just have fun and start creating nice wallpapers as well. Download Photoshop file Download the Photoshop file used for this tutorial
It's been quite some time since I've experimented with new ideas. Today, I decided to go through my personal library of inspiration, likes on Pinterest, etc and found some really good images from various artists, in particular the work of Sarah Mick. I am also still in love with the game Monument Valley, so this post also has much inspiration drawn from that visual language. Let's get to it. In this tutorial I will show you how to create a super simple wallpaper using Photoshop and Illustrator. The process is very straightforward but the result is quite good in my opinion. Step 1 Create a new document in Illustrator and then create 2 squares like the image below. The smallest one in black and the bigger one in medium grey. Step 2 With the Blend Options select both squares and them create a blend with 3 Specified Steps. Step 3 Add another rectangle for the background with a light grey, like the image below. Step 4 Copy the image from Illustrator and paste it in Photoshop. Step 5 Go to Filter>Blur Gallery>Tilt-Shift. Use 15 pixels for the Tilt-Shift and 0 distortion. Step 6 Let's add an image for the background. I am using a sky image in grey scale that I found on Google Images. After that I masked it to make sure it wasn't overlapping the triangles. Step 7 Go to Layer>New Adjustment Layer>Hue and Saturation. Use 195 for Hue and 43 for Saturation. Step 8 Now select all layers and then merge them into a new layer. After that go to Filter>Noise>Add Noise. Use 2% for the Amount and Gaussian for the Distribution. Conclusion Now just add your text and logo and you are good to go. It's a simple artwork but has some strong visual appeal because of the triangles and since I saw some posters on Behance and the game The Monument Valley I fell in love with this concept. Now it's up to you, just go and have some fun! Download Download the Photoshop file
The 2014 FIFA World Cup is about to begin in Brazil this week and I couldn't be more excited. Brazil hasn't hosted what is considered the biggest sporting event in the world since 1950. To celebrate the return of Brazil as host country, I decided to create a little artwork inspired by this momentous event on the horizon. Instead of using the organic forms seen in the official logo I went with an old school, modernist and geometric style. So in this little post I will walk you through the creative process behind this poster. I am using Adobe Illustrator and Adobe Photoshop for this tutorial. Step 1 In Illustrator I started with a simple representation of the Brazilian flag. Just using the Ellipse Tool (E), Polygon Tool and Rectangle Tool. Step 2 With the Rectangle Tool I created one 2 rectangles with different heights. With the Blend Tool I created the interpolation of lines between the 2 rectangles. Thats' the base for the whole design. Step 3 With the triangle I clipped the blend object. Step 4 I repeated the same thing for the top part, this time with green. Step 5 All elements together, with text and different colors. Step 6 Here's some color explorations with color palettes from Kuler. Conclusion Here's the final result, heavily inspired by the modernist style that was used in most of the Brazilian brands I grew up seeing, very geometric and solid colors.
Last Friday I bought the game Monument Valley and got hooked an an instant. The art direction is fantastic, full of beautifully designed puzzles playing with impossible forms, you feel it could be a game designed by M.C Escher. A few hours playing and I was inspired to create an artwork for Abduzeedo, just to have some fun. The end result, and some quality time in Illustrator and Photoshop, I ended up with an outline style artwork for a poster and wallpaper. So in this little case study/tutorial I will show you the process behind my impossible ABDZ symbol using Illustrator and Photoshop. Step 1 In Illustrator start creating a basic triangle using the Rectangle Tool and then the Direct Selection Tool. Create the front face, the one with the lighter grey and then the back face on the left with a darker grey and the top face on the right with a mid grey. Step 2 Add the bottom part with the same grey as the back face part in step one. Step 3 Add the top face of the bottom part using the same grey as the top face in step one. Connect them by extending the right top face. Make some adjustments to make sure the vertices are aligned. Step 4 Here I decided to edit my penrose triangle to have a little bit of the Abduzeedo Symbol form. Step 5 Here I decided to play with some shadows to add some depth, the first idea was to follow a nice rendering with greys and gradients. Step 6 This was my first outcome, it was heavily inspired by the game Monument Valley. It was nice but I wanted something simpler. Step 7 I decided to to use just the outlines, it is a quite common style but I realised I haven't done something like that for Abduzeedo. The first thing was to remove the fill colors and just add a stroke. After that I used Pathfinder to make sure the shapes are not overlapping on another. Conclusion Here's the final result, just increase the weight of the strokes and added a few more details in Illustrator. You can add textures or more elements if you want, but for now I am pretty happy with the outcome, especially using as my desktop wallpaper.
We have seen quite a few illustrations with the low poly style, it looks like a very difficult technique but Breno Bitencourt put together a very complete Photoshop tutorial showing the process, including a video. I will really give it a try and now you have the chance to try to, check it out. Here I'll show you step-by-step how to create a stylish low-poly portrait in Illustrator and Photoshop. The secret to creating works in this style is working from the best reference photos – and first off Breno reveals how to capture these (using himself as a model). He then reveals how to work these up in Photoshop, then create a vector version in Illustrator. Video Breno Bitencourt is a graphic designer from Brazil specialized at logo design, as well as corporate identity that works with clients globally. For more information about Breno visit https://www.behance.net/Bitencourt
A couple of weeks ago I decided to practice my Illustrator skills to create a simple skyline of San Francisco for a print material I am working on. I loved the style that Ryan Putnam explored on some of his illustrations of city skylines so I decided to give it a try. I have to say, I didn't have that much fun doing illustrations since I was in high school I think. So in this short post I will walk you through my basic creative process behind the San Francisco Skyline illustration. I used Adobe Illustration for this project but it can be done with any vector tool. Step 1 - References The first step was to get references of some iconic buildings in the San Francisco skyline. San Francisco is a beautiful city and it was very easy to get a few landmarks. The ones I picked was, Transamerica Pyramid, Ferry Building, Embarcadero Center, Alcatraz, Cable Car, the fog and of course the Golden Gate Bridge. Below you can see some references. Step 2 To create the buildings I used basic shapes and the Blend Tool to make the windows. Below you can see the process behind the Transamerica Pyramid. Step 3 The Embarcadero Center I used the rectangle tool to create half of the building. For the windows, I just used a dotted stroke line. After the first half was done, I just duplicated it and there it was, another building. Step 4 The Ferry Building took more time because of its architecture style. But again, just basic forms and a lot of repetition. The secret is to capture the most important features, it doesn't have to be perfect. Step 5 Putting everything together was a lot of fun. I started adding some placeholder buildings to fill the space. For the Golden Gate Bridge I used the Blend Tool and also created the fog with a bunch of circles that later on I united them with the pathfinder tool. The cool thing about this type of illustration is that you can create it quite easily, it just require time. Another important tip is to make the outer stroke of the buildings bigger than the inner. Conclusion The final print is done but not ready to be shown yet. Soon I will have more details, but below you can see two explorations, one in a print mockup and another one a simple animated gif.
Following our new series of positive thinking wallpapers today we will show you how to create a simple and soothing image using Photoshop. The author we feature today is Confucius and the quote is "Everything has beauty, but not everyone can sees it". We will also use a stock photo from Unsplash. So in this little case study/tutorial we will show you how to play to some basic masking, photography and typography to create a beautiful wallpaper. The process won't take more than 45 minutes but I am sure you will have a lot of fun. Step 1 Open Photoshop and create a new document. I am using 2880x1800 pixels, the standard retina display Macbook Pro resolution. After that let's start playing with our positive quote from Confucius. Add the word BEAUTY. The font I am using is called Liberator. Step 2 With the Rectangle Tool, create a rectangle with a 10pt stroke. Step 3 Now add the rest of the text. The first part using the same font and the last using a smaller font. In my case I used Orator St. Step 4 For the background I am using a photo from http://unsplash.com/ - I wanted an image with a cold/calm feel and I found this one with some trees and the fog. I liked the mood of it. Step 7 Change the color of the text from white to a purpleish extracted from the image. I apply a Layer Style>Color Overlay to a folder with the typography elements. Step 8 With the Magic Wand Tool (W) select the tree. Then mask the text and rectangle so you can make some branches going in front and behind the symbol. Step 9 Here's a zoom version to see how I played with the branches and the typography. Step 10 Go to Layer>New Adjustment Layer>Photo Filter. Use the Warming 85 at 33%. Conclusion Add your logo and you are good to go. The design is simple and soothing, exactly the mood I wanted to have for this particular design. So as Confucius sad "Everything has beauty, but not everyone can sees it" - maybe that's why I will probably be the only one who can see the beauty on this wallpaper.