How to Use UI Kit’s, Beginners Video Tips

Hello dear readers! We have lately gotten a bunch of e-mails containing questions on how to use our UI Kits and inquiries on the best methods on using them in Adobe Photoshop. Most of these questions are for beginner Photoshop learners. This is why we have decided to make a video containing the most frequently asked questions. This way you will have the possibility to see how you can work in Photoshop by seeing real examples. This video was made by Sergey Shmidt that is here to help you in knowing more on the simple elements, but essential in Photoshop.

This video was made so that it would be related to the Impressionist UI, but the working techniques would be the same with all the PSD files. The video is mostly meant for beginners and we really hope it would help all of you work more efficiently in Photoshop.

How to Use UI Kit (HD + Full Screen)

The video contains Quick Tips (Adobe Photoshop):

1. How to make a simple web design

Here you can see how Sergey created a simple User Interface with the help of Impressionist UI. It contains the login box, newsletter and Carousel. In the end what he achieved is a clean, simple but elegant design.

2. How to resize components

The second video will showcase how to resize elements without quality loss. As an example we have a simple menu that will be extended in order to add one more section to it.

3. How to change the color of components

The color of the components you have can be easily changed and adapted to the existing design or to a totally new design. You can personalize the elements the way you would like to.

4. How to use styles of UI Kit

Do you like the style of a certain button, or maybe the shape of any other elements in the pack? You can save it and use it as any other element you would want to create if you don’t see it in the Impressionist UI pack. This way you can create a design with the same style with other elements from the pack without using other styles in the user interface and try to upload the final visual design.

5. How to use vector icons (with UI Kit)

This video will show how to use a simple icon in order to personalize a button, this way it transforms in what you would want the icon to represent. You will also learn how to make the design so that the icon looks the same as all the other elements around it.

6. How to export (save) images for web

The last part of the video shows how to quickly and easily save newly created elements or the ones you have in Photoshop already transforming them from PSD to any other available format (PNG, JPEG, GIF etc…)

If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

Newsletter

23 Comments
  1. stu Aug 8, 2:11 pm

    very nice :)

    annoying music but nice video, very informative!

    Reply
    +1
  2. Tim Rowley Aug 8, 8:09 pm

    Stu’s right about the music, but the video is fantastic. I keep trying to find the time to learn about UI kits and this is going to accelerate that no end. Thanks

    Reply
    -1
  3. Andrew Lee Aug 8, 8:24 pm

    Awesome tutorial, really well made. Lots of good photoshop tips I didn’t know.

    Reply
    +1
  4. Mike Whalen Aug 8, 10:52 pm

    Great video, thanks for this! I too learned a lot of Photoshop tips, things that seem so elementary now that I think about them.

    Reply
    0
  5. J Rose Aug 9, 12:32 am

    Amazing…thank you soooooooo much! Great Photoshop tips.

    Reply
    0
  6. Jarod Online Aug 9, 6:26 am

    Hey I’ve been following your blog for a long time now, and a question I always wanted to ask was did you make all of those UI’s and icons yourself? They’re always good.

    Reply
    0
  7. gojc Aug 9, 2:41 pm

    Amazing work and tutorial. Can you please explain how can I use this in WP themes

    Reply
    +1
  8. Pushpinder Bagga Aug 9, 9:44 pm

    Very nice video. I also like the bg music.

    Reply
    0
  9. Dee Aug 12, 11:17 pm

    Excellent tutorials

    Thanks so much, learned so many things like exporting etc that a beginner has a little trouble grasping but seeing it done really helped.
    Always the best resources on this site!
    Cheers,
    Dee

    Reply
    0
  10. Enrico Aug 18, 11:34 am

    Great! So I finally can use the UI kits on which I invested my money months ago… just kidding ;) many thanks fpr the tut, I used fireworks for years and the production process in photoshop was a little weird for me.

    Reply
    0
  11. Nimsrules Aug 22, 9:31 pm

    Superb video, downloaded for future use.
    P.S – Love the new design of your newsletter :)

    Reply
    0
  12. Brent Aug 31, 11:38 pm

    Excellent. Thank you. Very complete. Please do more of these.

    Reply
    0
  13. congatre_ha Oct 10, 4:02 pm

    it’s new way,Lots of good photoshop tips I didn’t know.thank so much it’s usefull!

    Reply
    0
  14. Said Bakr Oct 31, 3:04 am

    Just I liked to mention about the Photoshop version required to do this tutorial. However, it is very useful tutorial.

    Reply
    0
  15. sudha Dec 1, 8:27 am

    Thanks for this!!! I learned a lot of Photoshop.

    Reply
    0
  16. Boris Chu Jan 21, 5:01 am

    Excellent video, I got some pretty good tips!

    Reply
    0
  17. Chad Heinen Feb 7, 12:50 am

    Thank you guys, you rock!

    I work with a lot of start-ups to help them learn how to quickly prototype their site designs and this is an awesome video for me to pass on to them!

    Reply
    0
  18. André Apr 3, 3:15 pm

    Is hard for you to inform the name of this song? >(
    Thanks

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters