You might have already download it if you’re following designerdepot.com.
Available to download for free, you’ll find some really nice .psd resources in it created by talented designers. Really worth a download
(22 days left from now to grab it).

I also wanted to introduce a new blog section in this post, the “design stuff” category. Basically, I’ll talk about design… and stuff… I’ll also put various links
I like… pretty straight forward isn’t it.

Finally, I’m preparing some big and nice (I hope) freebies. The reason why I didn’t release it yet is because the copyright and the license are currently being changed.
No worries, you’ll still be allowed to use it for free.

Cheers.

Dribbble gave me more than I would have ever expected, I didn’t realize that being on this site would be so life changing, it sounds kinda weird saying that but it’s true. If you look back on one of my previous post, you know why I’m saying this.

Anyway, time for 2 of you to get in and hopefully make Dribbble even awesomer.

If it’s not the first time you see this blog, you might be familiar with the way I proceed for Dribble invites. This time it’s just a little different, here’s how to proceed.

1. Leave a comment on this blog with a link to your portfolio, you twitter username and your dribbble prospect account if you have one.
Tell me a little about you, what you’re doing, what you are working on or whatever you’d like to share on the blog.

2. Post something on twitter mentioning the dribbble invites giveaway, me (@kounterb) and this link http://bit.ly/A1inBH This is not mandatory, I’m not going to control if everyone is doing it but be cool, play the game ;)

3. That’s it! I’ll announce the 2 winners both on Twitter and Dribbble in a week or two depending on the amount of comments received.

Edit —

The contest is now over. I had a lot of pleasure getting to know everyone of you who posted your work.
It was hard to choose but I finally got two winners.
The two invites are going to Sofia Moya for her sweet illustrations and Marc Kuiper for his great work on designer’s list.
Congratulations to you both and keep up the good work.

Edit —

Initially created for an iPad app, I added side arrows and clickable scrollbar at the bottom to make it more web-compliant.

Download this freebie

Maybe I’ll add them in a more complete music player later.

On a not related subject, I’ve recently been added to the designerslist website.
I was following this site for quite long and that’s great to be on it. Make sure to check it out, every blogs and sites listed really worth a click.

[Edit] Since the color scheme of this freebie kept bugging me out I decided to change it for a more lighter one, I think I made a little contrast mistake on the V1. So now while downloading the .zip you’ll get the V1 and the v2. [Edit]

Download this freebie (both v1 and v2)

Download the source

Here is what you should have :

1. Now let’s put some more guide. Using View > New guide add these vertical guides : 179px, 325px, 425px and 570px.

Also add these horizontal guides : 330px, 350px, 409px and 430px. Now you should have this totally messing and unreadable work space as show below, hurray!

Let’s delete the guides we don’t need to avoid any headaches. Basically every guides not mentioned on point 1..

2. Now with your round rectangle tool (U) set on 2px draw a rectangle between the horizontal guides 179px and 570px and the vertical guides 350px and 409px as show on the screenshot below.

Apply the following color #3a3c3f. Double click on the layer and enter the layer styles. Apply a Bevel and emboss effect as show below.

Now apply a gradient overlay from black (#000000) to white (#ffffff) as shown below.

3. Now we gonna make a hole in this layer. First of all select the vector mask thumbnail on your layer then use the Ellipse tool (U) set on “Substract from Shape area (-)”. See the screeshot below.

Now notice the square formed by the guide in the middle of the workspace. Draw the Ellipse inside these limits as show on the screenshot.

If everything went fine, you should have a hole in the middle of the layer. If not, make sur you selected the vector mask on your layer. See the screenshot below.

4. Right click on the layer and select “Convert to Smart Object”. Add the following Drop shadow on it

Now add the following Stroke on it.

5. On the same layer, apply a noise effect (Filter > Noise > Add noise) set to 0.3px. Also name this layer “base”.

Now put this layer in a group named “buttons bg”. Create another group above it named “Loader”.

6. In the “Loader” group, use the ellipse tool (U) to draw an ellipse in the way it totally covers the hole we created. See the screenshot below.

Fill this layer with black (#000000) and set the “Fill” to 30%. Now apply a drop shadow as shown on the screenshot below.

Apply an Inner shadow as shown below.

Now you should see this.

7. Add the following vertical guides : 330px and 420px. Add the following horizontal guides : 335px and 425px.

Within those guides, create an ellipse with the (U) tool. you should see the result below.

Apply the #ffffff color to the layer and set the Fill to 8% and. Apply the a drop shadow as shown below.

8. Duplicate this layer and apply this color on the new layer : #23baf3. Also reset the Fill of the layer to 100%

You should have this.

9. Now we are going to cut 1/4 of the layer. To do so, first create a new horizontal guide at 380px then select the vector mask thumbnail of the blue layer. Use the rectangle tool (U) set on substract from shape area (-) and cut the top left corner of the ellipse. See result on the screenshot.

9. Apply the effects “Drop shadow”, “Bevel and Emboss” and “Gradient Overlay” as sown on the screenshots below.

9. Create the following vertical guides : 336px and 414px. Create the following horizontal guides : 341px and 419px.

Inside those guides, create a new ellipse with the color #3b3d40. you should see this.

10. On this newly created layer apply the following effects.

11. Now import an icon you’d like to display in the middle of the button. I used the refresh icon from the iconsweets 2 pack. Apply the following effects.

12. Time to add some text on this button. I also used an icon from the iconsweets pack 1 (yes I’m fond of their work). The font is Helvetica Neue medium with a #969696 of #ffffff color and a black drop shadow.

The cross effects are listed below.

Don’t forget to order your groups and layers as you go (I wrapped all these layers into a group named Loader button)

13. Now that the loader button part is over, let’s create the image thumbnail. Create a new group named “Image container” and create new vertical guides : 145px, 345px. Also create horizontal guides : 449px, 589px.

Within those guides, create a new black round rectangle with a 2ps radius as shown on the screenshot below.

14. Set the fill of this layer to 30% and apply the following effects : Drop shadow and Inner shadow as shown on the screenshots.

15. In a new layer, create a rectangle using the (U) tool inside the previous one. This new rectangle must be 5px smaller than the previous one on each side so you have this result.

This layer will only be use to crop the image layer.

16. Take an image and import it in photoshop (the image i used here comes from themooniacs.com). Import the image to your .psd and put it in place.

Hold Cmd/ctrl and click on the vector mask thumbnail from the layer previously created. you should see this.

Make sure you have the image’s layer selected. Use Ctrl/Cmd + Shift + I to inverse the selection and delete.

Now you should see this.

17. Apply the following effect on the image’s layer.

Now input the text and icons you want on the right and your set your upload panel is done!

Download the source

I do hope this tutorial was clear enough and that it helped you. As usual I’ll be glad to get feedbacks from you.

First of all, my old blog and portfolio, sebastiengabriel.com was hosted in France and I’ll no longer have this host by leaving the country so I switched to an American host. It seems quite normal considering I’ll be working in California very soon and also considering that half of my audience is American.

I also decided to change the URL, because I wanted to take my alias “Kb” instead of my real name and, again, for hosting reasons.

Regarding the freebies, I won’t stop working on them, I love sharing free stuff and work on different things just for fun.

So here is my new blog/portfolio. More straight to the point and simpler. Some part of it are still being polished but I have a really tight schedule.

Thank you for reading and see you soon for more freebies.

PS : My apologies for my Rss subscribers, here is the new link.
PS2 : My download counter has reached 60 000+ only for the blog, without counting direct downloads from other websites. Many thanks!
PS3 : If you’re looking for me old freebies, they are available in the Designer pack #2. 

Let’s get back to the freebie. Don’t try to find some sense regarding the app features. As my iPhone freebie, I didn’t really think of what could do this app, it’s just a pack of features and elements that could be useful for your projects or it could work as a base for your future app.

I really wish you’ll have as much fun using this .psd as I had designing it.

Download this freebie

PS: for this .psd I use the awesome resources below :

iPad GUI PSD by Teehan and Lax
Icons from iconsweets2

Download this freebie

Today’s freebie is directly related to my previous freebie, the iPhone app that I published months ago.
In this freebie, I mentioned that I was planning to release a retina version of this « fake » app. Here it is!

I know maybe it’s a little late but I finally did it and I’m planning to release an iPad version! Since I just bought one I thought it could be a good idea. So maybe in 2 or 3 months… who knows .

I hope you’ll enjoy it.

Download this freebie

As usual free to downloads, love, use and share.
PS: This pack also includes the previous freebies #1 to #9 I published on my previous blog.

Download this freebie

Download this freebie

So here is « black & white menus ». A freebie with menus…in black… and white.
In addition, you’ll get a vertical menu!
It’s still free to download, free to use and free to share with your friends, parents, pets, etc…

Download this freebie

Download this freebie

On another subject, I’ll probably give away a Dribbble invite in a very close future. Make sure you don’t miss it :) .

Download this freebie

Download this freebie

So for us guys and girls who are turned on by some juicy buttons, here is my latest freebie, a new UI kit!
If you often read this blog, I published another black UI kit and wrote that I were planning on releasing a white version of it. Well, it not really is, let’s say it’s more a new one inspired by the old one.

Talking about inspiration you might recognize in this UI some elements from others. My inspiration for it came from this awesome ui kit « Moonify » and also from the work of Orman Clark.

As usual, I hope you’ll enjoy it and that you’ll make some great design with it.

Download this freebie

Download this freebie

A little change this week, instead of a resource, here comes my first online tutorial. I really hope you’ll enjoy it and that it will be useful for you.
I chose my previous resource, the upload panel, as a base for this tutorial. This freebie is simple and has a lot of interesting stuff in it.

Since it’s my first tutorial please feel free to comment, give me feedbacks or advices. I worked a lot to make it simple and detailed.
Also this tutorial will be in two parts because of its length.

Somes notes before we begin:

• Don’t forget to create and name groups of layers while you work.
• Regarding the tool (U), don’t forget to check the « snap to pixels box » (see screenshot).
• This tutorial displays my own way to do things in photoshop. It’s not the only way to do them and probably not the more simple. I you have a better/alternate way to do it, please share with others.
• Last thing, this tutorial is made for people who actually opened photoshop more than once.

Download the source

1. Begin to create a new document with these sizes : 750*700px with the color #3b3d40 in a new layer.

2. Add some noise to this layer by clicking Filters > Noise > Add noise. Set it on 1% in uniform.

3. Now let’s create a pattern. Create a new document with the sizes 3*3px. In this new document, hide the background and create a new layer. On this layer, and with the selection tool (M), create black squares as shown on the screenshot below. To fill your selection use the shortcut Cmd/Ctrl + Backspace.

4. Now go to the « Edit » menu and « Define pattern ». Named this newly created pattern as you want.

5. Go back on your main .psd create a new layer and select the « Paint bucket tool » (G). In the upper menu, select « Pattern » and then your brand new pattern.

6. Apply this pattern with the Paint bucket tool on your new layer.

7. Apply this pattern with the Paint bucket tool on your new layer.

8. Add these horizontal guides : 110px, 150px and vertical : 125px, 303px, 584px and 625px.

9. With the rectangle tool (U) Draw a rectangle between the vertical guides 125px and 625px et the horizontal guides 110px and 150px. Apply the color #3b3d40 on this rectangle and name it « base ».

10. Apply a stroke and an inner shadow as shown on the screenshot

11. Now create a separator on the 303px ruler.
To do so, selection the rectangle tool (U) and draw a rectangle with the same height as the header and with the color #2b2d2f and a 1px width. See the screenshot. Place this first vertical rectangle on the left of the 303px ruler. Repeat the operation but now with the color #484a4e. Place this second rectangle on the right of the 303px ruler.

Repeat this operation (ou simply duplicate this layer) but with the color #484a4e this time. Place this rectangle on the right of the 30″px guide. See the result on the screenshot.

12. Let’s add the icon and the text. For this, I use an icon from the awesome iconsweet2 pack in 16*16px. Align the icon vertically and fill it with white. Add the drop shadow effect as shown on the screenshot.

13. Add a text on the right of the icon. I use the helvetica Neue font in Medium. Set the size to 14pt and color to #ffffff. Use the same rop shadow as on the icon.

14. Space and center both of them as you wish between the left border and the separator. Now let’s create the hover effect for this button. Using the rectangle tool (U) create a white rectangle on a new layer. The size of this rectangle must be reduced by 1px on every side so the stroke is not hidden. See the screenshot.

15. Let’s create the second button named « upload a video » with a different icon also from the iconsweet2 pack. The only difference here is that the white color is replaced by the #969696 color in order to mark the difference between active and normal state. Feel free to play with the drop shadow to make these texts pop. See the second screenshot to order your groups and layers.

16. Now we’re going to create the close button. Begin by duplicating the previously created separator and place it on the 584px guide. See the screenshot.

The way way as we did the hover state before, create a square with the (U) tool with the color #232323 and set the opacity on 30%.

17. Using the (U) tool, create a circle with the color #000000 a center it in the previously created square. Apply a drop shadow and inner shadow effect as showed on the screenshots and set the « fill » to 20%.

18. Because I’m lazy, I used the existing cross in the iconsweet1 pack. Place this #cbcbcb colored cross in the center of the circle and apply a drop shadow effect as shown on the following screenshot.

Also add a gradient overlay with the following setting as shown on the screenshot. Regarding the gradient, place a black marker at 47% and a white one at 53%.

19. Now that we are done with the header of this upload panel, let’s add the final effect. Select the « base » layer and transform it in a smart object (see the screenshot). Then go to the Filter menu and add some noise. Set it to 0.5% and apply.

20. Let’s create the background of the upload panel. Set an horizontal guide at 610px. With the rectangle tool (U) create a new layer colored in #3b3d40 under the group forming the header. Convert this layer to a smart object and apply a 0.3% noise.

21. On this new layer, add an inside 1px stroke with the color #2b2d2f. Also add an inner shadow as shown on the screenshot.

22. To create the shadow under the upload panel, use the rectangle tool (U) and create a rectangle with the same size as the whole upload panel. Apply a drop shadow as shown on the screenshot below.

23. Create new horizontal guides : 168px and 211px. Create new verticla guides : 145px and 454px. With the rounded rectangle tool (U) with a 2px radius create a rectangle within these guides (see the screenshot) and set the fill to 30%.

24. On this same rectangle, apply a white drop shadow as shown on this screenshot.

Also apply an inner shadow as shown on this screenshot

25. With the rounded rectangle tool with a 2px radius, draw a white rectangle inside a new layer in the previously created black rectangle. Keep a 5px margin on every side of this rectangle and apply the settings shown on these screenshots.

26. Using the Text tool (T) enter you text on the created field. Here I used helvetica Neue Medium 14pt #a0a0a0.

27. Create two vertical guides : 464px and 605px. With the rounded rectangle tool (U) set on a 2px radius, draw a rectangle inside those guides.

28. Apply on this new layer a gradient overlay from the color #80bb09 to #aed54d and an inner shadow as shown on the screenshot.

29. Right click on this same layer and select « convert to smart object ». Then apply on this layer a noise effect at 1% and a drop shadow as shown on the screenshot.

30. Choose an icon (mine is still from the iconsweet2 icon pack), apply the color #3c590b with a drop shadow as shown on the screeshot.

With the text tool (T) insert a text with the same color as the icon and add a drop shadow as shown on this screenshot.

31. Add an horizontal guide at 233px. Then with the rectangle tool, create a rectangle of 1px height and with the same width as the upload panel. Fill it with #47494d. Place this layer above the 233px horizontal guide. Finally, apply a drop shadow as shown on the screenshot.

32. For this step, just duplicate all the layers from the first field (group « field 1″ in my .psd). Move this new group down 17px. Rename this group « Field 2″ and delete the text inside the field.

33. Select your new button background, right lcick on it and select « new smart object via copy ». Delete the old one.

34. Double click in this layer to enter the smart object and modify the green gradient to a blue one with the color #21b7f3 to #6dd9f8. Save, close the window and get back to your main .psd.

35. As for the previous button, take an icon, apply the color #0e5e7d on it and do the same for the text.

To be continued… Here what your uploader should look like now.

Download the source

That’s all for this first part. Again, feel free to comment and give me some feedbacks on this tutorial if it’s not clear enough.

Anyway you’re not here to listen to me whining about my (web)life but for freebies right ?! So here it is, since I was bored at home I passed a little more time than the usual to make this freebie : An audio player (and my first one, lots of first lately…)!

The design of this freebie is based on a previous freebie I made, the video player.
The awesome wooden background I used came from  Matthew Skiles. This resource is used a lot actually, I needed to try it on my own design^^.

I also create this exclusive freebie for the guys at creativefan.com, take a look at their blog if you have the time.

As usual, I hope you’ll find it useful. And if one of you wants to code it, share the link!

Last thing you should definitely check out this amazing group : Berry Weight.

Download this freebie

Based on the previous freebie this resource will bring the darkness into your future interfaces.
I’m planning on releasing it in white and with added features for future versions.

Other things I want to share with you while I’m writing this post, my portfolio/blog reached the 20.000+ downloads today so thanks everyone !

Download this freebie