MediaLoot Blog

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!

How To Create An Epic Metallic Band Logo

2012-02-08T15:08:45+00:00

Every band understands the importance of their visual image, and how that come across to their listeners. A big part of that visual image for most musicians is in their logo, it’s what’s printed on their CDs, posters, T-shirts etc. And the beauty of a band logo is that, unlike it in world of business, a band logo can often be a lot more liberal with special effects, atmosphere, and impact. Which can lead to some very exciting results.

This tutorial will guide you through techniques in Photoshop that will create an atmospheric, grungy logo, perfect for industrial, rock or metal bands. And the techniques you will learn are applicable to many more subjects, the most obvious ones being movie and game titles.

Required Resources

For this tutorial you will need a few files handy. We have prepared some free samples of our premium resources for you to use:

Free Sample from Dark Grunge Textures
Free Sample from Scratched Metallic Textures

You will also need this font to follow the tutorial exactly: Ethnocentric

Final Result Preview

Before we get started, here is a preview of what we will be creating: (click for full size)

Step 1

To start off, launch Photoshop and create a new document, RGB Color, width 1200 pixels, height 600 pixels and 72 pixels/inch.

Step 2

Grab the free sample from the Dark Grunge Textures pack, and place in on the canvas. It should fill the whole document horizontally and overlap slightly vertically. This will be our background layer.

Step 3

Find the Adjustments panel and add a new Brightness/Contrast adjustment. (In older versions of Photoshop Image > Adjustments > Brightness/Contrast). The current background image is a little strong so we’re going to tone it down by reducing the Brightness and Contrast.

Step 4

Add a Hue/Saturation adjustment (In older versions of Photoshop Image > Adjustments > Hue/Saturation) Check the Colorize box and move the hue into the blue region and reduce the saturation to 10. This will give a very subtle cold tint to the background.

Step 5

Next we’re going to add our logo type, using the Text Tool, type your band name in the center of the canvas. I’m going to call my band “Fakulty” a nice industrial name. And we are using the Ethnocentric font here.

Step 6

The kerning is a little messy by default, so tidy this up by reducing some of the larger gaps between the letters.

Step 7

Our text is sitting quite flush now, but we’re going to make some slight adjustments to the font to improve it further. Right click the text layer and “Convert to Shape”

Step 8

Now using the Pen or Direct Selection tool adjust the vector points on the text. In the image below I have highlighted which areas of the text I modified. On the “F” I tucked it in a little bit to line up with the slant of the “A”. I removed the slant on the “L”, and switch the direction of the slant on the “T”.

Take some time with this step and make sure you get it just right. Also if you are using a different font or band name, familiarize yourself with the fonts characteristics before you start making edits, otherwise it won’t seem natural.

Step 9

Change the color of the text, I’ve gone with a slightly darker, desaturated blue for a cold feel.

Step 10

Now it’s time to add some layer styles. These might seem a little harsh at first but they get toned down by extra layers added later.

First up, Drop Shadow:

Step 11

Bevel and Emboss:

Step 12

Contour:

Step 13

Gradient Overlay:

Step 14

Stroke:

Step 15

After applying the layer styles, you should have something looking a little like this:

Step 16

Duplicate your logo layer so that it is placed directly above the original that we just applied effects too. Make the new layer white again, and clear it’s layer styles.

Step 17

Grab the free sample from the Metal Scratches set and place it on the canvas. The texture should just about cover all of the text. Make sure it is infront of the white logo layer and right click and “Create Clipping Mask”.

Step 18

The texture should be trimmed to the shape of your logo. We’re just going to increase the dark areas of the texture by tweaking the Levels (Ctrl/CMD + L)

Step 19

That looks good as it is, but a good technique to increase the detail of a grunge texture is to duplicate the layer, Invert (Ctrl/CMD + i) the colors, and Flip Vertical. Then reduce the Opacity to about 35% so that the original layer can be seen too.

Step 20

Group (Ctrl/CMD + G) the two texture layers, and the white logo layer (the clipping mask). Then set the Blending Mode of the group to Hard Light.

Step 21

The logo looks pretty awesome now, but just to finish off let’s add a bit of lighting. Draw a white Ellipse shape covering the logo.

Step 22

Apply a Gaussian Blue at around 75.

Step 23

Adjust the Blending Mode of the layer to Soft Light, and set the Opacity to around 75%.

Step 24

Now for a subtle shadow in the background. Duplicate the logo layer again and color it black. Move it behind the original logo layer.

Step 25

Distort the shape slightly using the Perspective tool (Edit > Transform > Perspective).

Step 26

Finally, add a Gaussian Blur to the shadow layer to finish it off.

Conclusion

And there it is! click here to view full size. I hope you enjoyed the tutorial and have learned a little about tweaking fonts, working with blending modes and layer styles! As always, we welcome your comments!

FREE: Vector Arrows Set - Vol 1

2012-02-08T09:29:45+00:00

This week’s freebie is a set of 50 arrow shapes for web and graphic design. Each one has been designed in Adobe Illustrator and is supplied in various vector formats, and also for added convenience we’ve also included them as Photoshop Custom Shapes (.csh).

23+ Unique One-Page Interface Designs

2012-01-31T16:40:43+00:00

Short and sweet, yet fun and unique. These sites have a great selection of photos, info, and super cool interface all wrapped up in a single page. Bellow is a collection of some of my favorite awesome one-pagers, check them out!

Unique Interface Designs

Los Morochos de la Usina

Super creative and entertaining, filled with fun animated details. I especially like the effects connected with mouse movement and the bat graphic, pull it down to read the rest of the text!

View Site →

David Pareja

I absolutely love this interface it is so creative and innovative done in a familiar format uniquely put in website format.

View Site →

Javi Malabares

Really cool page effects tied to mouse movement!

View Site →

Coo-Coo Core

Minimal and easy to use but still fun with drop down text building off of a nice graphic.

View Site →

Couch Kumaras

Simple but a refreshingly unique setup. The way the videos, text, and cute contact icons appear and fade away is smoothly and cooly done.

View Site →

The Cupcake Factory

Awesome detailed graphics, vibrant colors and especially impressive are the chocolate hearts that give the illusion of depth.

View Site →

Aleks Faure

The bright blue drop down banners are fun, the use of color, smooth scrolling, and graphics give what could be a traditional setup a personalized feel.

View Site →

Tomas Pojeta

Amusing and super detailed graphics give the vertical scroll a new and creative feel to the page, be sure to scroll allll the way up and down.

View Site →

Jonath Lee

Ultra-crisp and cool, clean vibe. It has a minimal feel but is still a comprehensive display of his work. I really, really like the slide out side menu.

View Site →

Bonterra Restaurant

Easy to navigate, great use of photos and the fixed background makes you feel like you are in a wine cellar.

View Site →

SkidPasset

Has a fun snowy feel with a nice mix of photos, video and information while the fixed navigation bar keeps it super user friendly.

View Site →

Ladybird School of Motoring

Unique layout with impressive attention to detail, like the effect of the wheels turning, and the moving dual layered horizon that adds a great effect of depth and movement. The car even goes in reverse!

View Site →

Jai Pandya

The traditional fixed navigation bar is complimented with little hand written directional links and arrows that give the site a unique, personal feel.

View Site →

Festa das Comadres

Fun and colorful page bursting with photos and whimsical graphics, I particularly like the fixed position menu and logo.

View Site →

Hot Meal

I really enjoy the setup of the fixed background photo and table of contents with scrolling info. Vibrant colors and nice drop down bullet lists.

View Site →

Brewfest 2011

Like the page above it, it’s nice that the whole page doesn’t scroll just the info. Its a nice touch how the pictures of dogs change.

View Site →

Matthias Steiner

This time the photos and info scroll horizontally, which is a nice change of pace. Even cooler is when you click the bottom link the menu that is fixed actually scrolls upward for some fun, extra options. Unique.

View Site →

Fabio Neural

Trendy and bright simple to use interface packed full of music, video, and other info. Fun mouse activated typography effects and cool changing photo background.

View Site →

Tyler Fink Photography

Super minimalistic but it works. All the contact options you need while a nice showcase of photos change in the background. Love the catch phrase.

View Site →

Jon Phillips

Short and sweet, perfect amount of information that smoothly scrolls transparently over top of a great background photo.

View Site →

Valter Bicudo

Cooly unique with a nicely simple feel that’s enjoyably light on text. I love the little icon buttons as creative navigation tools.

View Site →

Fox Johnston

Bright, ultra modern feel and very clean professional look. The expanding side menu is a nice touch and so is the project info that appears when you hover your mouse over the gorgeous changing photos.

View Site →

Contrast Rebellion

I absolutely love this site! Not only am I a huge fan of the subject matter but all of the details from the interface to the graphics are super well done. Full of tons of mixed navigation options and a fun, unique interactive setup that make this site feel like a treasure hunt.

View Site →

The Evolution of the Web

This one you have to check out for yourself. It’s not quite a site, more an interactive work of art, but I wanted to include it. It is definitely unique and awesomely done.

View Site →

What are your favorites?

What are some of your favorite one-page sites? What are some of your favorite features of the sites in this article? Do you prefer a minimalist one-pager or a site filled with text, graphics, video, and navigation options? Feel free to share your comments or tips on how to make an awesome, unique site!

MediaLoot Blog

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

How To Create An Epic Metallic Band Logo

Required Resources

Final Result Preview

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Step 16

Step 17

Step 18

Step 19

Step 20

Step 21

Step 22

Step 23

Step 24

Step 25

Step 26

Conclusion

FREE: Vector Arrows Set - Vol 1

23+ Unique One-Page Interface Designs

Unique Interface Designs

Los Morochos de la Usina

David Pareja

Javi Malabares

Coo-Coo Core

Couch Kumaras

The Cupcake Factory

Aleks Faure

Tomas Pojeta

Jonath Lee