articles on

Tutorial/Case Study 'Like a Bird' by Vigan Taffili

Tutorial/Case Study 'Like a Bird' by Vigan Tafili

Today we're going to show a interesting case study from our buddy Vigan Tafili aka. Nagivity. It's a really beautiful digital art concept that I hope you guys like it. Here's more about Vigan in his own words: Hi! I am Vigan Tafili aka nagiViTy, A 18 years old boy, born and raised in Peja, a small city in the newest country in Europe - Kosovo. Kosovo, is quite a small country, but with a huge trunk of ancient tradition in the culture of art expression; and if I might say, with a high number of artistic talents. My first contact with computer arts was on a young age. I started like a photographer continued as photo editor, then finally I became a digital artist, what I am today.   You can see more from Vigan on the following links:   Behance Facebook Twitter Dribbble Process   The concept of this artwork is based on the very intriguing concept of humans, the birds freedom. Freedom, a big desire of people, especially on a man ruled society, women, being opressed, they always try to reach for freedom and equality. This have pushed me to create a good art piece and at the same time give a message to support this cause more than we do. Some inspiring verses that guided me to this concept: "I wanna clap a little louder than before, I wanna sing a little louder higher than before, I wanna jump higher than before, I wanna shout a little louder than before." I was thinking to share some of my tips and tricks with others. I wanted to show a little piece of my work by making an artwork without croping the body model by using only the 'Patch Tool' , 'Brush Tool' and some effects. Stock Images:                   Step 1:   Upload the stock image that you will use, then duplicate and use the'Patch Tool' to remove the laces and hairs.   Step 2:   After using the 'Patch Tool' let's repair that erased parts by creating a new layer and painting them like i did.   Step 3:   In order to make a appealing background, I'm using a Mountains stock image. You need to put the image layer under the image that you want in front and so you should change the layer blending mode from Normal to Color Burn. Create a vector mask and remove some parts to make the blending smoother.   Step 4:   Put the same image on the project, change the blending mode from Normal to Color Burn and low the layer opacity to 31%. Them create a new vector mask and blend the image using the brush tool on the mask.   Step 5:   I have found a great peacock image and I used it as a female hair.   Step 6:   After positioning it, create a vector mask and with a basic brush, mask it by removing parts that we don't need. Afterwards, duplicate the layer and change the blending mode to Overlay and on the mask layer keep only the corner part of the peacock blend.   Step 7:   Create a new layer and rename it Blue, with the color #003e82 paint the girl's t-shirt, the tape, some skin parts and some parts of the mountains. Then change the blending mode from Normal to Color and create a new layer to paint the face by removing the eye of the peacock and draw some hair.   Step 8:   On this project I wanted to experiment with some new tricks, I'm using the Morning Mist a popular image on the internet. Place the image, and change the blending mode from Normal to Exclusion, then create vector mask and mask it with a brush, remove only the part that we won't use.   Step 9:   Get the snowflake image and place it, change the blending mode from Normal to Screen and change the Opacity to 40%. Then create a vector mask, invert it and paint with white color by using the basic brush only in the parts we want to keep.   Step 10:   Create a new layer and add some clouds with brushes using white color and soft opacity of the brush on the snowflake. Paint the left backgound with #cbd3d6 color by using the brush with soft opacity.   Step 11:   Create new layer and get some nice brushes and play with them make a flow effect on the girl and the snowflakes, then make a new layer fill with black color go to Filter/ Render.   Step 12:   Create new layer and do the shortcuts Shift + F5, at content use 50% Gray, change the blending mode to Overlay. Then by using the Dodge tool make the piece more brighter and made the details more shinning. Add a gradient map with white and blue colors and change the blending mode from Normal to Color Burn and make opacity 34%. Create another gradient map with #d8cbb3 color on the left and on the right use #423319 color and change the blending mode from Normal to Soft Light and make opacity 88%, add some color balance and play with lights.   Step 13:   Make some contrast on the image and create a new layer. Get a brush and make some parts more illuminated by painting with white color and changing the opacity on Overlay.   Step 14:   Create some effects on the project, then add some abstract wings by using the watercolor brush and blend it on the girl's back.     Conclusion:       Video:   Making of ' LIKE A BIRD ' Artwork from Vigan Tafili on Vimeo.

iOS7 UI Effects in Photoshop and After Effects

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. With that in mind, I decided to see how to create and share a super simple workflow to achieve this effect using Photoshop and After Effects. So for this tutorial I will show you how to achieve the blur effect of iOS7 using Photoshop and After Effects. The cool thing about this workflow is that it clearly showcases how Adobe apps work together in a seamless way. Step 1 The first thing I did was to download the iOS7 iPhone PSD from teehanlax (http://www.teehanlax.com/tools/ios7/) to use the basic iOS7 UI. Step 2 Here I created a new document in Photoshop with the dimensions of the iPhone 5, 640x1136 pixels. Then using the basic iOS7 UI I started designing the screen of my app. In this case I designed what would be the home screen of the Abduzeedo App. Step 3 If you scroll up you can see that the iOS7 has a bunch of seethrough areas, sort of Windows Vista. For my design I just made sure that the action bar had some transparency going. The blur effect will be add in After Effects. After you finish your design, save the PSD file so we can import it in After Effects. Step 4 Time to open After Effects. In After Effects, drag the PSD file to the Project panel. Once you do that you will be prompt with the dialog box. For the Import Kind use Composition - Retain Layer Sizes. For the Layer Options use Editable Layer Styles. Step 5 Here is what you will have in After Effects. Noticed that when importing a PSD file you will get alread a composition with the name of the file and a folder with all layers and objects. Double click on the composition to open the home screen we created in Photoshop. You will have then all layers that you have in Photoshop. I deleted the background and other unecessary layers. Another important thing to do is to change the composition background color from the default black to white. Step 6 Now to make the blur effect in After Effects is pretty simple. Go to Layer>New>Adjustment Layer. Position this adjustment layer below the Navigation bar. The adjustment layer will apply the blur effect to all layers below it in the timeline. Right now we just have the layer, so let's apply some blur. Step 7 With the Adjustment Layer 1 selected go to Effect>Blur & Sharpen>Gaussian Blur. I don't know exactly how many blur Apple applies in iOS7, but for this little demo I used 20 for the Blurriness. Note that the whole Group 1 layer is blurry and the action bar is not. Our goal is to make the blurr visible only when the screen goes underneath the Navigation bar. To do that we will apply a mask to the Adjustment Layer. Step 8 With the Adjustment Layer 1 selected, click on the Rectangle Tool Q, then create a rectlange over the area you want to show. In this case, from the Navigation bar to the bottom of the page. Also make the width way larger and off the screen, that will make the blur more uniform when passing underneath the Navigation bar. Step 9 Try to move the Group 1 layer (the home screen) up and down to see the blur being applied underneath the Navigation bar. You can increase the blur of the Adjustment Layer 1 or you can make the Navigation Bar more transparent. Conclusion The whole process is pretty simple and straightforward. You can use this tutorial as a base for a template file and then reuse for future projects. You can also improve upon this or come up with your own process which I'd love to hear about. One thing to keep in mind is that in this day and age it is extremely important to start going beyond static mocks. After Effects is an amazing tool for this such work and it seems to be a smooth transition for UI designers using Photoshop. Download After Effects file Click here to download the After Effects file used for this tutorial

Introduction to Mobile Prototyping with HTML, CSS and JavaScript

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. For me, basic HTML, CSS3 and JavaScript do the best job because they allow me to test on the phone with an incredible level of accuracy. In this post I will start sharing some tips on how to create basic HTML/CSS3/JS prototypes. The idea is to enable you to test your designs on phones, tablets or web. I will also assume that you know a little bit of HTML and CSS, but of course you can learn that online or doing the reverse engineer. So in this first post I will show you how to create a simple prototype with a few icons and basic transitions. You can then apply to your own designs. The coolest thing is that you can create a super smooth prototype with this simple technique. Introduction The first thing is to start an HTML document and make sure you have the structure done. For prototypes, the simplest way to create them is by having all screens you want to test in the same file, that way there won't be any lagging between screens. Remember, we are creating a prototype, not a web app. The way I organized my HTML is that every screen will use a "DIV" tag with an "ID" and a "CLASS='SC". That way I can use CSS to make them work the same way. For each screen I used the "HEADER" tag to create the header of the screen. Below is the full HTML file of the prototype. Prototype Back Screen 1 Back Screen 2 Back Screen 3 Back Screen 4 Back Screen 5 Back Screen 6 Back Screen 7 Step 2 For the icons, notice that I created a list using "UL" and "LI". Also notice that there are other classes like "LINK", "NONE", "slideup", "slideleft" and more. I will cover those in a few, but for now let's focus on the design of the screens and the icons. The first line you can see that I am reseting the CSS, that's an easy way to clear all properties and styles that browsers have. I am using the Eric Meyer's CSS Reset. You can find it at http://meyerweb.com/eric/tools/css/reset/ For the screens, this is the CSS: @import "reset.css"; html, body{ width: 100%; height: 100%; } body{ padding: 0; margin: 0; width: 100%; height: 100%; position: relative; } .sc{ width: 100%; height: 100%; position: absolute; display: none; z-index: 10; } .sc.selected{ display: block; z-index: 11; } Icons For the icons, we will use a basic "display:inline-block". We could have used the new and fancy flex model, however it doesn't work in Safari, so for now let's wait till iOS7. #home ul{ width: 100%; height: 100%; text-align: left; } #home ul li{ height: 72px; width: 72px; background: #fff; display: inline-block; margin: 22px 0 0 22px; border-radius: 6px;; } Screens Each screen will have a different color background. Below you can see the CSS. #home{ background: #333; } #screen1{ background: #2C3E50; } #screen2{ background: #E74C3C; } #screen3{ background: #3498DB; } #screen4{ background: #ECF0F1; } #screen5{ background: #2C3E50; } #screen6{ background: #E74C3C; } #screen7{ background: #3498DB; } jQuery Now it's time for the most important part, how to make things work. How to make the links open a different screen. To do that we will use Javascript with jQuery. We will use jQuery because it's easier for beginners to understand how Javascript work. To use jQuery we will have to make sure we are loading it in our HTML. To do that, use this code withing your "HEAD" tag. We are basically loading jQuery from its servers. Removing the 300ms lag Every time you click/tap something using a mobile phone, there will be a 300ms second if you use regular Javascript events like "onclick". To get rid of that there are some plugins online. The one we will use is based on Google Fast Button, but it's a jQuery version. You can read more about it at https://github.com/alexblack/google-fastbutton Download the ZIP file and copy the .js files to the folder of your HTML file. Then add these lines right after the previous "script" tags that you used load jQuery. Animations CSS animations are the best way to create silk smooth animations for mobile prototypes. You can create animations using the keyframe technique, however there's an amazing jQuery plugin that helps. The plugin is the jQuery Transit - CSS3 transitions and transformations by Ricard Cruz http://ricostacruz.com/. Same thing as before, let's load the plugin. Just add the code like the example below. Basic transition For the basic transition, that's hiding the current screen and showing the new one we will use CSS classes. Notice that theres a ".sc" and a ".sc.selected". For the basic ".sc" we have a "display:none", that means all screens will be hidden. Then for the one selected ".sc.selected" there's a "display:block". So basically, the idea is, the screen that's visible, it will have a class "selected". By removing the class and adding to another screen, we make a simple transition. Below you can see the code. $(document).ready(function() { $(".link").fastClick(function () { screen = "#" + $(this).attr("page-load"); if($(this).hasClass("none")){ $(".sc").removeClass("selected"); $(screen).addClass("selected"); } }) }) The code above is basically, when the user clicks on a tag with the class ".link" it will get the screen to show, that is in the "page-load" from the link. We will create a variable called "screen" to have this value, but we will add the "#" symbol, that is the one used to represent the "ID". If the link has a class "none" that is for different animations, we will basically remove the class "selected" to all ".sc" tags. Then we will add the class "selected" to the one we want to show. Slide from Right to Left To create a simple slide transition, we will pretty much follow the same idea, the only difference is that we will position the screen to load off the current viewport and then animate it in. Below you can see the code. if($(this).hasClass("slideleft")){ $(".selected").addClass("previous"); $(screen).css({x:$(window).width() + "px"}).addClass("selected"); $(".previous").transition({x:"-" + $(window).width() + "px"},300,"ease"); $(screen).transition({x:"0px"},300,"ease",function () { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } So the code below will first add a class "previous" to the current screen, that's already selected. Then it will position the screen to show off the screen using "$(screen).css({x:$(window).width() + "px"})" that means, the screen will be position in the width of the window "$(window).width()" to get the value and move it in the X axis to that point. Example, if your screen is an iPhone, it will move the new screen at 640px. Then the class "selected" will be added in order to make it visible. At this point you will have 2 screens with the class "selected". The second part is the animation using jQuery Transit. So we will basically animate the screen that was on the right to the 0 position using "$(screen).transition({x:"0px"},300,"ease",function ()". The time of the animation will be 300ms and it will use "ease" to make the speed not linear. Once the animation ends, we call a function to remove the "selected" class from the "previous" tag. Then we remove the "previous" class too. At last we remove any "style" attribute to make sure that there won't be any issue in the other animations. More Animations Below you can see different transtions type. We have SlideUp, SlideDown, SlideLeft, SlideRight, BackDown, Backup. if($(this).hasClass("slideup")){ $(".selected").addClass("previous"); $(screen).css({y:$(window).height() + "px"}).addClass("selected"); $(screen).transition({y:"0px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("slidedown")){ $(".selected").addClass("previous"); $(screen).addClass("selected"); $(screen).css({y:"-" + $(window).height() + "px"}); $(screen).transition({y:"0px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("slideleft")){ $(".selected").addClass("previous"); $(screen).css({x:$(window).width() + "px"}).addClass("selected"); $(".previous").transition({x:"-" + $(window).width() + "px"},300,"ease"); $(screen).transition({x:"0px"},300,"ease",function () { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("slideright")){ $(".selected").addClass("previous"); $(screen).css({x:"-" + $(window).width() + "px"}).addClass("selected"); $(".previous").transition({x:$(window).width() + "px"},300,"ease"); $(screen).transition({x:"0px"},300,"ease",function () { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("backdown")){ $(".selected").addClass("previous"); $(screen).show(); $(".previous").css("z-index","24").transition({y:$(window).height() + "px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(screen).addClass("selected"); $(".sc").removeAttr("style") }); } if($(this).hasClass("backup")){ $(".selected").addClass("previous"); $(screen).show(); $(".previous").css("z-index","24").transition({y: "-" + $(window).height() + "px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(screen).addClass("selected"); $(".sc").removeAttr("style"); }); } Using the animations With this basic code you can simply add a class "link" to any tag to make it clickable. Once it's clickable you can choose the transition by using another tag. In our case you can use: slideup - eg. slidedown - eg. slideleft - eg. slideright - eg. backdown - eg. backup - eg. Conclusion It might look confusing, but as any new thing we want to know there's a learning curve. The secret is to go little by little, with small little achievements in order to get easy and quick rewards, that way we keep ourselves motivated. Below you can see the code working on an iframe. You can also download the files and check on your phone (recommended) Download Files Demo on Phone Prototyping tools and Frameworks http://www.framerjs.com/ http://twitter.github.io/bootstrap/index.html https://github.com/donnfelker/android-bootstrap

Super Easy Colorful Effects in Photoshop

Super Easy Colorful Effects in Photoshop

A few weeks ago I posted artwork I created for a poster inspired by the Man of Steel movie. I used Pixelmator for that project and got quite a few comments and requests about how to achieve the same effect in Photoshop. As Photoshop doesn't have the awesome Vintage filters that Pixelmator now has, I tried emulating the effect using brushes which I will share with you today. So in this tutorial I will show you how to create a nice colorful background using Photoshop. The whole process is pretty simple and straightforward. One good requirement is to understand a little bit of Color Theory in order to create different color combinations. Step 1 Open Photoshop and create a new document. I am using 2880x1800 pixels. After that fill the background layer with black. Step 2 Create a new document and then with the Brush Tool (B) use a very soft brush and then paint some yellow brush spots. Step 3 Add another layer and then still with the Brush Tool, paint now a blue spot next to the yellow. Step 4 Add another layer and now paint a red spot. Use the image below for reference. Step 5 Select the 3 layers and group them. After that convert the group to Smart Objects, Layer>Smart Objects>Convert to Smart Objects. Then go to Edit>Transform>Warp. Deform the mesh in order to make the colors transitions less uniform. Step 6 Now resize the image a little bit, only in the height. Make sure the colors are blending well with the background, otherwise use the Eraser Tool (E) to smooth things out. Also go to Image>Adjustments>Levels. Boost the Black and White Inputs to increase the contrast. Step 7 Duplicate the layer with the colors and change its Blend Mode to Overlay. Step 8 Change the background color to a dark blue like the image below. Conclusion Add your logo and the image is done. There are lots of ways to achieve this effect, this for me is the easiest one, but it's up to you to come up with your own workflow. Remember the most important thing is to have fun. Download Photoshop file Download the Photoshop file used for this tutorial

Poster Mockups in Photoshop

Poster Mockups in Photoshop

I shared some posters awhile back on Abduzeedo and got a few emails asking how I created the application mockups for the posters so I decided to post about the process. There are several ways to go about and of course you can find templates online, however, today I'll show you an easy way to create simple mockups that you can reuse for your projects in order to give them a more realistic and professional look. So in this little tutorial I will show you how to create a poster mockup that can be reused for your future poster projects. It's a simple guide on how to use Photoshop Smart Objects to make non-destructive elements in Photoshop. Step 1 The first thing to do is to take a good picture of someone holding a real poster. In this case my friend and Abduzeedo writer Paulo Gabriel is holding an old Abduzeedo Poster. Take some pictures and open the one you like the most in Photoshop. Step 2 With the Polygonal Lasso Tool (L) select the fingers that are holding the poster. Step 3 Click on the Refine Edge options. Select Smart Radius and then paint over the edges of the fingers to refine the selection. After that change the Output to New Layer with Layer Mask. Step 4 Create a rectangle covering the old poster. Step 5 Reorder the layers so the rectangle is below the fingers layer created during the step 3. Step 6 Select the fingers layer and then go to Layer>Layer Styles>Drop Shadow. Use Linear Burn at 30% for the Blend Mode and Opacity, then use 4 for the Distance, 0 for Spread and 5px for the Size. Step 7 Select the rectangle layer and change the color to white. Then go to Layer>Smart Objects>Convert to Smart Objects. After that go to Edit>Transform>Warp. Then edit the edges to make them follow the real poster. Step 8 Select the Smart Object layer and then go to Layer>Layer Style>Gradient Overlay. Use the black and white gradient at 10%. Reduce the Scale to 55% and move the dark area down to the bottom to the poster. Step 9 Now select Pattern Overlay. You can find a nice texture paper online to use as pattern. Then use Linear Burn at 20% to make sure that it blends with your design. Step 10 Here's the final composition you will have. The blank poster is a Smart Object that you can simply double click to edit it and simply add your artwork in there. Step 11 Once you save the .psb file that Photoshop will open to edit the Smart Object, the poster artwork will show in your poster composition. Conclusion Here are some examples of different posters using the same application mockup. Now you can create that from books, business cards, collaterals, pretty much anything. It's an easy way to make your projects more realistic. Download Photoshop file Download the Photoshop file used for this tutorial

Cooking Glove - Icon Making of

Cooking Glove - Icon Making of

Last week I posted about some icon design inspired by pancakes and donuts. Those icons were pretty cool and super realistic. Today we bring to you another amazing case study for an icon, this time inspired by a cooking glove. The cool thing about this case study by Anna Paschenko is that it shows the whole process of creating in terms of sketches, modeling, materials until the final result. Anna is a freelance designer from St. Petersburg, Russia. She has an incredible portfolio of icon designs. We highly recommend that you check it out. Her website can be found at http://annapaschenko.com/ Idea & Sketch Modeling Materials UV Mapping Texture Final Version

Star Wars in CSS

Star Wars in CSS

One of the most memorable opening credits of all time has to be the Star Wars text scrolling in a 30-45deg perspective towards the horizon. It's a classic and it has been subject to all sorts of exercises and tutorials. I have never done anything related to this but last Friday while playing with CSS I was inspired to create the same effect for my personal site. The result is what I want to share with you today. The only thing missing is the theme music so feel free to add that to your own personal effort. So in this little tutorial, I will walk you through the process of creating the Star Wars opening credits effect using CSS and CSS animations only. I used Javascript for other details, but the rolling text effect is just CSS. Step 1 The first thing to do is to get the content of your HTML page. I used the content of my personal site. Basically the site contains a Header and a Section for the text. Below you an see the final HTML. Fabio Sasso I’m a Brazilian graphic and web designer based in San Francisco, California. Currently working for Google, I am also the founder of Abduzeedo, a personal project that has become the biggest promoter of my work. Abduzeedo is now one of the design world’s most sought after blogs for design inspiration and tutorials. Over the years I have had the amazing honor to work on projects for web and print media as well for clients such as MSNBC, Wired UK, Adobe, Digital Arts Magazine and Abril among others. In 2011 I joined Google as senior designer at the Mountain View headquarters. For over 2 years I have had the opportunity to work on incredible projects, from Doodles and icons to major products like Google Wallet, Offers, Shopping, Currents, Ventures and others. Currently I am part of the Search/Knowledge team working with amazing people. Step 2 Let's start adding some style to the design. We need to make sure that the background is black, the font is San-Serif and that we will use 100% of the height and width. Let's also set the perspective of our design. To do that let's add "-webkit-perspective:300" to the "section" tag. */ Step 3 Now let's add the text. I enclosed the text in a "article" tag and used "P" tag for each paragraph. To make the text fly in that perspective we will rotate the "article" tag. Then we can move the paragraphs in the Y position via "translate". Here's the CSS. article{ height: 100%; overflow: scroll; font-size: 32px; height: 100%; -webkit-transform: rotateX(45deg); -moz-transform: rotateX(45deg); transform: rotateX(45deg); } Step 4 To move the text off the screen we will use "TranslateY" for the paragraphs. article p{ -webkit-transform: translateY(800px); -moz-transform: translateY(800px); transform: translateY(800px); padding: 0 20%; } Step 5 Now let's create the animation. Below you can see the code, it's basically moving the paragraphs in the Y axis from the bottom to the top of the screen. @-webkit-keyframes txtmove { 0% { -webkit-transform: translateY(800px); } 100% { -webkit-transform: translateY(-1400px); } } Step 6 With the Keyframe animation creaed, we will have just to assign it to the element we want to animate. In our case, the "article p" or the paragraphs inside the "article" tag. The animation will last 70 seconds, and it will have a 3s delay. The timing function will be linear so it animates at the same speed from the start to end. article p{ -webkit-transform: translateY(800px); -moz-transform: translateY(800px); transform: translateY(800px); -webkit-animation: txtdmove 70s linear 3s 1; -moz-animation: txtdmove 70s linear 3s 1; animation: txtdmove 70s linear 3s 1; padding: 0 20%; } Conclusion The animation is done, now you can add more elements in your composition, like stars or your logo. Below you can see the final result and you can also download the files if you want to tweak it. Demo - Save from the browser to download it

Man of Steel Poster

Man of Steel Poster

Next month one of the most anticipated movies of the year will open in the theaters, I am talking about Man of Steel, the new Superman movie. It's amazing how much promotion this movie is getting lately, every day there's a new picture, poster or some news about it. With all of that, of course I also get really inspired to create some artwork about it. I've created the symbol in the past using Illustrator and Photoshop a few weeks ago. Now I will create a simple poster, this time however I will use the new Pixelmator 2.2 to test it out. So in this post I will walk you through the creative process behind my minimalist poster for the Man of Steel movie. I will use Pixelmator's new features like the Vector Tools and Light Leak effects. Step 1 Open Pixelmator and then grab the latest poster of the movie to use for reference and to trace superman. Step 2 Using the Pen Tool, start tracing the silhouette of superman. Don't add to many points and also don't worry if it's not super perfect. You can always edit that later. Step 3 Here's the final trace. Step 4 Fill the background with a dark blue using the Paint Bucket Tool (N). Change the superman color to white. Step 5 Using the Rectangle Shape Tool create 2 lines like the image below. Step 6 Add the text. If you notice the kerning of the text is really crazy, I changed to 250%. Step 7 With the rectangle shape tool, add another rectangle with no color and white for the stroke. Select inside for the options and then use 50px for the stroke width. The idea here is to add a simple white border to the composition. Step 8 This is not really necessary, I prefer the version without the effect but you can also add a nice vintage look by using the new Light Leak Effects in Pixelmator. Just select the background color and then drag it to the composition. I used Nebula with 100% for the Amount and 65% for Sunniness. Conclusion The poster is done. It was a great exercise to test the new Pixelmator and some of the new features. I can also say that Pixelmator is faster than ever and getting more complete at each release. It's a nice alternative if you don't want to pay Adobe's subscription. There are some important tools missing but I am sure they will be added in the next release. Applications Download Pixelmator file Click here to download the Pixelmator file used for this tutorial

Abduzeedo 2013 Symbol Case Study

Abduzeedo 2013 Symbol Case Study

Personal projects are the best way for a designer to learn because it's much easier to try different things. It's just about making decisions and building them. With Abduzeedo we try to keep it as personal as possible, at least when it comes to changes. We redesign it at least once a year, not only the overall site design but the brand identity. Things have been a bit busy however and it's been over two years since the last time we designed a symbol for the site. With that in mind, here's a start on the 2013 symbol for Abduzeedo. This post we will show you the idea behind the new symbol. It's still a work in progress but we'd love to know what you think about the symbol and the creative process behind it. Old symbol The old symbol was created in 2009 and used for 2 years. The idea was basically a triangle with references to the letter A of Abduzeedo. References The first goal for the new symbol was that it had some similarities with the old one. The idea of a triangle and the letter A were the guide points. This time however, I wanted to make it super simple, no colors, just black and white and no effects. Triangle Letter A Simple Space theme Star trek Here are some images that inspired me. Sketches Starting out with some basic sketches trying to get a simple "A" based on the references. The main inspiration comes from the Star Trek logo and of course the old symbol. Digital Sketches After a few sketches I went to Illustrator to translate the idea into something digital. Below you can see the basic construction of the symbol. Final After a few iterations I got to a symbol that I really like. I was really indecisive about the shape I would use to frame the logo. In the end I went with the circle because it's more flexible for the applications I have in mind. There are still some optical adjustments and adapting the typography to the new logo, however you can see some examples of the final symbol below. So that's pretty much it. Now I will work on some stickers but before that I'd love to hear your opinion about the new symbol. Do you have any feedback or suggestions? Share your thoughts with us and you may be the lucky recipient of a sticker or poster :)

Double Exposure Style in Photoshop

Double Exposure Style in Photoshop

We've featured quite a few posts and images with the effect most call double exposure. This technique consists of 2 images superimposed. There are some really nice examples with very intricate overlaying, usually with faces of people mixed with photos of nature. I've been thinking about giving it a whirl in Photoshop for a long time and I've finally gotten around to it. So in this tutorial/case study I will show you how to create this double exposure effect using Photoshop and some stock photos. The process is simple however it does take time to adjust the details. Step 1 Open Photoshop and start a new document. I am using A4 for the format. After that get a photo of a person you want to use for your composition. The image I am using is courtesy of Shutterstock. It's titled Portrait of a young beautiful blonde model wearing trendy glasses and casual shirt and posing over metal background. Hipster style by Augustino Step 2 Isolate the girl from the background using the select tool. Use the Refine Edges option to help with the hair. Step 3 Now let's add the second image for the double exposure experiment. The image is titled Silhouette of tree. Black and white by Namsilat. Again isolate the background, we will just use the branches. Step 4 Duplicate the photo of the branches to make them mor compact. Step 5 Now put both images together. Create a marquee selection of the branches by clicking on the thumbnail of the layer holding Command (MAC) or Control (P). Step 6 Mask the photo of the girl with the branches selection. Step 7 Time for some refinements, especially on the edges and to make them look random and not so uniform. Also duplicate the girl's layer and move it on top of the other layers. Reduce the oapcity to 70%. Step 8 Duplicate all layers and merge them into one. Then change the Blend Mode to Screen. Conclusion Resize the layers to place the girl in the center of the document. You can also add a photo filter, Layer>New Adjustment Layer>Photo Filter. You can use deep blue or orange to add a really nice style to the final design. Applications Download Photoshop file Click here to download the Photoshop file used for this tutorial

Daft Punk Poster in Illustrator

Daft Punk Poster in Illustrator

Daft Punk is releasing their new album next month, titled Random Access Memories. While biking around in San Francisco I started seeing some posters and billboards on walls advertising the new album and was inspired by the amazing artwork. Of course I've always wanted to do something for Daft Punk so this post's timing seems just about right. So in this post I will show you how to create a simple and minimalistic poster for the Daft Punk. We will use Illustrator and then Photoshop for some mockups. Reference Step 1 Open Illustrator and create a new document. I am using A3 format. After that create 2 circles. Overlap them like the image below. Step 2 Go to WIndow>Pathfinder. Then click on the Minus Front to delete the red part and keep just the top. That will be the reflection of the helmet. Step 3 Now with the Rectangle Tool create a rectangle in the center, then with the Pen Tool (p) start creating the details on the side of the helmet. Step 4 Once you finish one side, just duplicate it and flip it horizontally to have the other part. Step 5 Create another rectangle based on the images we used for reference. Step 6 Apply a gradient to the biggest rectangle like the references used for the design. Step 7 Now just change the white to black for the the colors and add a dark background. Final result To finish the poster, let's add their logo and we're good. The design is pretty simple and minimalist, but it works really well. Now it's up to you to create your own. Details Some applications for the poster, just for fun.

Experimenting with Swiss Style in CSS

Experimenting with Swiss Style in CSS

Last week I started playing in CSS for my new personal site. I decided to skip the Photoshop/Fireworks/Illustrator part and go from sketches to HTML/CSS. This process helps me to improve my coding skills, especially for rapid prototyping. The first experiment I decided to create was a simple page with just text and texts rotated 45 degrees, heavily inspired in the Swiss Graphic Design Style. For this post I want to show you a little bit of the creative process behind this experiment. The whole design uses only regular fonts, if you use a MAC you will see the text in Helvetica, while other platforms might render in Arial or Roboto (android). Also feel free to give feedback or suggestions on how to improve the code. Step 1 To start, let me show you the basic HTML file. You can see the structure of the document. It might look that there's too many nested DIVs but I did that because I will use that to extend the content of the site in the future. Right now, let's focus on the rotated text. Portfolio fabio sasso founder of abduzeedo follow me on Twitter, Behance & Dribble designer at google I’m a Brazilian graphic and web designer based in San Francisco, California. Currently working for Google, I am also the founder of Abduzeedo, a personal project that has become the biggest promoter of my work. Abduzeedo is now one of the design world’s most sought after blogs for design inspiration and tutorials. Over the years I have had the amazing honor to work on projects for web and print media as well for clients such as MSNBC, Wired UK, Adobe, Digital Arts Magazine and Abril among others. In 2011 I joined Google as senior designer at the Mountain View headquarters. For over 2 years I have had the opportunity to work on incredible projects, from Doodles and icons to major products like Google Wallet, Offers, Shopping, Currents, Ventures and others. Currently I am part of the Search/Knowledge team working with amazing people. Step 2 Now let's focus on the part of the text that rotates. I used H1 and H2 for the text and put them inside a DIV with a class called "roatedtext" fabio sasso founder of abduzeedo follow me on Twitter, Behance & Dribble designer at google Step 3 First thing to do is to adjust the font sizes using CSS h1{ font-size: 150px; line-height: 75%; margin: 0; font-weight: bold; } .rotatedtext h2{ font-size: 36px; clear: both; margin: 0; padding: 0; line-height: 130%; } Step 4 To rotate the text we will use CSS transformation (transform:rotate(deg)). The first thing to do is to rotate one block 90 degrees. Use transform:rotate(-90deg);. Use negative to change the direction you rotate. .name{ -webkit-transform:rotate(-90deg); position: absolute; left: 90px; top: 30px; } Step 5 Now just rotate the container DIV with the texts. Use 45 degrees to create the perfect Swiss style text. .name{ -webkit-transform:rotate(-90deg); position: absolute; left: 90px; top: 30px; } Conclusion Here's the final CSS I had when I finished this experiment. */ DEMO

Surreal 2013 Case Study by Cristian Eres

Surreal 2013 Case Study by Cristian Eres

One of the most important things when learning design, or pretty much anything, is to pay attention to how other designers tackle problems. That was my personal inspiration that led me to start sharing tutorials and case studies. They are not designed to help come up with ideas, but to help with the execution, one of the biggest problems most people have. In my opinion, good ideas aren't good without turning them into something palpable. In today's case study we will show you how Cristian Eres created the image featured as Wallpaper of the Week a few weeks ago. Christian, a Spanish freelance digital artist and graphic designer based in Valencia, has been creating digital art for over five years and is particularly skilled within illustration, graphic design and web design. Step 01 - Illustrator Scan Step 02 Vectorization, and added different gradients using the Shape Builder tool. Step 03 I retouched colors (I like to use the Recolor Artwork tool). Also I've added particles and joined the numbers to give unity to the piece. Step 04 Adding shadows with the Draw Inside tool for each element in the artwork. Step 05 Adding lights with the mesh tool. Step 06 - Photoshop Added background with two overlapped gradients. Step 07 Added some lights and sparkles. Conclusion Applied some curves and filters. Details For more information visit http://www.cristianeres.com/

FS Logo Design Process - Symbol

FS Logo Design Process - Symbol

After over 4 years I decided to start working on a new personal site. The last time I made updates was back in 2009 and since then I haven't been paying too much attention to it, however I feel it's time for me to try some different things with it in terms of web design, responsive, mobile first and other such trends. The first thing I needed of course was a logo. Today, I share with you the creative process behind the logo. Inspiration/References The logo is inspired by a college team logo, I wanted it to have this reference because the idea is that the site will be a creative laboratory of things I want to learn and experiment within the realm of HTML, CSS and Javascript. Another reference is the San Francisco Giants logo, I love the angularity and the way the letters have been super imposed. Sketches Some explorations for fun Illustrator Once I had some sketches I started creating the digital version. The logo is basically made of rectangles and triangles and as you can see the images below, I started adding basic shapes and improving upon them. Grid Negative space shadows Using the same triangles from the corners of the "S", I created basic shadows, and then made them as negative space. Compositions Colors Final Symbol After an afternoon of fun I ended up with a nice symbol, very aligned with the design principles I had in mind, especially to have the look and feel of a college sports team. I still want to make some optical adjustments to make sure the proportions are right. The next step then will be to show you the web site :)

Flipping Book in CSS and jQuery

Flipping Book in CSS and jQuery

The tutorial of this week is about HTML, CSS and a little bit of Javascript with jQuery. As the rule of trend now is mobile first and any designer who wants to really understand the media will have to be able to create quick prototypes of his/her work, we decide d to write a few basic prototyping tutorials. The first one will be about create a simple flipping book, like a 3 fold brochure, using HTML, CSS and JS for the events. For this tutorial you will have to have some knowledge of HTML and CSS. You can also just copy and paste and change the values to see how it works. I am still learning and improving my CSS and jQuery skills but I think it's good to share and will try to do that in this post. Feel free to leave comments with suggestions on how to improve our coding skills. Step 1 The first step is to create the design. My idea was to create a simple 3 fold brochure, so I put together a basic mock in Illustrator Step 2 Now let's create the basic HTML for the document. Basically what we have to create is 5 squares to use as each one of the folds. To do that I will create a basic container using the tag "section" and the 5 squares with the tag "article" Flipping cards Step 3 Let's start add some visuals with CSS. First thing is to create the different parts of the brochure and also the position of each one of them, not worrying too much about the vertical positions. Flipping cards */ Step 4 Now let's start flipping the cards and putting in the right position. It's important to understand how CSS transform works so we can write the css. Here's the summary of what we need to do: #cover: This card will flip from right to left, so the origin (-webkit-transform-origin) will have to be left horizontally. #backcover: This card will be flipped, so you will have to move it to the 0 position left, but flipped 180 to the right. Use -webkit-backface-visibility:hidden to hide it when its rotated. #centerflip will behave like the #cover but the origin will be right instead of left. #centerback will behave like the #backcover but flipping to the other side, also you will have to position it to the right. Here's the full CSS code article{ position: absolute; display: block; width: 600px; height: 600px; left: 600px; top: 200px; } section{ -webkit-perspective: 2000; width: 1800px; background: #f5f5f5; overflow: visible; position: relative; -webkit-transform:scale(.5); } #cover{ background: #fff url(logo.png) center no-repeat; background-size: 250px auto; z-index: 1000000000000000000; -webkit-transform: rotateY(-0deg); -webkit-transform-origin: left bottom; } #backcover{ left: 0; background: #000; color: #fff; -webkit-transform: rotateY(180deg); -webkit-backface-visibility: hidden;; -webkit-transform-origin: right bottom; z-index: 10000000000000000; } #centerflip{ background: #ff0; z-index: 10000000; -webkit-transform: rotateY(0deg); -webkit-backface-visibility: hidden;; -webkit-transform-origin: right bottom; } #centerback{ background: #fff; -webkit-transform: rotateY(-180deg); -webkit-backface-visibility: hidden;; -webkit-transform-origin: left bottom; left: 1200px !important; z-index: 10000000000000000; } #center{ background: #000; } Step 5 Now that you have the cards and the layout positioned, let's use Javascript to make the behaviors. We will use jQuery and jQuery Transit for that. jQuery Transit is an amazing plugin that allows us to make simple CSS animations with jQuery. The easiest way to write the script is understand exactly the logic/behavior we want to have User clicks on the #cover and the #cover flips 180deg. The #backcover that is flipped 180deg will flip to 0deg The #centerflip when clicked will flip 180deg. The #centerback that is flipped -180deg will flip to 0deg. Once the brochure is open we will set a variable saying that it's open so we can close the brochure by clicking on it again. Here's the code for that Conclusion This is a basic demo of CSS transformations, it will only run on Webkit browsers for this demo. You can make it work for other browsers by adding their prefixes in the code. The idea is trying to motivate you that is starting out your web design career, to prototype more, to play with code to see how things will behave. That will definitely give you a different and better understanding about design in general. View Demo

Face your Fear - Case Study by Mart Biemans

Face your Fear - Case Study by Mart Biemans

The easiest way to learn in my opinion is by observing other peoples work, paying attention to the details and how some problems are overcome. That for me is more useful than a tutorial because it requires me not only attention but also makes me think on how I could do that with my set of skills. That's why case studies are extremely valuable. They show the evolution but without giving instructions. A good example is the amazing illustration by Mart Biemans that we brought to you today. For more information you can also visit http://martbiemans.com/ Process Final Details I've been working freelance in this field for over four years now and loving every second of it! Even though I love watching a lot different sorts of illustration I have lately put a focus on developing my own style. I am currently available for freelance work! If you think you might have a nice project for me or would like to hire me, please contact me via Contact at the top of this page. Next to my work as a Illustrator, Digital Artist and Graphic designer I am currently studying Vormgeving Communicatie (translated: Design & Communications) in Groningen, The Netherlands. - Mart Biemans

Iron Man in Illustrator and Photoshop

Iron Man in Illustrator and Photoshop

Last week I saw the new Iron Man trailer and as usual it was nothing less than amazing. The effects are top notch and I'm really anticipating seeing it in May. There's still a couple of months until we can set our eyes on the real deal so I decided to create the Iron Man mask from scratch using Illustrator and Photoshop just to warm up and to try to improve my illustrating skills. So for this tutorial I will show you how to create the Iron Man mask using Adobe Illustrator and Photoshop. It's not too detailed because I wanted to share a simple overview/walkthrough so you could play and explore by yourself. In the end that's the best way to learn. Step 1 Open Illustrator and create a new document. The first thing to do is get a good reference of what you want to do. After that create circle and a line crossing the center. We will create just half of the mask. With the Pen Tool (P) start creating the basic shapes. Step 2 Create one shape for each part of the mask, it will help us to add colors and textures later on in Photoshop Step 3 Once you have all shapes, use basic grey colors to see if everything is alright. Step 4 Duplicate the half of the mask and flip it horizontally. Step 5 Now in Photoshop, paste each part of the mask as a layer and let's add some colors. The basic Ironman colors are gold and purple. Also there are some shadows and subtle details like you can see in the image below. Step 6 For each part of the mask, add a layer and go to Layer>Create Clipping Mask. Fill the layer with black and change the Blend Mode to Color Dodge. With the Brush Tool (B), a very soft brush and white for the color, start painting some areas to highlight. Use 10-20% Opacity. Step 7 Repeat the same thing as the previous step, but this time use Screen for the Blend Mode. Paint some more highlights. Step 8 Add some more highlights, especially on the mouth and purple part. Step 9 Now let's add texture. Again remember, apply the texture to each part of the mask. Move the position of the texture give more depth. The texture I used can be downloaded at http://www.hdwallpapers4ipad.com/_ph/24/641167066.jpg Step 10 For the eyes, the create the 2 shapes and fill with blue, then use a basic checked texture. Apply some gaussian blur after that. Step 11 Add a new layer on top of the layer you created the eyes and group this new layer into a folder. Change the Blend Mode of the folder to Screen. After that with the Brush Tool, use a soft brush with white and paint 2 light spots. Add another layer inside this folder and paint 2 spots with blue. Step 12 Duplicate the folder and delete the blue layer. Change the Blend Mode of the folder to Color Dodge. Delete the content with the white light spots and create 2 different ones, a little less strong. The color dodge will create a very realistic light effect. Conclusion The whole process is more about digital painting than design. I am not really good at digital painting but it's always a good exercise. There are a lot of tiny details that I will continue to work on this design, however I wanted to share with you a quick overview. Now it's up to you to create your own, have fun ;) Download Photoshop file Click here to download the Photoshop file used for this tutorial