articles on

How to Create a Composite Dreamscape using two photos in Photoshop

How to Create a Composite Dreamscape using two photos in Photoshop

It's Friday and we would like to share this fun tutorial from Adobe in collaboration with photographer named Jaxson Pohlman. It's about creating a composite dreamscape using two photos in Photoshop. As most of us like photography, it's always nice to add some spark to your pictures with a simple technique. Let's take a closer look. Our friends from Adobe has released an easy step-by-step tutorial by fine art photographer Jaxson Pohlman. You can follow the steps from the Photoshop's Instagram post and we have stepped them out below in the article as well. In their words Hey guys! It's @jaxsonpohlmanphotography here. I'm going to show you how to create a composite dreamscape using two photos in just a few steps. Swipe through to see my mini #Ps_Swipe tutorial! • Using sunrise or sunset photos will add some spark to your final creation. Begin by opening the foreground photo in #Photoshop. We are going to mask a portion of the background out to create a smooth transition between the horizon and stars. • Use the Rectangular Marquee tool (M) and click and drag across the photo. Make sure to select in between the horizon and the top border of the photo. Go to Select -> hold the "Shift" key and click “Select and Mask.” Adjust the edge by dragging the "Feather" option to approximately 200px, then click ok. • Next, use the Move tool (V), click and drag the selection over to your star photo (background). Make sure the foreground layer is above the star layer. Use the Crop tool (C) to extend visibility. Using the Move tool, drag your foreground layer down to the bottom of the cropped area. • Duplicate the foreground layer by going to Layer -> and click "Duplicate Layer.” Label it as "no. 2" and click Ok. Select the original foreground layer. Go to Edit -> "Free Transform" and increase the vertical size. Double click to confirm, and then drag the photo down so that is transitions smoothly into the stars. • Using the Brush tool (B), we are going to add a bright star to make the transition between the horizon and sky feel a bit more real. Click the Brush Preset picker and adjust to 25px with a hardness of 50%. Change the mode the "Lighten" and have an 85% opacity and flow. Select the duplicate layer "no. 2" and apply the brush where the horizon fades into the stars. • After applying the brush to create a star, we are going to apply a second brush to give a glow to the star. Adjust your brush settings to 175px, 0% hardness, 50% opacity, and 25% flow. Apply this brush over the star just created. • Add final touches such as exposure, contrast, color balance, etc. And that's how you can create a simple composite dreamscape!​ A post shared by Adobe Photoshop (@photoshop) on Jul 28, 2017 at 9:27am PDT Step 1 Hey guys! It's @jaxsonpohlmanphotography here. I'm going to show you how to create a composite dreamscape using two photos in just a few steps. Swipe through to see my mini #Ps_Swipe tutorial! Step 2 Using sunrise or sunset photos will add some spark to your final creation. Step 3 Begin by opening the foreground photo in #Photoshop. We are going to mask a portion of the background out to create a smooth transition between the horizon and stars. Step 4 (Video) Use the Rectangular Marquee tool (M) and click and drag across the photo. Make sure to select in between the horizon and the top border of the photo. Go to Select -> hold the "Shift" key and click “Select and Mask.” Adjust the edge by dragging the "Feather" option to approximately 200px, then click ok. Your browser does not support the video tag. Step 5 (Video) Next, use the Move tool (V), click and drag the selection over to your star photo (background). Make sure the foreground layer is above the star layer. Use the Crop tool (C) to extend visibility. Using the Move tool, drag your foreground layer down to the bottom of the cropped area. Your browser does not support the video tag. Step 6 (Video) Duplicate the foreground layer by going to Layer -> and click "Duplicate Layer.” Label it as "no. 2" and click Ok. Select the original foreground layer. Go to Edit -> "Free Transform" and increase the vertical size. Double click to confirm, and then drag the photo down so that is transitions smoothly into the stars. Your browser does not support the video tag. Step 7 (Video) Using the Brush tool (B), we are going to add a bright star to make the transition between the horizon and sky feel a bit more real. Click the Brush Preset picker and adjust to 25px with a hardness of 50%. Change the mode the "Lighten" and have an 85% opacity and flow. Select the duplicate layer "no. 2" and apply the brush where the horizon fades into the stars. Your browser does not support the video tag. Step 8 (Video) After applying the brush to create a star, we are going to apply a second brush to give a glow to the star. Adjust your brush settings to 175px, 0% hardness, 50% opacity, and 25% flow. Apply this brush over the star just created. Your browser does not support the video tag. Step 9 Add final touches such as exposure, contrast, color balance, etc. And that's how you can create a simple composite dreamscape! More Links Check out Jaxson Pohlman's site: jaxsonpohlman.smugmug.com Follow Jaxson on Instagram Learn more Adobe Photoshop Blog: blogs.adobe.com/photoshop

How to Create the Wonder Woman Logo - Photoshop Tutorials

Create the Wonder Woman Logo in Photoshop - Photoshop Tutorials

It's been a long time since the last time I wrote Photoshop tutorials. A lot of things have happened as I probably mentioned in the past. Right now there are tons of sites with Photoshop tutorials  and they all share tons of content so I started to feel it wasn't necessary for me to keep doing. However, I have been trying to get back to a routine of trying new things back in Photoshop moving away a bit from product design, UI and flat design. Essentially, taking a step back to the good old days of having fun with light effects, textures and that 80s look I miss so much. So for this tutorial I will show you how to create the Wonder Woman logo with that crazy metal effect using Photoshop. There are several ways to do it, a 3D tool might be the best way, but I decided to try it in Photoshop. I hope you have as much fun doing it as I did :) Photoshop Tutorials Step 1 The first thing to do is get the basic shape of the Wonder Woman symbol. I recreated this one in Illustrator. You can do everything in Photoshop if you want, I just feel more comfortable using Illustrator as it's faster for me. Step 2 Now in Photoshop the secret here is to have all shapes in different layers. You can achieve that by copying and pasting or importing, or even selecting and creating layers from the selection. It doesn't really matter how you do it as long as you have one layer for each part. We will apply some Layer Styles on the following steps. Step 3 Select the bottom and biggest shape of the logo, the blue in my image. Then go to Layer>Layer Styles>Bevel & Emboss. Use the values below. We will also add a Texture, Inner Shadow and Color Overlay. You can tweak things here as much as you want. For the Texture, use a metal texture. An easy way to do it is to do a Google search for metal texture images, get the one you like. Open it in Photoshop and select it all, then go to Edit>Define Pattern. You will be able to use that in the Layer Styles then. Step 4 Here you can see the first layer with the bevel look. It's important for it to have strong highlights and shadows. Repeat the same process for the other parts and use different colors. Step 5 Now that you have all layers with effect, make sure to tweak them a little. Notice that I have not only different colors but also different strengths for the parts. The 2 parts that go on top of everything else I added a drop shadow as well to create more depth. Experiment with it.  Step 6 Now the tricky part, add the metal texture. I believe there might be a multitude of ways of doing this, I went with my way, or the way I thought it was the easiest one. So select one of the shapes. Step 7 Add a new layer and fill it with white. Step 8 Then go to Filter>Pixelate>Mezzotint. Use Coarse Dots. Make sure that you have white and black for the background color. Step 9 After that still with the marquee selection active go to Filter>Blur>Motion Blur. Use a high value for the Distance. My image is huge so I used 200 pixels. Step 10 Because the original logo looks like a very rough metal, we need to make the texture a bit stronger. So go to Image>Adjustments>Levels. Move the black level all the way to the right and the white level a bit to the left. The idea is to increase the contrast. Use the image below for reference. Step 11 Change the Blend Mode to Linear Burn and play with the opacity. I used around 10-30%. Step 12 Duplicate the layer and move it down a couple of pixels then change the Blend Mode to Color Dodge at around 80-100% depending on the color of your shape. Step 13 For the shapes that have different angles I just did the same thing but with one difference. I did different angles of motion blur depending on the angle of the shape. The tip here is to use the Polygonal Lasso Tool to select the right angle for the junctions. Below you can see how I did the first 2 parts of the bottom shape. Step 14 Repeat that pretty much for every other shape. For the head, this is where you will have to do that 3 more times because of the different angles you get there. It's the same process, it will require a bit more attention though. Step 15 Group all shapes into a folder then apply a shadow to that folder. You can also merge the folder if you want. I always forget that I can add layer styles to folders now. Step 16 Add a new layer and mask it with the shape of the symbol. Then with the Brush Tool paint the sides and bottom with a very soft brush and black for the color. I painted with my brush at 50% so I could have more control. The goal is to create a sort of vignette effect. Step 17 Add another layer and fill with black. Change the Blend Mode to Color Dodge, then with the brush tool, paint some white spots on your design. Because of the Blend Mode the brush strokes will create a really nice light effect. That's my favorite trick in Photoshop for light effects. It works all the time. Conclusion Add another layer and fill with with black, use it as background. Then, select all layers and duplicate them. After that, merge them onto one layer and go to Filter>Blur>Gaussian Blur. I used 20 for the radius but you can try different values depending on the size of your image. Right after, change the Blend Mode to Overlay at 50%. Duplicate this layer and change the Blend Mode to Screen at 40%. Those 2 layers will give the image more depth, contrast and an interesting glow effect. And that's it. That's how to create a design with the effect similar to the Wonder Woman logo you see in the posters out there. As usual, try your way, have fun and check out more of our Photoshop tutorials. Download Photoshop file Download file for this tutorial

1 Min Illustrator & Photoshop Tutorials by Adobe Creative Cloud

1 Min Illustrator & Photoshop Tutorials by Adobe Creative Cloud

When we started Abduzeedo we focused a lot on design tutorials, especially Photoshop tutorials. Later we started adding more tools like Illustrator, Pixelmator and others. That was 10 years ago and there weren't many resources where people could find content on those subjects. Nowadays, it's much easier, you can find Photoshop training videos, Illustrator from well-known professionals, including the mighty folks over at Adobe, the mastermind behind the most popular design software in the world. Today, I noticed that they have an amazing Youtube channel called Adobe Creative Cloud and they have already shared some very useful videos with Illustrator and Photoshop tutorials.  The quality of the videos is incredible, they are short, 1 minute walkthroughs explaining interesting techniques to create 3D typography, double exposure effects, composite effects. Everything is really well done. I think they made all the other tutorials sort of obsolete after that. Below you can see the videos. Illustrator and Photoshop tutorials   For more information and to subscribe for more videos make sure to check out https://www.youtube.com/playlist?list=PLD8AMy73ZVxUuKFHp5BTdVKW37-k6Qhcj

Tutorial: How to Create a Double Exposure Portrait with Photoshop

Tutorial: How to Create a Double Exposure Portrait with Photoshop

Today we would like to share this tutorial from our friends from Adobe Photoshop in collaboration with image creator Ted Chin released exclusively for their Instagram channel. You'll be able to learn how to create a Double Exposure Portrait with Photoshop. I know we don't usually share tutorials on Friday but why not! Carefully follow these steps with your own images and create your own experiments. Enjoy! This tutorial is by Ted Chin who is an artist/image creator based in San Francisco, USA. You should definitely check out his site for tutorials and make sure to follow him on Instagram. Crafting what I believe is creative, I use photography and modern technology to manipulate it. I am able to recreate what I imagine. Result     Hey guys! It’s Ted (@eye.c) here. Today I'm going to show you how to create a double exposure portrait in just a few simple steps. Swipe through to see a mini-tutorial! • Using photos with simple backgrounds will help with the masking process. First, open the portrait (base) photo in #Photoshop. We are going to mask the background out and create the double exposure effect with the shape of the model. • Use the magic wand tool (W), click and select the background. Go to Select -> hold the "shift" key and click “Select and Mask”. Smooth the edge with the "Refine Edge Tool", then click ok. • Click on "Add a mask” then, "Create a new layer." Move the new layer to the bottom of the portrait. Select the "Paint Bucket Tool", or press "G", and fill in the white background. • Paste the second image, and adjust the image with "Levels" (Ctrl + L). Make sure the adjustment layer is clipped to the second image only. We want to make sure the sky is bright/clean enough so it's easier for selection. Hold (Ctrl + left click) on the portrait's mask we created earlier, then create a new layer mask for the landscape photo. • Un-link the mask by clicking the symbol in between, and re-adjust the landscape photo to the way you prefer. • Duplicate the Portrait layer and move the copy to the top of the landscape layer. Then change the blending mode to "Lighten". • I decided to add other elements (flowers) by using the same blending mode (Lighten) from the last step. • If you think the white background is too boring, you can try to add a different background, too. And this is how you can create a simple double exposure portrait! A post shared by Adobe Photoshop (@photoshop) on Mar 31, 2017 at 9:00am PDT   Step 1 Hey guys! It’s Ted (@eye.c) here. Today I'm going to show you how to create a double exposure portrait in just few simple steps. Step 2-3 Using photos with simple backgrounds will help with the masking process. First, open the portrait (base) photo in #Photoshop. We are going to mask the background out and create the double exposure effect with the shape of the model. Step 4 Use the magic wand tool (W), click and select the background. Go to Select -> hold the "shift" key and click “Select and Mask”. Smooth the edge with the "Refine Edge Tool", then click ok. Your browser does not support the video tag. Step 5 Click on "Add a mask” then, "Create a new layer." Move the new layer to the bottom of the portrait. Select the "Paint Bucket Tool", or press "G", and fill in the white background. Your browser does not support the video tag. Step 6 Paste the second image, and adjust the image with "Levels" (Ctrl + L). Make sure the adjustment layer is clipped to the second image only. We want to make sure the sky is bright/clean enough so it's easier for selection. Hold (Ctrl + left click) on the portrait's mask we created earlier, then create a new layer mask for the landscape photo. Your browser does not support the video tag. Step 7 Un-link the mask by clicking the symbol in between, and re-adjust the landscape photo to the way you prefer. Your browser does not support the video tag. Step 8 Duplicate the Portrait layer and move the copy to the top of the landscape layer. Then change the blending mode to "Lighten". Your browser does not support the video tag. Step 9 I decided to add other elements (flowers) by using the same blending mode (Lighten) from the last step. Your browser does not support the video tag. Step 10 If you think the white background is too boring, you can try to add a different background, too. And this is how you can create a simple double exposure portrait! #abduzeedo

Illustration Process: I Lift My Lamp Beside the Golden Door

Illustration Process: I Lift My Lamp Beside the Golden Door

I Lift My Lamp Beside the Golden Door is an illustration created by Jennifer Hom. She was very kind to share with us a little bit of her illustration process from the main goal of the project, to sketches to the final design. It's always wonderful to see that step by step, especially from an incredible illustrator like Jennifer. I hope you enjoy it and make sure to get one of the prints at: http://jenniferhom.bigcartel.com/product/i-lift-my-lamp-beside-the-golden-door Illustration Process by Jennifer Home Through all the changes in America over the last several weeks, it is clear that the country needs to remain true to our spirit. Immigration is the heart of this land and I wanted to do what little I can to protect it. What started as a way cope turned into something that I hope will help support the American Civil Liberties Union. I will donate all profits from the sale of this piece to the ACLU. Sketches Like all my concept sketches, this is a nearly indecipherable color pencil drawing. I knew I wanted to feature the Statue of Liberty because of my own mother’s love for it. Tightening up the sketch to a line drawing in Photoshop, I started to give the people in the torch a little more character. I even drew in some personal loved ones who immigrated to America. Adding color was simple enough considering I had to stick to the statue’s iconic oxidized copper hues. The final stage was tedious and obsessive color correction. I hope this inspires others to make a united contribution bigger than our individual means. -Jennifer Hom Jennifer Hom began life as a Chinese American girl in suburban Long Island, New York. As a minority with few friends, she found happiness in drawing fairies, unicorns, magical flying unicorns, princesses, and flowers. With the help of a terribly optimistic mother, she used her countless drawings of magical beings to enroll at the Rhode Island School of Design. Now graduated with a BFA in illustration, a grad degree in doodling at Google, and a gig at Uber, she managed to find a home with climate control. She is still Chinese American, but wants to be a Broadway star. For more information about Jennifer check out her website at http://jenniferhom.com/  

#Happy10Abduzeedo - Past Tutorials

#Happy10Abduzeedo - Past Tutorials

This month, we are celebrating the 10th anniversary of Abduzeedo. This is very special to us, Fabio Sasso created the blog as a side-project after he lost everything from a robbery back in 2006. It was in his way for him to backup files but also bookmark things he liked and inspired him. Since then his work has been used, shared and featured many times but beyond all, his goal was to inspired us to create and make more. That’s the philosophy and minset of Abduzeedo that will always lives on. Part of the celebration, we would love to take you guys on a trip down the memory lane about our past tutorials. We've been getting lots of requests to have more tutorials on the blog, we'll work twice as hard in 2017. By the meantime, enjoy this collection of some of the most popular tutorials on Abduzeedo. I never imagined or planned to get to 10 years. I started the blog after my studio got robbed and I lost everything. After that day I tried to focus on the present more than ever, life is too unpredictable and we can get frustrated if something happens that weren't in our plans. That happened to me, it sucks, but I learned a lot. Sometimes things are much worse in our heads and imagination than in reality. - Fabio Sasso Find out more about our tutorials: http://abduzeedo.com/tutorial.

Case Study: Trampa Logotype

Case Study: Trampa Logotype

Over the last month, we have featured the lettering work from Joe Sutton and today he is back with a case study. I shall add that he is sharing a full complete A to Z case study from the start and finish. Thank you Joe for taking the time to give us a demonstration of his experience and also sharing his process for everyone. Let me stop talking and give him the mic and hope you will enjoy his breakdown. This is a client project of mine broken down from start to finish, I share all the details that was discussed with the client and let you know about design decisons and process. I've always wanted to offer a sneak peak inside my process as I’ve seen it done before in other disciplines and found it highly valuable. I want to put something together that wold have helped me when I first started. In his Words   I was contacted to create a Logotype for Trampa. Trampa is an Urban Cycling Clothing Brand in its infancy. Their products have a Swedish design influence and a minimal and clean look that is functional, stylish and not out of place in a casual setting. Their target market is 16-30 year old male and females. I put together a document for the client to start with that broke down the the brand, goals, usage, keywords and competition. We put our focus on these as we found them to be the most important factors to focus on. After this I asked if everything align with their thughts and what kewords represented Trampa best. They wanted to try and represent Urban, Cycling, Swedish, Movement,Ffreedom, Exploration, Clean. Thet also also provided me with a few logos that he liked, they were very varied in style and so I knew that identifying which direction early on would be important. Sketching   When I go into sketching I just write the word out in a few go-to style, all caps, all lowercase, joined, unjoined and cursive script with a mix of character variations etc. Through this you can quickly understand where the issues might be between letters and where there are opportunities to create some unique ligatures. I’ll list the points that I discovered below: The ‘r’-‘a’ gives an opportunity for a ligature. • The two a’s could be interesting to experiment making the feature point • The ‘p’-‘a’ join could be an issue • We could join the ’t’-‘r’ • The capital ‘R’ or ‘P’ could be legs pedalling (Huge Gimmick) • Type of ‘a’ and ‘r’ were open for experimentation. • Capital or Lowercase T Sorry if those sketches have made your eyes hurt, but it's all part of the process. After Identifying these I can target each one and try and make something interesting. I had a feeling the best way to go would be with a very simple san serif type with a slant, I felt like it’d be the most simple and reflective of the clothing and brand. Howver, I still sketched lots of other styles incase I found something better. Once I had exhausted all my options I selected 9 sketches, there’s no specific number I choose. Usually below 10 as too many options can confuse the client and with this I refined them to an acceptable standard, still very far from perfect. The reason I choose at the early stage is usually they are so rough I'm the only one who knows where they could potentially end up like. So by choosing the best based off my judgement, with the project goals etc in mind, I offer the client more accurate optinons. You need to realise they aren't lettering deigners and that you probably understand your vision more than anyone else, so explain everything. Presenting First Concepts   Now I had all my first sketches to a point where it’s clear enough for the client to understand. Also not too far that it’d be a waste of time, I was ready to display them all. So I scanned the versions in and then played around with them in photoshop until they are darkened but not distorted, I find this again aids the client in visualising the options clearer. At this stage you're sharing the work to really to gain a better understanding of what the client's preferences are so you can get on the same page in regards to stylistic direction. It’s also the first point to explain my thoughts on how each one relates to the goals for the project. After initial discussions with the client and with the research I had done, I was pretty confident I knew which ones would appeal to them the most. They did select the ones which I advised towards being the best, which is always a relieving moment. I know that some designers don’t offer the options to their client at this early stage. I think it’s so important to keep them engaged from the beginning so that you don’t go off on the wrong path and face the revisions at the end. The client chose options 2, 3, 6, and 7 as his favourites and you can see the reasons below. 2: I love the underline, and the slight slant works well conveying movement. Maybe slightly harsh on the eye though. 3: I think it’s interesting and could be really cool or could be a bit odd. I think you could experiment a lot with it. 6: Is similar to 2 but feels more understated. Experimenting with the underline could work well here. 7: Surprised I liked this one but it feels like it has some flow to it. The capital T works well. They agreed that 5 and 9 were not clear enough and I agreed with what he said so onto the next stage. Refining Chosen Sketches   I take the scanned sketches, scale them up a bit and print them off so I can go into more detail and refine them. I use a light pad to trace versions rather than using tracing paper, that’s just my preference. Along with this I have some notes for each sketch with what to focus on initially improving. I work on this until I have them to a point where they are almost as refined as I can get them on paper. With this particular project it was more straight lines due the preference of the more simple, san serif style. So I think the computer is where the larger refinements could be seen properly. On projects where the style is more rounded and cursive then I like working on paper and creating nice smooth curves for longer as I feel like you can capture more personalitly on paper. I offered each option with variations to show which ones could be experimented with further. The aim is exhaust all possible directions narrowing your way down to the perfect final logotype. The client decision was to take 1 and 3 further. I decided that making a quick digital rough would give a clearer idea of the final and help finalise it down to 1 version. Digital Roughs   Starting in illustrator now I made both versions to a point where they were slightly refined but not nearly perfect. I also came up with a 3rd version which stemmed from option 3. This is now the point where you can really start to see what you’ve envisioned them to look like coming together. We decided that 1 would be the best option to refine completely. It had been the stand out for me all the way. It offered lots of options to experiment with underlines, fullstops etc. I made some small changes to it from the sketch, but it maintains the same character and basic overall look and feel. I added a fullstop as I know the client mentioned something about it. I think that we had a strong base to work off from here and now it was just down to the final refinements. Final Refinements   Now it’s all about the details. The main thing I discover when refining is when I tested what we had on a dark value, it looked too bold. This logo needs to be versatile and work in many usage cases, so I concurred with the client and displayed thinner version, we both felt that even making the line weight a little thinner helped with that issue and we kept pushing on. When I come to create the final version firstly, I create a grid so that I can align all the horizontal and diagonal lines. After this I look at the letter spacing and the kern the final version. Finally I go over making use the letter endings are all the same. Not forgetting the most important part which Is checking the logotype optically and how it looks to the eye. Sometimes the grid might force things that don’t look natural enough so making sure it looks optically perfect and not just grid perfect is important. The adjustments I had to make to this were the curves in the m, they were too thick and similarly with the p. I also did a lot of playing around with the a’s as they were becoming a distinguishable feature in the logo. As we planned to do, I also showed thick and thinner options with underlines and small changes which you can see below. We ended up going with a rounded full stop which you can see on the final version. Final Logotype   Here is the final version, on a dark and light value. There isn’t a colour palette yet as the project is in its very early stages. I've tried to share all the details I could, and hope this has been useful to some of you. Don’t hesitate to contact me if you have any further questions.    More Information: http://joesutton.co and make sure to follow him on Dribbble.

Android Native Prototyping - Shapes and Click Event

Android Prototyping for Designers - Shapes and Click Event

Prototyping has become a very important part of the UI/UX design process. With mobile applications taking over the web it is imperative for designers to find ways to test their designs on the devices. In the beginning most designers, including myself, relied on HTML, CSS and Javascript to emulate the native experiences that the users would see. It worked quite well and still does, however it's not a very reliable approach if you really want to understand the constraints and complexities that a developer may face when translating your designs into the final product. With that in mind, I decided to focus my efforts on the Android Platform and Java to be able to create truly native prototypes. In addition, I wanted to deliver more than redlines but reusable assets that could reduce the churn and bug fixes because of differences in the jargon used by designer tools compared to the developers. Android doesn't have the same fame that its counterpart iOS has, however it's a great platform and it's not that complicated to learn for simple prototypes. Dare I say that it's easier than investing in learning Framer, for example, if you are designing for Android. The benefits of learning the right tool are enormous. Here are a few points I want to highlight Truly knowledge of platform constraints Much better communication with developers Reusable assets and styles Real craftsmanship workflow Well, enough pontificating, let's go straight to the tutorial. Android Prototyping for Designers Step 1 Open Android Studio and start a new project. The Application name I used is Shapes. Step 2 For prototyping I don't have to worry to much about older versions of Android. Of course it's important to know which one to choose. You can use the "Help me choose" option. But API 21 is the one that has the Material Design specs, so let's go with that one. You can have the spec running on older devices with the Support Library, but that is for another post. It's quite geeky, I don't understand either :) Step 3 You can select some templates to start with. For this project let's start with an Empty Activity. It will have Action Bar and some theme assigned, I will talk about that on a next post. For now, let's just play with shapes. Step 4 Okay, now it's when things get overlwhelming. Don't worry it's simpler thant it looks. What you see below is the Java file, or the behavior of our prototype. Step 5 For now let's focus on the design. On the left side, in the project tree column, select the folder "res" and then "layout". Click on "activity_main.xml". That's the layout of our prototype. Step 6 Delete that "Hello world" string. We won't need that for this prototype. In this screen we have the layout of our app. We have a column with widgets and right below a panel called "Component tree". You see that there's a component called "activity_main (RelativeLayout)". That is the main container of our prototype. We will add more components inside this one. Note also on the right side there's a column called properties. There will will find all the properties for the component selected. I bet it sounds a bit more familiar. Especially for the Dreamweaver users out there :) Step 7 Let's change the background color of the "activity_main" to #eee. Just select the background option and enter the value. Step 8 Now let's create our rounded rectangle. In order to do that we will create a "drawable" for it. It's like a vector that can be used as background and will scale accordingly to the component we use it with. So, select the "drawable" folder and click with the right click of the mouse. Select "New" and then "Drawable resource file". Step 9 Name it rectangle.xml. In android pretty much all the files in the "res" folder will be .xml. With exception of bitmaps. Step 10 This is the default file created. It has the XML tag and a tag called "selector" Step 11 Just rename the "selector" to shape. Add a property called "shape" and use "rectangle". Inside of the shape tag add a item called "solid" with the color you want to use and another one called "corners" with the radius of the rounded corners you want. Use the image below for reference. Also take advantage of the Android Studio autocomplete. It will save you so much time. Step 12 Back to the "activity_main.xml" file. Now let's add a new component to our layout. But before make sure the activity_main component has 0dp for padding. Step 13 Just drag a RelativeLayout component to the center of the screen. Change its height to 200dp and use 24dp for margins. Step 14 Now let's use our drawable for the background. Find the "background" property and click on the "..." icon to open the "Resources" dialog box. Step 15 Search for the "rectangle" drawable we created and selected it. Step 16 There you go, you have a card designed in Android Studio and ready to be deployed. Now comes the fun part. With Material Design we have the light properties that we can play with. Android renders that in real time. You can use either "elevation" or "translationZ" to cast shadows. Step 17 Let's try elevation. Set it to 4dps and Run your prototype in the emulator. Step 18 And there you have it. A nice card, rendered natively using nothing but XML. It's as easy if not easier than using HTML and CSS. Step 19 Now let's get a bit more advanced and try to add a click event to this card. The first thing we need is an "ID". Enter and id name "card" to the card, very creative :) Step 20 Now open the MainActivity.java and let's write some JAVA code. In order to access the card layout from the XML file we need to declare and bind the data. The first thing to do is to create a JAVA variable that will be a RelativeLayout like the component we use. To do that just write "RelativeLayout card;" Use the image below for reference. Note the position of that variable is important, write before the OnCreate method. Step 21 Once we have the "card" variable created, let's linked to our xml card. To do that bind it using the ID. The code is quite simple: "card = (RelativeLayout) findViewById(R.id.card);" - Don't ask me what the "R" is. I still don't know. Step 22 After that, it's almost like JavaScript. Just create a ClickListener event. Use the auto-complete. Note, every time you see the red underline alert press "Command+Return" to show the options. Step 23 Here's the auto-complete OnClickEventListener{...} - once you select that it will create the necessary methos and overrides for you. Step 24 Step 25 Now just change the cards properties. Here I just set the elevation to 300. So when you click the card will pop out. Step 26 So let's get a bit fancy. Instead of using setElevation, let's animate. To do that is even simpler. Just write "card.animate().translationZ(300).start(). That will animate with the click. Step 27 Let's also make the card scale X and Y. Step 28 In order to change the curves in android we have to use something call Interpolator. Here I am using a subtle elastic one called "AnticipateOvershootInterpolator()". It's pretty much the same thing as translation, you just add "setInterpolator(new AnticipateOvershootInterpolator())". Conclusion If you want to get fancier you can create an "if" statement with a "boolean" value to go back from one state to the other. Again, it's quite similar to JavaScript in my bad coding knowledge. The best thing is that you get full native experience and understanding about the medium you are working with. That, for me, is the true definition of craftsmanship. Knowing the tools, the materials and having the skills to do it. I hope you enjoy this uber long tutorial. I'll endeavor to write shorter ones for the forthcoming parts. Download Android Studio project

BramTalks on How to Create New Digital Art

BramTalks on How to Create New Digital Art

We’ve been fans of the work of designer & maker Bram Vanhaeren for quite a while. Based in Antwerp, Belgium, he has been creating and making many works with that distinct style of his with a vibrant colorful palette coming together with unique vector shapes. About 4 months ago, Bram made his debut with a YouTube Channel where you can find interesting videos on different insights on the industry and some of this life experiences. It’s quite lovely to follow along, definitely give it a watch. For today’s feature, Bram is sharing his process on making new digital art, hope you will enjoy! Wonder how I create a new portrait? How I exactly work? Today I'm really excited to share precisely how I create new work and show you my process. Starting with an idea, a hyper time-lapse shot - to give you a glimpse on all the magic that happens in Illustrator & some insights how I pick my photographic material. Watch the Video   More information: http://www.bramvanhaeren.com.

ABDZ CSS box-shadow rollover effect

ABDZ CSS box-shadow rollover effect

A couple of months ago we shipped the new version of Abduzeedo to our readers - a new post detailing the impetus and features of the new site is forthcoming. In a nutshell, our main goal was to simplify and reduce as much as we could. One of the areas we decided to invest our time was in subtle little effects like night mode with a dark theme and CSS rollover effects over images. The latter one has been praised by a number of our readers and we have received quite a few requests asking how we did it, so I will try to lay it all out here in this post. The image shadow rollover effect is quite straightforward. It was inspired by the new Apple TV visual language in which they use long and colorful shadows for selected items as well as a lot of Dribbble references. The visual design community has embraced that and I love the effect so I decided to recreate it. The outcome is pretty much CSS box-shadow and Javascript to extract colors of the images. Design When I was designing the site in Sketch I started playing with some ideas of using dramatic shadows that I used when I was designing my personal site. Here’s an example (http://fabiosasso.com/labs/newsite/) of long shadows for text. The cool thing about Sketch is that the shadow property is pretty much the same as in CSS. That gives us the opportunity to try several variations until we got the result wanted. I played with tons of shadows, different opacities like you can see in the image above. My final CSS was something as simple as: box-shadow: 0 4px 4px rgba(0, 0, 0, .1), 0 8px 8px rgba(0, 0, 0, .1), 0 16px 16px rgba(0, 0, 0, .1), 0 32px 32px rgba(0, 0, 0, .15), 0 64px 64px rgba(0, 0, 0, .15); That CSS creates the shadow effect, now I just needed to put it on the “hover” state and that’s it. But in order to make it smooth I also used the CSS transition just for the box-shadow. transition: box-shadow .3s ease-out; For a regular black shadow that was enough, but I wanted to use some color extracted from the image to use as the CSS box color. To do that I used Javascript and a library called Vibrant.js. “Vibrant.js is a javascript port of the awesome Palette class in the Android support library.” The library extract up to 6 colors: Vibrant Muted DarkVibrant DarkMuted LightVibrant LightMuted The final thing to do was to select all images and extract the colors, then replace the RGBA() from the css to the one from the image. If the process is done in the client it might take a little longer depending on the image size, because of that we render a small image to use for the color extraction. Also, the fact that the effect only shows during rollover helped us to have a bit more time to do everything in the background. Of course nothing is perfect. We are still trying to fix some bugs. The script returns 'undefined' when the image doesn’t provide the specific color. That becomes quite difficult to predict because we never know the outcome, so sometimes you might see some weird colors. We are also fine-tuning the best configuration to improve the speed, one of the goals is to move from client to server so the colors are extracted and stored in the DB. That would significantly reduce the time of the extraction. We just need to learn how to do that :)

Stranger Things Logo - Photoshop Tutorials

Stranger Things Logo - Photoshop Tutorials

80's revival is stronger than ever. With Netflix's Stranger Things we're seeing people going crazy about 80's culture which is shown in the show thru its style and easter eggs. One of the things that set ambience for the show is its logo. I thought it would be cool trying to mimic its style in Photoshop, so let's try it out. Step 1 Open Photoshop and create a new document. I am using 1920x900 pixels. After that fill the layer with a gradient #000000 and #303030 for colors and tilt it for better effect. Step 2 Go to filter > blur > gaussian blur and fill with 100 for radius. Step 3 Add a new layer above it and fill it with #d91f26. Set is blend mode to Multiply. Step 4 Time to add some text. I'm using the original logo font, called Benguiat. The weight is bold. You can buy it at MyFonts, or feel free to use a bold, serif font of your choice. Adjust the text so that it has 2 lines, the top one being wider than the bottom one. Turn all text black (#000000). Step 5 Group the text. In its blending options add a stroke of 10px, #d91f26 for color. Step 6 Inside the group add 3 black, rounded rectangles, a wide one at the top and 2 smaller ones at the sides. Duplicate this group and turn the copy invisible, because we'll save it for later. Step 7 Add a new layer below the visible group and fill it with #000000. Step 8 Merge the group with this new black layer. Step 9 Set the blending mode to Color Dodge. Step 10 Duplicate this layer, and set the blending mode of the copy to Overlay. Step 11 Turn visible the copied group from ealier. Make its stroke thinner, from 10px to 8px. Add a new layer above this group. Step 12 Merge the new layer with this group. Go to filter > blur > gaussian blur. Set it to 1px and apply. Step 13 For its blending mode, set it to Color Dogde, and Opacity 50%. Step 14 Add new layer. Using a round brush add some strokes covering the logo. Step 15 Add a gaussian blur of 100px to these strokes. Step 16 Blending mode: Color Dodge, Opacity: 30%. Step 17 Merge all visible layers. Duplicate it. Step 18 Add noise to the top layer. Go to filter > noise > add noise. For values use Amount: 5%, Distribution: Gaussian, Monochromatic. Step 19 Set its blending mode to Overlay, Opacity 70%. Final Result I know the final result it's not a clone of the original style, but it mimics the original pretty well. I hope it inspires you to keep trying to perfect it and even make a perfect clone.

Ode to the 80s - Photoshop Tutorials

Ode to the 80s - Photoshop Tutorials

Last weekend while surfing the web I discovered this image of a classic 80s style logo. I noticed the option to buy the effect, amazed that nowadays we can simply buy something to streamline the process. I love this idea but I also feel that it's important to try to recreate sans short cut in an effort to learn something new. Of course you need time, but that was something I sort of had so I decided to take a crack. So on this post I will share a bit of my process using Illustrator and Photoshop. Step 1 To create the 3D effect I used Illustrator's Blend Tool. I feel that it might be the quickest way to get a nice extrusion, especially for this particular type of graphic. CGI in the 80s was still evolving and playing with basic geometries. Step 2 Now in Photoshop I created a document and the background I set to black. Step 3 Paste the vector in Photoshop, make sure you use Smart Objects. It's always good to be able to make mistakes and just change fix it withouth much hassle. Step 4 Now for the top part let's add some nice gradient from blue #0000ff to a very light blue. Step 5 Duplicate that layer and then add some Layer Styles to create the bevel and stroke effects. The images below show the values. Step 6 For the complementary text I used a font that I found on DaFont, a super cheesy one that has all of that 80s feeling. The font is Las Enter Font (http://www.dafont.com/lasenter.font). Just add your text and with Layer styes add 2 drop shadows. The first one white and the second black, that will create a nice bevel effect. Step 7 Now for the background let's apply a gradient. Get some of the colors from the logo to make it look like the logo is sort of illuminating the background. Step 8 Select the 3D extrusion layer and add an Adjustment Layer Hue and Saturation. The idea hear is to add a bit more Saturation, Brightness and Hue. Step 9 The classic reflection of the 80s, you can do that very easily by creating a sort of wavy selection and then create a layer to apply the same gradient that the text has. Step 10 Now it's that time, the little flares that are part of that beautiful decade. To do that is quite easy, create a new folder on your layer palletes and add a new layer in this folder. Change the folder Blend Mode to Color Dodge. Then select the layer inside and with the Brush Tool and a very soft brush you can just create some dots with white color. The result is a quite awesome light effect. Step 11 To add a bit more mood to the scene I just added some smoke using the Render>Clouds. Then change the Blend Mode to Linear Color Dodge. Also add a Layer Style with a Gradient Overlay. Use Linear with blue at the top and purple for the bottom. Step 12 It would not be an 80s graphic without the classic scanline effect. I created a pattern with 2 rectangles, a black and an white. Then I filled a layer with this pattern and placed on top of all the other layers using Soft Light for the blend mode. I also applied a super soft blur. Step 13 To add a bit more texture I added a new layer and then filled it with white. After that I went to Filter>Pixelate>Pointilize. Then just change the Blend Mode to Overlay at 10%, it's very subtle but you can notice the difference. Step 14 I always like to add a bit of a warm feel to the image. For this particular one I just added an adjustment layer Photo Filter on top of all the other layers. Step 15 To finalize the image I added some lightning bolts. I used an image I found on Google Images. I also adjusted the flares to match where the bolts intersect with the logo. Step 16 The last thing I did here was just to duplicated all layers and merge them onto a new one. Then I applied Gaussian Blur with 20px for the amount and after that I just changed the Blend Mode to Hard Light at 60% Opacity. Conclusion Here's the final image. I added a grey solid layer on top at 10% Opacity to create a little Fade effect and that's it. As you can see, it's not a really complicated effect, it just require some trial and error and time to go through all steps. I even played with some color variations like an all red one. Download Photoshop file Download Photoshop file used for this tutorial

Cutout Paper Style - Photoshop Tutorials

Cutout Paper Style - Photoshop Tutorials

It is been quite a long time since the last time I posted a tutorial. I haven't for some reason stopped. I used to do this every week, it was part of my routine but little by little I stopped doing. I remember never having too much of hard time to come up with something but without using it, I definitely lost it. Now I am trying to create a routine again and write a few tutorials per month. Nothing fancy, just things I'd like to try and for this first one I decided to try a little sort of cutout effect using Photoshop. I added a little color touch in the end, just to make it a bit more unique. Anyways, I hope I start getting better little by little. Step 1 Start with a circle in the middle of your canvas. Step 2 Add two other smaller circles like the image below. You can add more if you want but for this composition I used 3 cricle only. Step 3 Now it is the most important part, the Layer Styles. They will give the look we are looking for. First thing let's use a Bevel & Emboss. That's because if you noticed, when you cut paper, the border always has a litte reflection and bump from the cut. Step 4 Second part of course is the shadow. That will give the optical illusion of depth. For this I used the Inner Shadow, that way we have control of the shadows for each circle. Another important thing is the Noise for the Quality. That gives that little dirty look that real materials have. Step 5 The last thing is the paper texture. For that we will use the Pattern Overlay with a paper texture I found on Google. You can use any texture you want. Ideally, you should take a photo of the texture you want, that way you have a trully unique design. Step 6 Here's the outcome of the layer styles for all three layers. Step 7 Now add the pattern to background of the artwork. Besides that I added the Abduzeedo logo in the center and use pretty much the same layer styles, but instead of inner shadow I used Drop Shadow. Step 8 Add a layer on top of the other layers and then with the brush tool paint half with cyan and the other half with pink. Then you can mask using the biggest circle as the mask shape. Step 9 Change the Blend Mode to Soft Light, that way it will affect just the shadow and grey tones. Conclusion You can duplicate all layers and merge them onto a new one, then use Color Burn for the Blend Mode in order to increase the contrast. The outcome will be something simple but yet with some nice contrast. Download Download the Photoshop file

Sketch into an animation tutorial

Sketch into an animation tutorial

With mobile devices and tablets at our disposal we now have pretty much an arsenal of tools that in the past would be almost unthinkable. I remember using a scanner to scan photos from magazines or that I took for textures and references for vector. Adobe has been present during my almost 20 year design career and with the Capture app we can literally collect resources anywhere, anytime. This tutorial showcases how Alex Fleisig's use Adobe Capture CC and Adobe Animate CC to create a really cool animation. Check it out. Step 1 Copy Alex Fleisig's sketch to your Creative Cloud library. To use Alex's sketch, click the . Click Save to Creative Cloud to copy the asset to your Creative Cloud Library. Note: You need to be signed in to your Creative Cloud account to save the library. Step 2 Capture a shape Launch Capture CC. Select Shapes (1) and tap the + icon. Tap the Capture From icon (2) at the bottom of the screen to browse to your images. Select Creative Cloud (3), tap the down arrow to the right of My Assets (4), to get to My Libraries > Capture + Animate (5). Select the koala_sketch photo, then tap the blue Open button. Note: The screenshots and instructions in this tutorial show Capture on an Android phone. The user interface may vary between iPad, iPad Pro, iPhone, and Android device Step 3 Convert the sketch to a vector shape. Capture CC transforms Alex’s pencil drawing to a vector shape that maintains its sharpness at any size. Drag the slider handle left or right, to capture more or less detail in the shape. Tap the Capture button (camera icon) to capture the image and turn it into a vector shape. If necessary, refine the shape by selecting Remove from Shape or Keep in Shape. Drag your finger over the details you want to remove or keep in the vectorized graphic. Tap the arrow. Capture converts your shape into a vector. When complete, Capture guides you to the next screen to name and save the koala shape (we named it koala_A, in the Capture + Animate Library). Step 4 Capture a color theme. Tap Colors, then tap the + icon. Point your camera at a colorful scene. Interactive color circles will appear on top of the image. Tap the screen to freeze it so you can move individual color circles to adjust the theme. Tap the Capture button checkmark to capture a theme of 5 colors. Step 5 Save your color theme. Type a name for your color theme. Choose the appropriate Creative Cloud Library, then tap the checkmark to save. You will use this theme in Animate CC to color your animated koala. Step 6 Animate your character. Watch this video to see Joseph Labrecque retrieve the koala and color theme from Creative Cloud Libraries in Animate CC, and bring the character to life with some fun animation.   For more information about Adobe Animate CC visit https://www.adobe.com/go/learn_animate_download_en. And for Adobe Capture CC, check out http://www.adobe.com/products/capture.html Also make sure you check out Alex's work at http://alexfleisig.blogspot.com/

Holiday Card - Adobe Capture and Illustrator Tutorials

Holiday Card - Adobe Capture and Illustrator Tutorials

It's that time again, the most wonderful time of the year, at least that's what the old song says. I love the holidays, and Abduzeedo was born at this time back in 2006, which makes me even more nostalgic. But the reason of this post is not to talk about the past but to showcase a tutorial that illustrates the future at least in terms of how mobile tools can be incorporated in your design process replacing old things like scanners. This tutorial is a courtesy of Von Glitschka. He shows us how to create a Holiday Card using Adobe tools like Capture and the old classic Illustrator. Step 1 Even in a digital age, I like to begin with a pen and paper. This design started off as a rough sketch to work out the main art for our design’s theme. Step 2 Working from our rough sketch, I inked the final line work with a brush pen to imbue it with nice thick and thin lines. Step 3 Using Adobe Capture CC, I transformed my art from ink on paper to a digital vector image. I also used the slide control to adjust the exposure and add/subtract detail. Step 4 Once I’ve captured my artwork, I quickly removed the unwanted content, including the pen captured in this image, using the select/deselect slider. Step 5 Using Creative Cloud’s CreativeSync feature, I easily saved my captured assets into Creative Cloud Libraries. From there, I was able to access my vector artwork across Illustrator CC and Photoshop CC within seconds. Step 6 Since installing Adobe Capture CC, I take pictures of anything and everything for inspiration! I’m particularly fond of these anime manga patches, which I used to develop my color theme. The best part – all of these swatches can be easily saved to CC Libraries and acessed in Illustrator CC, InDesign CC and Photoshop CC. Step 7 Once I transferred my artwork from Adobe Capture CC into Illustrator CC, I began to add colors to my penguin. I wanted the color to loosely fit within the lines, so I used the Pen tool and loosely followed the shapes. Step 8 Seeing the colors captured with Adobe Capture CC helped me adjust my overall color scheme to improve my design. Instead of black, I shifted the line work to a darker blue. This kind of fluid workflow is facilitated by Adobe Capture CC because it allows me to easily experiment with a wide range of swatches at a moment’s notice and consider color themes I might not have thought of before. Step 9 Focusing on the background, I used my custom color theme to build out the background image and snow. Step 10 With Adobe Capture CC, you can leverage analog methods and easily integrate them into a digital workflow. For this design, I wanted authentic-looking brush strokes, so I used an actual paint brush and black acrylic paint to create the artwork. Step 11 I love making custom brushes with Adobe Capture CC. For this, I captured my hand-painted strokes, then cropped out what I didn't need. Using the filters, I adjusted and customized my brush stroke to transpose it into an asset. Adobe Capture CC allowed me to test drive the brush within the app so I could see how it would look once I accessed it in Photoshop CC or Illustrator CC via CC Libraries. Step 12 Once I saved my brushes to a CC Library, they automatically appeared in my CC Libraries panel in Illustrator CC. I drew a stroke and applied the new brush design to it. The process doesn’t get any easier, and the results look authentic and add a lot of organic flair to the overall aesthetic. Step 13 I could have used a font, but almost everything in this design was created by hand, so I decided handletter the type as well. I sketched the words on paper, scanned it in and used the Pen tool to complete.   The final type in place really added a nice level of fun to this design. Looking at my design, I realized I was missing an integral piece – SNOWFLAKES!   Instead of cluttering the design with ornate graphics of snowflakes, I decided to use a repeat pattern. I first created a Pattern swatch (shown on left) in black and white, then adjusted the opacity of the various white flakes as they’d appear on the background color. Once I was happy with the snow, I dragged the art into the Swatches panel and began using the pattern.   To adjust the pattern tiling, adjust the elements of the pattern, or recolor it, I just double-click on the Pattern swatch to enter Pattern Editing mode in Illustrator CC.   My initial color composition was blue, but creativity is all about exploration. I played around with the color themes to develop three separate color iterations. I settled on the green color scheme for my final holiday card design. The final card design is fun, as was the process to create it using Adobe Capture CC and Illustrator CC. In total, this project took me about 3 hours. For more information check out http://www.glitschkastudios.com/

ABDZ 07 Playing with Shades - Photoshop Tutorial

ABDZ 07 Playing with Shades - Photoshop Tutorial

Back to my image a week after a short vacation, much needed. I have also been spending my time with the new Abduzeedo which is looking much sleeker and soon will be going live. This week I decided to recreate an effect I saw a couple of weeks ago and I saved the screenshot because I thought it would be awesome to know how to do it. After a few tries I think I got a good result, at least worth sharing with you guys. Step 1 Starting with the simple path of the Abduzeedo logo in Illustrator. Step 2 WIth the Offset Path I made the logo thicker and it will also be used to separate both sides. Step 3 Here you can see the 2 different sides. I used red and black but that doesn't really matter because I will change those colors in Photoshop in the next steps. Step 4 Paste the vector from Illustrator to Photoshop. With the Magic Wand Tool I selected the black color and created a new layer with that as a mask. Step 5 Then I did the same thing for the red part. Step 6 After creating the layers, create 2 folders and move the mask to each one of the folders. After that just add layers and start paiting. The mask will do the job of keeping them separate. Step 7 I used the Lasso Tool (L) a few times to make some different cuts, like the 45 deg one on the you can see when the horizontal line connects with the other side. Step 8 Here's after a few tries. Step 9 The last thing I did was to add some shadow. Conclusion Here's the final image with a Photo Filter on top of it. This was a quick first try but I am very happy with the result, of course there's a lot to learn, but it's always good to learn some new things. Download Photoshop file Download the Photoshop file

ABDZ 06 Strokes and Paths - Photoshop Tutorial

ABDZ 06 Strokes and Paths - Photoshop Tutorial

Week 6 and here we go again. This morning while I was looking for some references or inspiration on what to do I saw a post on Instagram from the Street League, it's the league of street skateboarders. I loved the logo and decided to try to create something with the same style in Illustrator to learn how to do that. After that I just went to Photoshop to add some flare. Below you can see the behind the scenes on how I achieved this effect. Step 1 I started in Illustrator with 3 circles with 1pt for the stroke. Step 2 For the outer circle I changed the stroke to be 5pt for the Weight and Dashed Line with 0.5pt for the dash and 1pt for the gap. For the inner circle, change the Weight to 0.5pt and for the dashed line use 0.5pt for the dash and 1pt for the gap as well. Step 3 With the Type on Path Tool I added the text you want using the Type on a Path Tool. Step 4 Here I cut the parts of the circles/paths that went over the text and then added the Abduzeedo symbol and with some paths I added the Since 2006. Step 5 Now in Photoshop I pasted the vectors and changed the color to #04D9AE using the layer styles. For the background I used #19242D for the color. Step 6 Here I added a stock photo from Shutterstock titled Black textured background by Valzan. I put it on top of all other layers and used Overlay for the Blend Mode. Step 7 Now to add some more realism and old school effects I used the Layer Styles in Photohsop. I added Bevel & Emboss and Drop Shadow. The values are below. Conclusion Here's the final result. It feels quite cool for my new hat. Maybe it will be available at the Abduzeedo store very soon. Download Photoshop file Download Photoshop file used for this tutorial