articles on

#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

Playing with Fire - Photoshop Tutorials

Playing with Fire - Photoshop Tutorials

Week five and another image done. This time I went back in time and attempted a recreation of those crazy light effects I used to do in Photoshop back in 2006-2009. The main reason I wanted to do this was because I found out that with the new version of Photoshop we can now apply multiple layer styles, like multiple gradients, shadows, and inner shadows. That is something I always wanted to have and it's finally here. It saves so much time and also adds so much more power to one of my favorite features in Photoshop. Step 1 I started in Photoshop with a simple gradient from a super dark grey almost black to #453513 Step 2 Here I added an image to set the stage and make sure that the symbol looks great over a realistic metal background. The image I am using is courtesy of Shutterstock, it's titled Metal surface by Manczurov After importing the image make sure you change the blend mode to Soft Light and play with some masking. Step 3 Here I just added the Abduzeedo logo and went stright to Layer Styles. Step 4 Below you can see the layer styles I used for this image, the best thing about the new Photoshop is that finally you can have multiple styles, like more than one Gradient Overlay, or Shadows. For this image I took a lot of advantage of this features. Step 5 To add a little bit more realism I just added a flame, the image is from Shuttestock titled Fire flames collection by Lukas Gojda. I just imported to my image and with the Edit>Transform>Warp I made it match the design. Step 6 Here I created a new layer from a merged copy of all other layers. The shortcut is Command+Option+Shift+E. After that I appied a gaussian blur of 10 pixes for the radius and changed the Blend Mode to Soft Light at 60% Opacity. Step 7 Just duplicate the same layer and apply more blur. Change the Blend mode to Screen at 80%. Also use mask to make just the center visible. The sides should be super dark. Step 8 Here I just added a Photo Filter. Layer>New Adjustment Layer>Photo Filter. I used Colling Filter (82) to add a bit of blue to the image. Conclusion Here's the final result. It's a simple process but it's really cool that we have much more power now with Layer Styles in Photoshop. I always wanted that to happen and finally it's here. Now let's go to week 6. Download Photoshop file Download the Photoshop file used for this tutorial

Windows 10 Wallpaper - Photoshop Tutorials

Windows 10 Wallpaper - Photoshop Tutorials

Another week and another image to be done. The most difficult part is finding the inspiration point, this time however, I knew exactly what my mission would be. This week's image is my attempt at recreating the beautiful Windows 10 wallpaper created by GMUNK. In no way or form am I trying to take credit that this is my design, I just wanted to see if it was possible to create something similar just in Photoshop. The result you can see after the break. I am very happy with the outcome and I will share a little step-by-step on how I did it. Step 1 In Photoshop I started with a thicker version of the Abduzeedo logo in solid white. The background color also is important. I am using #101921 Step 2 After that I duplicated the logo and for the new copy I changed the opacity of the fill to 0 and added a stroke of 3 pixels in white. For the other solid one I just reduced the opacity to 30%. Step 4 Here I just applied a perspective to match the Windows 10 logo style. Just go to Edit>Transform>Perspective. I also created a new folder and moved the layers inside it. In addition to that I changed the Blend Mode of the group to Color Dodge. Step 5 Duplicate the layer with the stroke and go to Filter>Blur>Radial Blur. Use 100 for the Amount, Zoom for the Blur Method and Best for Quality. Step 6 The layer might not be visible or it's very subtle. Here's the secret, start duplicate that layer until you have the effect visible. Merge all the duplicated layers. Step 7 Apply the same Radial Blur to the merged layer. Repeat the same process again. Step 8 After a lot of times repeating the process you will end up with something like the image below. It's pretty straight forward, just duplicating the same layer. Step 9 Select the original layer with the stroke and duplicate it. After that change the stroke to a much thicker value. After that just create the layer from the layer style, add a layer mask to the layer and apply the Filter>Render>Clouds with black and white. The last thing to do to make some areas visible only, just change the Levels of the mask so you have just black and white. Step 10 Here's when I started adding some flares, literally. I used an image from Shutterstock titled Abstract image of lighting flare by 21. I added 2 copies of the flare as you can see in the image below. Step 11 Keeping with the details I used another Shutterstock image. This one is titled Abstract smoke moves on a black background by Vagengeim. The idea is to add that kind of fog/smoke effect you see in the original image. Conclusion To add the final details I simply created a new layer from a copy of all layers by using the shortcut, Command + Option + Shift + E. After that I apply a Gaussian Blur of 15 px radius. Duplicate the layer so you have 2. The one on top change the Blend Mode to Soft Light at 50% opacity. The other one use Screen at 70% opacity. That's it, the image is done. It looks much more complicated than it really is and of course the incredible image created for the Windows 10 was done with real photography and light coming from behind the symbol. Download Photoshop file Download Photoshop file for this tutorial

More Lines - Illustrator and Photoshop Tutorials

More Lines - Illustrator and Photoshop Tutorials

Let's go again. Third week and third image. I am taking my Sunday night to try to come up with something. I had forgotten how hard it is to start a new image from scratch. I must start paying more attention to movies and books so I can have more inspiration. For this week I tried to recreate a really cool shape I saw on Pinterest sometime ago that was about some hipster badges. I thought it was a great exercise and way to lose myself a bit more. I hope you enjoy it. Step 1 I started in Illustrator. With the Star Tool create a 4 sides star. Step 2 With the Direct Selection Tool (A) select the controller to round the corners. Use the maximum amount for the 4 point star. Step 3 Duplicate the rounded star and rotate it 45 degree. Step 4 Here I started to create some space when the lines intersect. Step 5 Here's the final result with the spaces. Step 6 I added the abduzeedo symbol and made the strokes a bit thinner. Step 7 With the Offset Path, the same we played with last week, I created 3 more lines for each path. They are closed though. Step 8 I delted the lines that connect the paths. That way they are now just 3 lines. There was some little adjustments to make them the same lenght as well. Step 9 I pasted the vectors in Photohsop and then added a Bevel & Emboss and Drop Shadow. You can see the values below. Conclusion To make the image a bit more dramatic I added a nice leather texture offered by Shutterstock, the image titled is Luxury black leather texture background by 123creative.com. The final result as yu can see is a simple yet elegant design. You can even try to add a more chrome style but I was very interested in getting that black on black look. Download Photoshop file Download Photoshop file

ABDZ 002: Playing with Strokes - Illustrator Tutorials

ABDZ 002: Playing with Strokes - Illustrator Tutorials

Second week of my little project of trying to create an image per week. This time I got inspired by simple vector illustrations I saw that had lines creating the logo. I've done something like this in the past but never with the style that I played with this week, completely out of my comfort zone. Below you can see the little step by step of this image done in Illustrator and Photoshop. Step 1 I started with the Abduzeedo logo in a simple line. Step 2 Then I used the Offset Path to create more lines. Step 3 The offset path is quite simple to use, just offset by 1pt and keep repeating that with the offset path result. Step 4 The end result of the offset path is always a closed shape. So with the Direct Selection Tool (A), I deleted the line that closed the shape to have open lines. Step 5 Now with the lines with a nice brownish color I added a solid and thick version of the logo with a redish/pink color under the lines. Step 6 To add more details I offset the outer path once again but for this one I used the dashed stroke with green for the color. Step 7 Here's in Photoshop already, I edited a bit the green path to make it less uniform. The background also was changed to a beige tone. Step 8 I added the logotype "Abduzeedo" trying to replicate the same effect. I just used copies of the text with different strokes. Conclusion Here's the final result of my second image. I had never played with this style and it was a good exercise for me, especially in terms of going out of my comfort zone. Download Photoshop file Click here to download the Photoshop file

ABDZ 001 - Illustrator and Photoshop Tutorials

ABDZ 001 - Illustrator and Photoshop Tutorials

In the past year I stopped writing tutorials and the main reason was that I thought they weren't relevant anymore given the copious amount of great websites out there. Also, I believe the audience of the blog has already matured and focused more on other areas of the design process such as ideations and the the process itself. The tools, as I always tried to emphasize, is the least important part of the process, but it's important to have command of them. As a good craftsman, knowing the best tool for each trade will save you a lot of time. The thing is, I miss creating new things and that helped me a lot in terms of productivity. With that in mind I will try to create an image per week for at least one year. Let's see if I can stick to my word. Step 1 In Illustrator I created a version of the Abduzeedo logo with a inner stroke. After that I just created a copy of the logo and moved it down and right to create a hard shadow. Step 2 I used the Blend Tool to create the lines for the highlighted area. The first part was kind of easy, just linear Blend. Step 3 For the edges that are curved it was a bit trickier. The biggest problem was the spacing between lines, so if you try to do it I recommend a lot of tweaking until you get a cool result. Step 4 Here's with both sides done with the Blend Tool. Step 5 Now in Photoshop I copied and pasted the composition in different layers. The idea is to manipulated each one individually. Step 6 For the lines created with the Blend Tool in Illustrator I just added a mask and with the soft brush I made them fade away on the edges. Step 7 Here's both sides once again. The bottom lefft is a bit too sgrong in my opinion. Step 8 With the brush tool I softed a bit more the bottom edged. Conclusion The last thing to do was to add a little noise and dust texture on top of everything. This image took me a few hours but most of the time was tweaking the details. At the end of the day that is what gives the level of refinement that I was trying to accomplish. Download Photoshop File Download Photoshop File