tutorial

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.

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.

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.

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.

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 a 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.

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.

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.

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.

Playing with Fire - Photoshop Tutorials

Week five and another image is 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 that 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.

Windows 10 Wallpaper - Photoshop Tutorial

Another week and another image to be done and of course another Photoshop tutorial. 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.

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.

ABDZ 002: Playing with Strokes Illustrator Tutorial

The 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.

ABDZ 001 - Illustrator and Photoshop Tutorial

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 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.

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.

80s Artwork Photoshop Tutorial

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.

Playing with Lines Photoshop Tutorial

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 concise period. Quite refreshing.

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.

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.

2015 Artwork - Photoshop Tutorials

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!

ABDZ Constellation - Photoshop Tutorials

This weekend I went to the movies to watch Interstellar in IMAX 70mm. This movie was for me the most anticipated one this year and I left the theater in awe. The movie is visually stunning and as expected from Nolan, a mind-bending experience in terms of storytelling. Still blown away, I decided to create an image in Photoshop inspired by my experience watching this incredible film.