tutorial

Typographic Logo in Illustrator and Photoshop

I have been playing more with simple stencil style logos in my spare time, especially because it requires a lot of practice and attention to detail. I surely have a lot to improve upon and that's why I have been spending time trying to recreate this style using Illustrator and Photoshop. For this tutorial, I will show you how to use simple Illustrator tools to create a very trendy logo. The process is quite simple and can be applied to all sorts of logos and illustrations for your future projects.

Offset Path Effect

Last week Adobe release some new updates in the Creative Cloud apps, including Photoshop and Illustrator. The best new feature for me was the live corner effects in Illustrator. It is a simple little feature but it will make my job so much easier, especially when creating logos, icons and symbols. To give you a little overview I decided to create a new Abduzeedo wallpaper using Illustrator and Photoshop applying some offset path effects and of course the live corner.

Water Drop Effect in HTML & CSS

The best way to learn anything is by doing it, plain and simple, trial and error. With the explosion of mobile devices and the evolution of HTML5, CSS3 and browsers, knowing to code is almost a requirement to anyone willing to work with web. I have been playing more and more with CSS, trying to create simple things like basic typography styles to more complex ones, like water drop effects. In this post I will show you how to create a simple water drop effect using CSS. The process is quite simple but it will require some basic knowledge of CSS and a little bit of jQuery.

Vintage Stencil Style in Photoshop

Last week we posted a tutorial showing how to create simple artwork in Illustrator and then in Photoshop we added a few effects to make it look old and with that vintage/hipster feel. Some people asked about some of the steps in Photoshop so I decided to make a simple walkthrough about how to use Photoshop to create this kind of effect. It's a simple technique but it can be very handy for this kind of artwork.

Abduzeedo Happy Holidays Art in Illustrator and Photoshop

One of the best ways to learn is by practicing and trying to recreate styles and effects that you like. We have been doing this here on Abduzeedo since the beginning, always adapting a little bit to add our own unique flavor. The goal is to learn the details behind a style or composition so we can apply some of that to our future work. I've been seeing quite a few logos using this style so what we'll show you today is how to create a logo, Abduzeedo just seemed natural, using Illustrator and then Photoshop.

Abduzeedo 7th Anniversary Poster in Photoshop

This December Abduzeedo celebrates its 7th anniversary. In the end of 2006, after the robbery of our design studio, I decided to start a simple blog to share inspiration, experiments and to try to be more active in the community. Today, after 7 years, we have met so many amazing people but most importantly, we have learned so much together with everyone that visits the site. To celebrate the anniversary I created an image to illustrate our journey, a simple idea acknowledging how time flies.

Basic Animations in CSS and Javascript for Prototypes

Motion design is getting more important everyday when it comes to design interfaces that engage with the user both functionally and emotionally. Because of this, I started practicing with Javascript and jQuery to create basic animations for my prototypes. One of the most common animations comes into play when you want to build a list or animate items in a chain. To illustrate that today I share a simple technique I use for my prototypes. For this little tutorial we will play with some HTML, CSS and Javascript. The whole process won't take more than 30 minutes.

Abstract Artwork in Pixelmator

This weekend I was waiting for my flight sitting at the airport with no internet and decided to create a new wallpaper for Abduzeedo. I started in Photoshop, but then I decided to play a little bit with Pixelmator. After 1 hour and lots of experimenting the final result looked really nice and that's what I want to share with you in this tutorial. So in this tutorial I will show you how to create an abstract image using Pixelmator. The process is super simple and it won't take more than 30 minutes for you to achieve the same result.

Super Easy Soft Shadows in Illustrator

We all know that hyperrealist icons are over, the new trend now is flat and either hard shadows or super soft and subtle ones. You can also try to mix both styles, there are a lot of people actually doing that and the results are quite beautiful. With that in mind, I decided to give it a try in Illustrator and recreate this effect. So in this tutorial, I will show you how to create a simple soft shadow effect using the Blend Tool in Illustrator. We will also use the 3D features to create some subtle 3D effects.

iOS7 Frosted Glass Effect with HTML 5 and Javascript

With iOS7 Apple introduced a completely new design for the 6 year old OS. Among all the changes, one that really caught everyone's attention was the blurred background effect. Basically some parts of the UI get a nice frosted glass effect. There are a couple of ways to achieve this effect using HTML and CSS. The easiest way is to use CSS filters, however the performance on phones is far from usable. With that in mind I decided to experiment with Canvas and the result was quite good. So in this post I want to share a little bit about the idea behind this prototype.

Vector Breaking Bad RV in Illustrator

Last week we posted about some new trends in icon design and illustration. Today after spending hours watching Breaking Bad, I started to watch it a couple of weeks ago and now I am on season 5 already - I decided to create an illustration for a desktop wallpaper for my laptop and of course share with you the process in Illustrator. So in this case study/tutorial I will show you how to create an illustration inspired by Breaking Bad.

Dramatic Shadows in Photoshop CC

It has been quite a long time I've been thinking about creating a design with those very realistic shadows. This weekend I decided to give it a try. I started to think about what would be the best way, manually recreating that would be too much work. So I decided to try the 3D capabilities of Photoshop. It turned out to be the easiest and quickest way. The result was also very good.

Pixel Art in Illustrator

I am huge fan of pixel art, I even dabbled with the form in 2004, however after my studio got robbed, I lost my backup disks including my pixel work and I've never tried it again. As of late, I've been following the work of Alex Griendling and some of his amazing pixel arts. Inspired by that I decided to give it a try though I streamlined the process a little bit just to make my life a bit easier in Illustrator. So in this tutorial I will show you how to create a nice pixel art from an existing photo, in my case, the great Mohammed Ali.

Geometric Pattern in Illustrator

Last weekend I was playing in Illustrator trying to create a simple wallpaper to use on my phone and tablet. I love geometric patterns, but I hadn't done anything like that in a while. So, I started playing with some ideas inspired by Andy Gilmore. It's really nice to see how the Pattern Tool in Illustrator facilitates the process of creating patterns these days. So in this tutorial, I will show how to create a simple pattern in Illustrator. The process is pretty straightforward, but I believe it will be really useful when you need to create vector patterns for your projects.

Playing with Masks in Pixelmator

It's been quite a long time since the last time I posted a Pixelmator tutorial. I've been using Pixelmator more and more for my daily blog activities like simple and fast image editing. The tool is so fast and with the new version, you will be able to do pretty much anything you want. I've been also experimenting with the tool and having a lot of fun. Today I want to share one of these experiments. So in this tutorial, I will show you how to create a simple artwork mixing typography and images.

Intro to Cinema 4D Tutorial Series by Greyscalegorilla

From the mighty folks from Greyscalegorilla, they are bringing you a fun, educational, beautiful tutorial series showing you the basics and a broad introduction to Cinema 4D. And it's FREE! Either you're a beginner or a professional, having a creative workflow is a must in our industry. Greyscalegorilla will take you through Animation, Dynamics, Intro, Lighting and more! Don't wait up and start learning now! In Greyscalegorilla's Words If you are an artist or a Motion Designer, it’s probably time you get more familiar with 3D if you haven’t already.

Beautiful Water Effect in Photoshop CC

It's been quite a long time since I played with water textures. I was checking some amazing artworks on Behance and Pinterest when I saw some examples that really inspired me to try something and learn a little bit more about Photoshop and the Displace filter. So for this tutorial, I will show you how to create a really cool effect with water texture and the displace filter. Step 1 Open Photoshop and create a new document. I am using 2880x1800 pixels. After that fill the background layer with black.

Inspired by Oregon - Photoshop Tutorial

Back from my first visit to Portland, Oregon I got really inspired by the city, especially the rugged Pacific Northwest landscape, the grey colors of the sky, the Willamette River running right through town and the people that make the city unique. The first thing I was motivated to do upon my return was to create something inspired by Mark Weaver's work starting with a beautiful photo as the background and some less saturated tones.

iOS7 UI Effects in Photoshop and After Effects

With the announcement of iOS7, Apple revealed a completely new UI for their mobile OS. With the super flat design and thin fonts, Apple said that the design would be adaptable to apps by making some of the basic UI elements transparent, therefore, some of the colors of your apps content would bleed through and define how iOS7 basic components would influence the overall appearance. Another important detail of the UI was that with the transparency a blur effect was applied, similar to Windows Vista and their Aero design.

Introduction to Mobile Prototyping with HTML, CSS and JavaScript

If you are a designer in this day and age you are probably designing for handheld devices like smartphones and tablets. We live in a polarizing world where on one side we have native apps and on the other the web, with responsive sites and web apps. Designing in this environment requires understanding of the context you will be designing for, therefore, testing on devices. There are several ways to create prototypes, from paper to motion in After Effects.

Subscribe to tutorial

Brought to you by