MediaLoot Blog

How To Create a Cartoon-Style Illustration in Photoshop

2013-03-27T17:15:20+00:00

In this video-tutorial we’re going to show you how to create a cartoon-style illustration of an ax in Photoshop. We will be spending time with layer masks, the pen tool, and Photoshop brushes. We will finally import and apply a vector pattern from Illustrator to Photoshop.

At the end of this tutorial you should be able to easily create your own cartoon-style illustrations of just about any object.

Video transcription, images, and included resources are available after the jump:

Material needed:

To realize the illustration, I used these 2 awesome sets from the Medialoot library:

Cartoon Wood Patterns (Free)
Subtle Grunge Brushes - Vol 3 ($5)

Tutorial Highlights: the benefits of using reference images

Reference images will speed up your process. Using a reference doesn’t mean that you have to copy it or reproduce something identical to the original. Even if we all have an idea of how an ax is supposed to be, an empty Photoshop document can be a scary starting point!

In the example below you can see the reference image on the left, and the 2 main shapes I created in Photoshop on the right.

Just remember: spending few minutes looking for some reference images can help you getting sooner on the right track.

The pen tool is your best friend

Most beginners don’t like it. Well, if there was a way to be good at Photoshop wihout using at all the pen tool, the World would be a better place! But the truth is: the sooner you learn how to handle this tool, the sooner you realize how indispendable it is. Anytime you need to start your illustration, you do it by creating shapes. The best way to create these shapes is by using the pen tool.

Tip: if you don’t like what you came up with using the pen tool, remember that you can always modify your shapes with the direct selection tool (A). Just click on the outline of your shape to show up the anchor points, then click and drag to move them.

Use layer masks to confine your elements

Layer Masks come in handy when you want to confine a specific element. Lets say that you want to apply a texture/pattern to a shape A. The space occupied by that shape represents your “limit”. You can select the pixels occupied by an element by holding down cmd (ctrl on Windows) and clicking on the layer - inside the layer windows. In a simpler way: in the layer windows, cmd + click on the layer whose pixel you want to select. Then you select the texture to be confined and press the “add layer mask” button to remove the unwanted pixels. Piece of cake, isn’t it?

If it’s too clean, play with grunge brushes

If the result is too clean, add some dirty effects with brushes and textures. In this tutorial I used a great set of 50 grunge Photoshop brushes created by Tony. Just create a new layer, pick up one of the brushes and click. If the result is too strong, reduce a bit the layer opacity.

That’s all for today! I hope you enjoyed the video and see you soon for a new tutorial!

Introducing PsDefaults: Better Default Graphics for Adobe Photoshop

2012-06-14T18:41:37+00:00

It’s been months in the making (still isn’t finished, actually) and we’re finally ready to introduce everyone to a new resource—PsDefaults.

PsDefaults is a complete replacement set of default graphics (also known as presets) for Adobe Photoshop. Forget living with that blue bubbly pattern forever: this new set of presets is entirely hand-crafted, modern, beautiful, and ready to use.

Check out the coming soon page here, or keep reading for timing, cost, and other interesting details.

Timing and Details

Right now we’re working on adding additional resources PsDefaults—some of which are coming from MediaLoot, and some of which are coming from other places or being custom made for this project. We’re collaborating with the designers at WeGraphics, so we also have some of their resources being added to the mix. And we have an as-yet-unannounced trick up our sleeves that may turn this into something even bigger.

By the time this product is launched it should have hundreds if not over a thousand individual presets for Photoshop. Given that, we’re planning to release this at the reasonable price of $39 for the collection. MediaLoot members will get a steep discount (since many of the items will be coming from here) and there will also be other ways to get this for less $$ prior to the full launch.

The full launch, and product, should be ready in late July. We hope =D

Questions…

As many of you have already asked us questions, we wanted to answer some of the most common ones here. Feel free to ask more though, we’re happy to answer.

I already have a MediaLoot subscription, should I still get this?
Sure. Many of these resources do exist on MediaLoot already, but this product has even more resources than are available here and more importantly everything is organized to be used daily as your default Photoshop presets.

How much will PsDefaults Cost?
Right now we’re planning to release the full product for $39. Given how much content this contains, and the fact that there is nothing else like it out there, we think it will be a huge huge huge value. If you buy it and disagree, we’ll offer a refund =D

When will it be ready?
You’ll be able to pre-order the whole kit at a huge discount starting in July, and the actual product will be ready by late July/early August.

As a MediaLoot member, will I get this for free?
Unfortunately, no. This package is only partially MediaLoot resources and has a lot of additional custom resources included. We will be happy to give you a discount though.

Who are the designers?
The resources are being designed mostly by Tony Thomas (MediaLoot) and Nathan Brown (WeGraphics) with a few by Mason Hipp (MediaLoot)and other designers. No cheapo resources here—all premium work by awesome designers.

Can I get a preview?
Absolutely! Take a look at the PsDefaults coming soon page for some of the resources, and if you sign up for the email list there *may* be a hidden surprise for you in a few days.

That’s all for now, let us know what you think!

5 Practical Ways to Replace Images with CSS3

2012-06-06T11:25:17+00:00

Every web designer and developer should be aware of CSS3 and all of it’s fantastic new properties that make life easier for web professionals. But we may not be truly making the most of the technology that is available to us.

For example a lot of designers and developers still rely very heavily on images for web elements, when they code their websites. This may be because it seems quick and easy, or it’s perhaps just the way that we are all used to doing things, afterall using images was once the only way to get gradients, shadows, rounded corners and other simple effects on the web.

But there are now very strong arguments to switch over to CSS3. For example reduced page load times, better scalability, and the flexibility to adjust dimensions and attributes without having to launch an image editor.

Browser compatibility with CSS3 is constantly improving, and more people are also starting to accept that if users have out-dated browsers, they simply aren’t going to be able to get the best experience on the web.

1. Buttons

Buttons are probably the most common of all web elements, and they usually consist of a rectanglular shape, with some label text on it. Common attributes for the base shape are rounded corners, and a linear gradient.

Here is an example of how we can use CSS3 properties to create a simple button:

The code for the button:

background-image:linear-gradient(90deg,rgb(0,163,217) 0%,rgb(63,187,240) 100%);
width:250px;
height:60px;
border-radius:9px;
box-shadow:inset 0px 1px 4px rgba(11,110,166,0.65);

A nice and easy one, that should work in all modern browsers without any issues, just don’t forget that browser prefixes are still required for a lot of CSS3 elements at the moment.

2. Badges

An element that is very rarely created using CSS is the badge. Badges are usually used to attract your visitors attention to some sort of offer or deal, and they became very popular during the dreaded ‘Web 2.0’ phase. If used tastefully though, the badge can be a useful element to have on your page, and can be quite easily without the use of images.

The code for the badge:

background-image:linear-gradient(90deg,rgb(84,169,13) 0%,rgb(179,235,102) 100%);
width:125px;
height:125px;
border-color:rgb(64,143,0);
border-width:2px;
border-radius:62px;
border-style:solid;
box-shadow:0px 1px 10px rgba(0,0,0,0.25) ,inset 0px 0px 4px rgba(223,255,191,0.65);

And for the text:

font-family:"Helvetica Neue";
font-size:32px;
font-weight:bold;
color: #ffffff;
text-align:center;
text-shadow:0px -1px 1px rgb(64,143,0);

3. Content Boxes

Content boxes, such as those that can be seen on the Apple homepage would be simple to replace with pure CSS versions, as demonstrated below:

The code for the box:

background-image:linear-gradient(90deg,rgb(227,227,227) 0%,rgb(252,252,252) 100%);
width:280px;
height:150px;
border-radius:5px;
box-shadow:0px 1px 2px rgba(0,0,0,0.5) ,inset 0px 1px 1px rgb(255,255,255);

4. Form Elements

Form elements are perfect candidates for getting a CSS3 make-over. It used to be difficult to style form elements consistently between browsers, usually relying on images. But now that most browsers support CSS3 styling on form elements, we can achieve results like this completely hassle (and image) free.

The code for the default state is:

background-color: #ffffff;
border-color:rgb(182,182,182);
border-width:1px;
border-style:solid;
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 4px 0px rgba(0,0,0,0.4);

And the code for the active state is:

background-color: #ffffff;
border-color:rgb(38,147,255);
border-width:1px;
border-style:solid;
box-shadow:0px 0px 5px 0px rgba(77,210,255,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 4px 0px rgba(0,0,0,0.4);

5. Loading Bars

Using CSS3 will create much more flexible progress bars than images would, and updating the progress is a simple as modifying the width attributes.

The code for the container:

background-image:linear-gradient(90deg,rgb(255,255,255) 0%,rgb(231,231,231) 50%,rgb(255,255,255) 50%,rgb(255,255,255) 99%,rgb(255,255,255) 100%);
width:500px;
height:15px;
box-shadow:0px 1px 3px rgba(0,0,0,0.4);

And the code for the progess bar:

background-image:linear-gradient(-90deg,rgb(Infinity,Infinity,Infinity) 0%,rgb(157,184,207) 50%,rgb(109,134,160) 50%,rgb(-Infinity,-Infinity,-Infinity) 100%);
width:370px;
height:15px;
box-shadow:inset 0px 0px 2px rgb(46,50,61);

Just a Taster

These are just a few examples of what can be achieved with CSS3, it’s possibilities are truly endless. So, why not try out some of these techniques or create your own and use them in your next project. It will cut down on page load times, and make your designs much more flexible.

Adobe CS6 Replacement Icons

2012-05-18T09:08:46+00:00

If you’ve recently upgraded or purchased Adobe CS6 and are a little bit disappointed with the new icons, then this should hopefully be of interest to you. After searching and waiting patiently for some icons to surface that were a little more to my taste than Adobe’s offerings. I finally decided to take the task upon myself, and just open up Photoshop and start designing my own. So here are the results! Feel free to download them and use as you please.

Details

The package includes icons for:

Adobe After Effects
Adobe Audition
Adobe Bridge
Adobe Dreamweaver
Adobe Fireworks
Adobe Flash
Adobe Illustrator
Adobe inDesign
Adobe Photoshop
Adobe Premiere
Adobe SpeedGrade
Adobe Encore
Adobe Photoshop Lightroom

in these formats:

.icns (Mac)
.ico (Windows)
.psd
.png

Download Link

Click here to download

Sketch 2: A Worthy Photoshop Competitor?

2012-05-02T11:36:26+00:00

Here at MediaLoot we don’t often review software, but as I am somewhat of a dedicated Fireworks fan, and an avid believer that the industry is in dire need of a tool specifically created for professional UI designers, I think that Bohemian Coding’s Sketch 2 deserves a mention.

It’s safe to say from the off that Sketch 2 is without a doubt, an excellent app at a very reasonable price. And if you’re a casual designer, who can’t quite justify splashing out on Adobe’s offerings, then yes Sketch is for you, go buy it! But in this article I want to assess how well it meets the needs of professional designers, and how well it stands up against the two most popular tools used at the moment, Photoshop and Fireworks.

Why I Want To Use It Every Day

It’s creators say that Sketch 2 has the absolute minimum feature set that a professional tool needs. And I completely agree with them, there isn’t anything missing that could actually stop me in my tracks when designing a website or app interface. And that is very good news. The promise of more features being added soon is also very exciting.

It currently has some features that are pure genius, and I’m actually starting to miss them when going back to using Photoshop and Fireworks. Multiple fills for example is an excellent idea, executed perfectly. As the name suggests, multiple fills allows you to stack fills on top of each other, and is a fresh new take on the traditional Color, Gradient and Pattern Overlay methods.

Other notable features are the Infinite Canvas, and Artboards which gives you Illustrator-esque freedom with your designs. And Non-destructive Boolean Operations, that allow you to do things like adjusting the corner radius of a rectangle even after you have combined it with another shape. It even beat Fireworks CS6 to the punch adding CSS Styles support!

What It Can Create

It’s still very early days, but already designers are testing out Sketch 2 and sharing their results on Dribbble. I even decided to recreate a couple of the elements from our latest freebie using Sketch (results below).

MediaLoot Tickets by Tony Thomas

As I mentioned, here is the recreation of a couple of elements from our latest freebie, made entirely in Sketch 2. Download the .sketch source file here.

Icon made with Sketch2 by Jason Csizmadi

iOS Message UI made with Sketch 2 by Ben Breckler

Playing with Sketch 2 by Gadzhi Kharkharov

Sketchified by Maxwell Barvian

Why I Can’t Use It Full Time Yet

My work, much like most designers out there requires sharing files. Whether it’s sending .psd’s to your developer to get coded, or creating and sharing design resources. There will almost certainly be a day in every designer’s life when you’ve shared a source file.. And the chances are it was probably a .psd.

This is where Sketch currently falls flat. I’m not going to write out a list of bugs, because I’m sure that the developers are perfectly aware of the state of affairs. But to summarise it is very difficult to open even the simplest .svg or .eps files. Likewise, exporting to vector formats is just as awkward and unpredictable.

If a designer chooses to use Fireworks instead of Photoshop, they will find that Fireworks opens .psd, .eps, and .png files brilliantly. So it wouldn’t be much of struggle to switch exclusively. Sadly, the same thing can’t be said about Sketch, so that is why I can’t use it full time yet.

Try It Out For Yourself!

If you haven’t already, take it for a spin and decide for yourself Website Link it has a 14 day free trial. And let us know what you guys think. Could this be the long-awaited Photoshop and/or Fireworks Killer?

How To Prepare for The High-Resolution Web

2012-03-28T13:32:29+00:00

Whether we’re ready or not, the future of the web is going to be in High Definition. However, by following a few simple techniques, you can future-proof your web designs today.

Uhhh oh…

You weren’t supposed to see this page, not sure what happened. Since you’re here now, the actual article you were looking for is available here:

http://medialoot.com/blog/high-resolution-web/

Introducing Rollover Downloads

2012-03-20T16:17:15+00:00

When it comes to download limits, it has been a long and winding road for us here at MediaLoot.

We started off with unlimited downloads. This didn’t work well (or last long) because people were paying one monthly fee and downloading everything on the site. We couldn’t pay our designers, long-term members were getting shorted, and well… you get the idea.

Following that we launched the multi-plan system we have now with download credits and a set number of downloads you could have each month. This has worked fairly well with one exception: members who didn’t use all of their downloads in one month (which were many) lost those downloads and couldn’t use them again next month. In effect, members were penalized for not using all of their downloads, even if they didn’t need them that month. That’s not what we want to happen…

Now, thanks to your suggestions, we have a big announcement to make: Rollover downloads are here.

Introducing Rollover Downloads

Effective immediately—all download credits will carry over to the next month for as long as you are an active member. You paid for those downloads, and now you get to keep them. Full details are as follows:

The Details

Basically, rollover downloads work exactly as you would expect (similar to many wireless carriers and other services). For those who are interested, here are the gritty details:

Rollover downloads apply to all MONTHLY premium members. Starting now.
At the end of each month, any remaining downloads will be added to your next month total. If you’re on the 15 download/mo plan, you’ll just get another 15 added to whatever you have now.
These download credits will last for as long as you are a paying member. If you cancel your subscription (why would you do that?) you will lose any rollover credits you have remaining.
None of this applies to free accounts, free downloads, or yearly members.

...And that’s basically it. If we find any other details we need to add we will update this post and let everyone know.

Questions?

If you have any questions about this please feel free to ask us in the comments below or contact us via email or our contact form. We’re releasing this as a benefit for you, our loyal subscribers, so if you’re not feeling the benefit just let us know and we’ll work it out.

And, as always, thank you for being a member. It’s all of you that keep us going and help make this site possible.

Skeuomorphic Design: What it is, Who uses it, and Why You Need to Know

2012-03-14T13:12:48+00:00

This article looks at some of the most notable examples of the style that Apple is making popular on the iPad in iOS, and weighs up the pros and cons. Is skeuomorphism the future of interface design?

Read Article

The Birth of the iPhone App Theme

2012-02-23T17:31:28+00:00

Arguably one of the biggest web-design buzz words from 2011 into 2012 has been the word mobile. Mobile web-design, mobile user interfaces, mobile screen sizes—and mobile apps.

With over 500,000 mobile apps currently in the Apple App Store, apps have officially taken over. These applications have become an undeniable part of our future.

The surprising part of this explosion (from a design perspective) is how few resources are currently out there to help designers and developers make awesome apps. In this article we’re going to take a look at that, and at the birth of a new resource: the iPhone application theme.

From HTML, to Wordpress, to Mobile?

From the earliest days of the internet explosion we started seeing pre-made HTML templates. Then, during the era of the blog and CMS, we started seeing Wordpress and other themes that could help just about anyone launch a website in a matter of hours.

Now that we’re standing at the beginning of the mobile app explosion we are starting to see the same trend apply to application themes. Custom design and development is giving way to pre-made and easier to customize templates that bring down the barrier to entry.

What Makes an App Theme?

In a lot of ways a mobile application theme is just like any other template for Wordpress or other development platforms.

Many of these mobile templates include complete designs with sliced images, sample code, and essentially everything except the most basic back-end functionality of the app. With some of these templates it’s possible to literally download and install them within hours. And, since we are still on the earlier side of this trend, it is really just a matter of time until these app themes and templates are just as popular as other themes.

Another feature touted by many of the new mobile themes is an included source PSD file (we include these at MediaLoot)that makes it easier to customize. This is basically a nod to the more professional application designers/developers who will require customization but still want to benefit from the pre-made resources.

Complete App Themes & Templates

I’ve put together a little roundup of some cool iPhone UI and icon kits as well as a few complete themes to help you build an awesome-looking and awesome-working app while saving you time designing and coding.

This first group of resources is the more complete ready-made type of app theme. They are a pretty varied group but similar in that you still have customization options for the pre-made template. Some are for more general app uses where as the Story Book Template is an example of a theme for a very specific type of app. Check them out-

iPhone Interface & Icon Kits

Whereas the group above is more like Wordpress themes for app development, this group is more like an awesome tool kit for you to use while designing your app. Instead of the set theme you need to customize this group is a nice selection of app UI/icon kits you can use as you need making your stuff look cool and making you feel cool as you save yourself some work. Some of them are even free. Take a look, below-

iPhone Psd Vector Kit

View Theme →

Surface iPhone UI Kit

View Theme →

App Icon Template

View Theme →

Fresh iPhone UI Kit

View Theme →

iPhone and iPad App UI Kit Psd Vol1

View Theme →

What’s next?

What do you look for in a great iPhone app theme or UI kit? What are some difficulties you have encountered while using one? Have you found some other cool themes or templates? Share your experiences, preferences, and predictions for the future.

FREE Vector Infographic Kit

2012-02-15T16:32:21+00:00

This week’s freebie is a huge vector set for creating infographics. Included in the package are over 50 elements, ranging from graphs and charts to maps and symbols. Enjoy!

MediaLoot Blog

How To Create a Cartoon-Style Illustration in Photoshop

Material needed:

Tutorial Highlights: the benefits of using reference images

The pen tool is your best friend

Use layer masks to confine your elements

If it’s too clean, play with grunge brushes

Introducing PsDefaults: Better Default Graphics for Adobe Photoshop

Timing and Details

Questions…

5 Practical Ways to Replace Images with CSS3

1. Buttons

2. Badges

3. Content Boxes

4. Form Elements

5. Loading Bars

Just a Taster

Adobe CS6 Replacement Icons

Details

Download Link

Sketch 2: A Worthy Photoshop Competitor?

Why I Want To Use It Every Day

What It Can Create

MediaLoot Tickets by Tony Thomas

Icon made with Sketch2 by Jason Csizmadi

iOS Message UI made with Sketch 2 by Ben Breckler

Playing with Sketch 2 by Gadzhi Kharkharov

Sketchified by Maxwell Barvian

Why I Can’t Use It Full Time Yet

Try It Out For Yourself!

How To Prepare for The High-Resolution Web

Uhhh oh…

Introducing Rollover Downloads

Introducing Rollover Downloads

The Details

Questions?

Skeuomorphic Design: What it is, Who uses it, and Why You Need to Know

The Birth of the iPhone App Theme

From HTML, to Wordpress, to Mobile?

What Makes an App Theme?

Complete App Themes & Templates

Wallet: iPhone App UI Theme

Notetool iPhone App UI Kit Psd

iPhone 4 GUI Psd (Retina Display)

Wood iPhone App UI Theme

Story Book iOS App Template

iPhone Interface & Icon Kits

iPhone Psd Vector Kit

Surface iPhone UI Kit

App Icon Template

Fresh iPhone UI Kit

iPhone and iPad App UI Kit Psd Vol1

What’s next?

FREE Vector Infographic Kit