articles on

Ode to the 80s

Ode to the 80s

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 in Photoshop

Cutout Paper Style in Photoshop

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 with Adobe Capture and Illustrator

Holiday Card with Adobe Capture and Illustrator

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

ABDZ 07 - Playing with Shades

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 07 - Strokes and Paths

ABDZ 06 - Strokes and Paths

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

ABDZ 05 - Playing with Fire in Photoshop

ABDZ 05 - Playing with Fire in Photoshop

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

ABDZ 04 - Windows 10 Wallpaper in Photoshop

ABDZ 04 - Windows 10 Wallpaper in Photoshop

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

ABDZ 03 - More LInes in Illustrator and Photoshop

ABDZ 03 - More LInes in Illustrator and Photoshop

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

ABDZ 002 - Playing with Strokes

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

ABDZ 001 - Illustrator and Photoshop

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

Native Android Prototypes with Android Studio - Introduction

Native Android Prototypes with Android Studio - Introduction

I have been working designing interfaces for the web for over 15 years and for the past couple of years I have seen the switch to native apps being a big shift in the industry. I am a huge fan of the web but it's important to keep up with the industry. The design process also has been evolving and getting close to the Industrial Design process I was taught in school, where prototyping is a crucial part of the process. So in order for me to test my designs I have been relying on different tools and techniques to prototype. From pure Javascript/CSS/HTML5 to Framer I have seen a lot of potential, however for me, especially at work, I felt that using the native tools would give me a much better understanding of how to talk to engineers, see how things really work and if possible, help with the front-end process. So for this tutorial and a new series of tutorials I will show you how to create Android prototypes using Android Studio. I am far from proficient in Java, but I have been self-teaching myself by trial and error and use Google Search for most of my answers. So, I will try to share a bit of what I've learned along this new journey and I hope you can avoid making the same mistakes I made and save some extra time. In the end, the most important thing you will be able to visualize is your prototype running on your phone. Step 1 First thing to do is to download Android Studio. Go to http://developer.android.com/sdk and download your copy of Android Studio. Step 2 After downloading, install the app following the recommended options Step 3 Select the Licences and then select the Accept options. I know this sounds obvious but it took me a bit of time to figure our how that worked, I am just trying to save you some time ;) Step 4 Wait for all components to be downloaded. It might take a little while. Step 5 All set? Now it's time to star our new prototype. Click on Start a new Android Studio project Step 6 Use whatever you want for Application Name. Also select the location of your project in your machine. Step 7 This is an interesting screen. It gives a lot of options: are you creating an app for Phone and Tablet, TV, or Wear? Then you can choose the Minimum SDK. The cool thing is that the tool gives an idea of the average of users with that SDK, in the case of API 19 (KitKat) it's 33.9%. Step 8 For our case, as we are building a prototype, I will use the API 22. If you want to test on you phone, use the API that your phone has. Step 9 Now the tool offers you some options for the type of Activity you want to create. Activity is the same thing as screen. If you think about in terms of HTML, that would be one HTML page. For our first prototype, let's use Blank Activity. Step 10 Now you need to give a name to the Activity. I will use Home. Step 11 This is the UI of Android Studio. It might look a bit overwhelming but we will go through the main things and you will see that it's not that complicated. Step 12 I like the dark theme of the Android Studio, so go the the Android Studio>Preferences>Appearance. Use Darcula for theme. Step 13 So let's go through the UI. The left column, you have the Project files. With the App, then 3 directories: manifests, java, and res. Res is where the layouts and assets will live. The Layout folder is where the layout of your screens will be. In our example, the activity_home.xml. Step 14 In the center of the screen is the visual UI. You can select the components, move them around, delete and do whatever you want. You also have 2 taps for Design and Text. That is pretty much a toggle between two ways to design the UI, via a WYSWYG or code. Step 15 Step 16 If you want to see how your prototype looks, just press the Play button and select the emulator option. Step 17 To change the app name, go to res>values>strings.xml. Change the App name to the name you want to use for your application. I am using Abduzeedo. Step 18 Now let's add some content. The first thing to do is to add a ScrollView. We want our content to scroll so we need to use that component. In Android all components are views. Step 19 To change the size of your scroll view you can go to the property options on the right corner of the screen. There you can see the first 2 options layout:width and layout:height. Click on the right side and select wrap_content for both. Step 20 Select the Relative Layout that was automatic added to your activit and then in the properties scroll to padding and change the all to 0. Step 21 To add an image to your layout the first thing to do is to add it to your project folders. Select the drawable folder and with the right click of your mouse select Reveal in Finder. Then move the any bitmap to that folder. There's one thing to note, the filename should be lowercase. Step 21 Select the ImageView from the component column, move it to your screen. Then in the property view scroll to src and click on the (...) to open the Resources window. Select your image (cover_img). Step 22 Resize your image to the size you want. I am previewing the layout on a Nexus 5, so I change the layout:height to 512dp. If you want your ImageView to be the exact size and aspect ratio of your image, select the Adjust Bounds options. Step 23 Now let's add the title. To do that select the LargeText View. Then move it to your layout. Position it at the bottom of the ImageView. Then make sure that the layout:width is fill parent, and layout:height is wrap_content. For the padding use 16dp. for the textColor use #ffffff, for the fontSize use 32sp (the screenshot is wrong) and for the background get one color from the image. In the next tutorials I will show you how to extract the color from images. Tip. To use rgba colors you have to use the hex values that include alpha. There's a screenshot with some basic values, but Google is your friend to find out other values. Step 24 This is the image and the title text with background color. Step 25 Now let's add another RelativeView and a normalText view in it for our content paragraph. Paste a copy you want for the text and our first layout will be done. Tip. If you want to preview the whole screenview in your WYSWYG view, just make sure that the parent view is a ScrollView. Step 26 Run the emulator to preview your prototype and scroll to see the text. In future tutorials we will get more advanced with some scroll effects as well. Step 27 To replace the launcher icon click with the right click of the mouse on Drawable>New>Image Asset. Step 28 Select the icon you want and the app will generate all sizes you need. Conclusion Run the emulator once again and you will see your prototype with the right icon. Also plug your phone and enable it for USB debug. Then press Play and your phone will be listed in the options for where do you want to run the app. Select the phone and run the app. You will have your first app/prototype.

80s Artwork in Photoshop

80s Artwork in Photoshop

This weekend I took 30 minutes of my time to watch Kung Fury. What a masterpiece! It's a true homage to the 80s actions movies full of the cliche styles that made that era the most creative and visually rich in my opinion. After watching the movie I had to go back and dust off my Photoshop skills to create something inspired by that. The movie is full of references and of course the computer glowing grid effect which happened to inspire this tutorial. So for this tutorial I will show you how to create an 80s style composition with the classic glowing grid. We will use Photoshop for most of the tutorial and a little bit of Illustrator for the vector part. Step 1 Let's start by creating the grid that we will use in Photoshop. The best way or the easiest at least, for me, is to use Illustrator and the Rectangular Grid Tool Options. Create a grid with 40 dividers for both horizontal and vertical. That's it, the next steps will be all in Photoshop. Step 2 In Photoshop, create a new document. I am using 2880x1800 for the size. Paste the grid in the document and then with layer styles change the color of the grid to white. Step 3 Go to Edit>Transform>Distort. Then just start distorting the grid till you get the effect you want. Step 4 I am pretty much using half of the screen, a little bit less actually. Below you can see my result. Step 5 Select the background layer and then go to Layer>Layer Style>Gradient Overlay. Change the colors for purple to blue and make sure that the Dither option is selected. Step 6 Select the grid layer and group it. Change the Blend Mode of the group to Color Dodge. After that duplicate the grid and first apply a Gaussian Blur (5px). Then for the same layer apply a Layer Style Outer Glow. Use 30px for the Size. As you can see you will have a nice glowing grid. Step 7 Duplicate the group and flip it vertically so you create the top part. Step 8 With the Ellipse Tool create an ellipse filling the center of the screen line the image below. Step 9 Go to FIlter>Blur>Gaussian Blur and apply a 60 pixels radius blur to the ellipse. Step 10 Add a new layer and fill it with black. After that with the Brush Tool create an oval brush and paint with white in the center of the document like the image below. Step 11 Change the Blend Mode of the layer with the white ellipse to Multiply. Step 12 Add a new layer and fill it with white. After that go to Filter>Noise>Add Noise. Use 8% for the Amount and Gaussian for the distribution. Step 13 Change the Blend Mode to Overlay.You can also add a new layer with a scanline pattern to create an even more retro effect. Conclusion Of course to finish the design we need to add our logo. This time we are using the beautiful SN Neo-Noire Font font by the mighty James White from Signal Noise. The font fits like a glove to this style and as you can see we are pretty much done here. You can create variations with or without the top part. I kind a prefer without it. It is up to you. Now take 30 minutes to watch Kung Fury and also get inspired to play and learn new techniques in Photoshop. Download the Photoshop File Download Photoshop file

Playing with Lines in Photoshop and Illustrator

Playing with Lines in Photoshop and Illustrator

The last tutorial I wrote was back in January, it's been quite a long time and boy I missed it. I have been trying to organize myself to start playing more with not only Photoshop and Illustrator but also Sketch and other tools so I can share some new things with you. It's always a challenge due to my day to day job but it makes me feel so good when I finish something that went from my head to the final design in a very short period of time. Quite refreshing. So this week I will share a tutorial on an image I created inspired by some similar artworks I saw on Pinterest, more precisely, the project call Linea by Marcos Bernardes.. The tools I used were Illustrator for the basic vectors and Photoshop for the final details and shadows. Referencens Step 1 Open Illustrator and create a new document. After that with the Line Segment Tool create 2 lines like the image below. The rectangle size is for a 2880x1800 resolution. Step 2 Select the Blend Tool and create a blend object by tapping on both segments. After that double click on the Blend Tool icon to open the Blend Options dialog box. Change the Spacing to Specified Distance and use 30 pixels for it. Step 3 With the Pen Tool (P) create the shape you want to pop from the lines. I am using the Abduzeedo symbol. Step 4 After creating the shape you want duplicate it 3 or 4 times to make the symbol spread to more lines, like outer stroke. Also you will have to create a shape with the color of the background to hide the lines that go under the symbol. Step 5 After that with the Pen Tool and the Direct Selection Tool make sure to connect the new lines with the ones that they should diverge from. Step 6 Select the points that the lines connect and then change the corner option. I am using 90 pixels for the roundness. Step 7 Change the colors to the ones you prefer. I am using a dark grey and teal color. I like the dark themes, this one heavily inspired by Google Material Design. Step 8 With the Polygonal Lasso Tool select the symbol and create a new layer from it (Layer>New>Layer from Copy). After that go Layer>Layer Style>Drop Shadow. Step 9 For the shadow options I used Multiply for the Blend Mode, 120º angle, 20 pixels Distance, 40 pixels Size and the most important, 25% Noise. The noise is really cool because it adds some nice texture to a rather uniform vector illustration. Step 10 Group the layer and then apply a mask to hide the areas selected below. That way the shadow will give the perception that the lines are going over or popping from the rest of the composition. Conclusion You can also add some vignette and more textures if you want. For me it's pretty much done. I could go over some details that still bother me a little bit like some of the lines in the middle of my symbol. But that is beyond my little thought/practice exercise. I hope that is useful for you and you can play with that on your own ideas. Download Photoshop file Click here to download the Photoshop file

Abduzeedo Material Design - App Navigation

Abduzeedo Material Design - App Navigation

Last weekend I started the process to design the Abduzeedo mobile app and web for Android. The goal is to apply Google's Material Design style to the new app, but in order to do that we have to rethink quite a few things. The first thing we did last week was to get used to the spec, get files, assets and resources ready to start exploring. This past weekend, I spent more time thinking about how the navigation would be and then designing the look of the app. In this post I will walk you through some of the basic concepts I have in my head for the navigation of the app. Navigation One of the apps that I think has a great navigation is Newstand and the Play Store. There are a few things that I like about them: Gestures for navigation Seamless transition for different verticalsl The experience feels natural This model is not new, I remember some of the first iPad apps, was Wired Magazine, if I am not mistaken, used the same style. Actually magazines on tablets still use the same model. Vertical scrolling for the content about that topic and horizontal for different verticals. Some things bother me a little bit: The horizontal navigation limits the interactions for the specific vertical, we wouldn't be able to have another horizontal navigation Discoverability: It gets complicated for users to see all categories, either horizontal or vertical. If users scroll 3 panels to the right, it would take them another 3 screens to expose the navigation. Simple prototype in Keynote Keynote is a great tool for simple motion studies. You can simply create slides and use Magic Move to animate the objects from one slide to the other. Below you can see the simple prototype I put together to see how this idea would look. Based on the blog's stats, we know that users pretty much pass the second pagination. We also know that they don't click on the navigation very often either. The site is pretty much what they see. Because of that I think making the app more browsable will make a big difference. The cost of gesture seems to be much cheaper than the burden on clicks and page requests. The top navigation still bothers me. I would love to have just the content, and not navigation at all. One of the apps that does that really well is Facebook Paper. I like the way they handle the navigation by using real content. There are a few ideas to consider: Expose the navigation when user scrolls, both vertically or horizontally Use the pull to refresh style to expose the navigation Based on simple keynote animations I think a mix of both cases might do the job. The simple wireframes gave me an overview of how the navigation might work. In terms of UX/navigation, the app is quite straightforward and it won't have more than 2 levels of hierarchy. Users see an article teaser and then the full view. The full view might have some related articles, but the idea is that every article details would be a modal, by clicking on related articles, users would leave the modal. By clicking on a different article, users would go back to a modal again. Next week my goal is to prototype this model with HTML and Javascript to test on my phone. Nothing fancy, I just want to see how it feels on hand. After that we can go back to visual and motion design. It's important now to see the big picture, before getting too immersed in the details.

Abduzeedo Material Design

Abduzeedo Material Design

This weekend I started working on an Android mobile version of the site using the Material Design spec. The style-guide is super complete and covers a lot of basic visual design needs like grid system, typography and color palettes. Besides that Google was awesome to provide sticker sheets in Photoshop, Illustrator and Sketch. So for the next couple of weeks I will be exploring some new designs for Abduzeedo and will be sharing with you here. In this first post I will share my first steps, downloading fonts, files and basic layouts. I would love to hear your feedback and also if you want to join the redesign of Abduzeedo please do share and we can definitely apply your design tips and give all the credits to you. Getting started The first thing to do is head over to Google Design (http://google.com/design/) and check out the spec, communities and everything available. After that focus on the spec because there are so many cool things already done for you so you can spend time trying to solve your design problems and improving your product. Typography My idea is to design an Android app, so I will first try to stick with Roboto for the font, but later on I might try to bring back some of our current design which used Varela Rounded. So again, download the font and install it so we can get started. Resources Besides downloading Roboto, make sure you get other resources available on the site as well, including layout templates, sticker sheets and icons. I downloaded the Components sticker sheet for Sketch for my project. Example of the sticker sheet in Sketch. All components I need to start designing my mobile app. References Another important thing is to know where to look for some references. Of course there are much more than just digital references but it's good to see what others have been doing with the Material Design spec. That said, Materialup is a great website with tons of amazing examples from visual to motion design. Designing the app Abduzeedo is a website that is all about images, we started it as a way to share images and other things that inspired us and because we decided to write it in english we were always trying to be short because of the limits of our english skills but also because we knew that there was a universal language commonly understood by all and images do an amazing job of speaking to that. That said for the mobile app, based on stats, we believe there are some things we could explore: Horizontal navigation for different categories (tabs) Full screen images for the featured content like Flipboard Simple yet elegant grid for verticals. Questions we always ask ourselves: Do we need description text besides the title? What metadata do we need to display? Could we not show title at all, just the image? How will we handle ads? Those questions are extremely important for us to set some constraints. Advertising is always the most complicated, at least on desktop, due to the format sizes that usually are fixed and not responsive. For mobile, at least for the first part, I won't bother with ads. I know it's wrong but I want to focus on creating a super compelling visual experience. The first thing I did was to get one layout template. The dark theme looks interesting, but it's quite different from the desktop experience. I won't scratch it off my list but I decided to try a light theme using the tabs navigation. As you can see below, it definitely looks very coherent with our current experience. One version I also explored with the Abduzeedo symbol in the center of the app bar. I know that it's not in the spec, but as I said, I want to explore ways to apply the style but not get limited to it. Another thing that you can see in the mocks, is that I tried to use cards. I am not a fan of cards, but it's important to explore all possibilities. Explorations The navigation with tabs feels good to me, especially in apps like Newstand and Flipboard. There are a couple of issues I encountered: The navigation tends to take a lot of real state. Is there a smarter way to solve that? Facebook Paper does a great job with gesture navigation and pretty much a transparent UI. How discoverable will it be for the users and also how many tabs should the app have? Below you can see some explorations with the Featured screen which would have 1-3 articles using full screen images with big and bold text. Swiping to the left we would have the Recent tabs, which is the current stream of our website. For this session my idea is to have full width content with 8dps space between content inspired by the Inbox. For the vertical areas I explored a grid with just images. The idea sounded good in my head, but the first exploration looked a bit too overwhelming for the users, especially due to the lack of text. It's hard to understand what's going on. These explorations gave me some clear understanding of the direction to follow and that I had to simplify the design even more. Simplifying By removing the navigation the design gets to a level of simplicity that really pleases me. The featured screen really makes the image shine. The grid seems a bit weird, I tried to keep the 72dps left alignment for the title, it works for that screen, but for the Recent screen it was a bit to much, so I moved back to 16dps. To increase contrast, I decided to put the text over the images on a overlay block using a color extracted from the image. The first one you can see has a green color. To make it more subtle I changed the opacity to 70%, that way we can see the photo but still read the text quite well. The logo on the top right works really well, but I have to think about the navigation, that will be a much longer conversation To be continued... This is just the beginning of this process. I will try to keep this going for the next couple of weekends, going through the whole process and ending with dynamic prototypes. As I said, I would love to see you guys trying as well. I am curious to see what you guys would come up with for the Abduzeedo mobile design. So feel free to share with me via comments or via email at abduzeedo@gmail.com. Thanks so much and till next Sunday.

2015 Artwork

2015 Artwork

Since we started the blog in 2006 I have been creating an artwork to celebrate the new year. It's a way to start the year motivated and challenged. This year, 2015 we will celebrate 9 years on the road, so nothing better than put together the ninth installment of our series. This time I am using just Adobe Illustrator to create a simple and abstract 2015 poster. I will probably try to do that in HTML/CSS just for fun in the next couple of weeks. So I hope you enjoy and Happy New Year! Let's make it great! Step 1 Open Illustrator and create a new document. Start with 2 simple forms, a square and a circle. Step 2 With the Direct Selection Tool (A) delete the right side of the square. Also move the bottom part of the square to end at the top center point of the circle Step 3 Still with the Direct Selection Tool (A), delete the top left segment of the circle. Step 5 Now move the top part of the square to make it a little smaller. The number 5 will be pretty much done. Step 6 Create the number one using the Pen Tool (P) Step 7 Create a square to use as a frame/background for our logo. Step 8 As you could see in the previous step, I was playing with rounded corners for the numbers, however I think it's better to keep the edges sharp. So I moved back to the simple version. Step 9 Color selections. Here's the palette I decided to use. It's a pastels/80s style. Step 10 Time to apply the colors. The first thing to do is to make the strokes bigger and change them to white. Then start applying the colors from the color palette. Step 11 Create a rectangle and duplicate it 4 times to create a stripe effect. After that use the colors from the color palette in order, from the lighter at the top and darker at the bottom. Step 12 Select the 15 object and group it. After that copy it and paste it on top of the other objects. Select the top object and the color stripes (make sure they are grouped). Then press Command + 7 or Object>Clipping Mask>Make. Step 12 Now make sure that the background rectangle clips the numbers as well. Conclusion For the text I added a line per stripe to say "Welcome 2015 - Let's make it Great - ABDZ - Since 2006" and the design is done. It was a simple idea that I wanted to put together to celebrate the 9th year of Abduzeedo online. I hope you like it and happy 2015 to all.