1stwebdesigner

Posted by | Posted on 18:17

1stwebdesigner


50+ Creative Logo Designs With Hidden Thought

Posted: 19 Jul 2010 02:00 PM PDT

Logo is branding for every company and simple, easy to remember and unique logo can do wonders for company and make it stand out just by branding itself! This time we will showcase fresh logos where most of them will have hidden thought, some recognizable similarity to specific company you will easily understand and feel amazed!

So, lets take a look at collection of great logos for your inspiration. I tried to collect logos, which are mostly new and you probably never seen many of them before, new piece of inspiration! Enjoy!

1. Aqua Style

Logo made for Car wash service.

2. Baby Online

Logo for a internet portal about baby’s and stuff.

3. Olivier

Logo made for cafe.

4. Colourfly

5. Lovers Can Be Choosers

This logo was created for an online dating site.

6. Mailattack

Logo that looks like a shark.

7. THNK

Logo for a design consultancy.

8. The web doctor

Logo design for a website design and update service.

9. WISEMUSIC

These discs look like owl for this and the name is wisemusic.

10. Kid Shop

Logo for online shop, place for designers, that make some products for kids.

11. Rock’n History

12. Love Canada

13. Eyesearch

14. Building

It’s about building of word “building”.

15. Foodball

16. Master Of Code

Web development company.

17. Passenger Productions alt

Passenger is a creative company that employs various media to deliver well-crafted stories for business, advocacy and entertainment.

18. I love poker

Mark for online poker site.

19. The 4 T’s

Logo for a local non-profit group.

20. LongtermParking

21. Flexon

Logo for contest (sport club). Win 1 place.

22. Info Plaza

Logo for an online book store.

23. Noname

24. Epen

Electronic Pencil.

25. The fish house

Fish restaurant/takeaway. Like a posh chippy that sells many types of fish.

26. Ishare

File sharing software.

27. Bikelove

28. Happiness For Life

Logo for dating agency.

29. Hotel Films

This was just an idea, after another logo went sour, it turned into this.

30. The Fast Finder

This is for a Yellow Pages / Google type website.

31. A lovely note

Mark for wedding vocalist. The middle connection forms a Uvula (The piece of skin that hangs down in the back of your throat).

32. Anyway

Proof of concept for business in development phase for mapping and way finding products

33. Nive Yoga Studios

Mark for a new chain of yoga studios in the GTA.

34. Creative Solution

Logo Creative Solution.

35. NO:TI:ME

36. Dog Care Veterinary

Hands placed top and bottom and a dog image formed at the negative space.

37. Voltacon

Voltacon Alternative current (worldwide abbreviated as AC) company.

38. Smart-Fishing

Logo made for fish internet shop.

39. Snake

And this list is about great logos that you are allowed to buy in site brandstack.com.

1. WALK FOR HEART $399

This is a great logo for walks, marathons, and charity drives with a heart.

2. Design Swan $250

An elegant, classy, and flexible brand. Good for young/creative industries. The name of the logo can be changed to anything that you may see fit that will work for your along with a color change request. These changes will be done upon purchase of the logo.

3. Funky Money $300

Cool Funky Monkey – could be used by t-shirt shop, dj’s, music label or media company.

4. Seeksix $550

Seeksix, clean and simple brand suitable for any kind of business related with search engine. Fix really good on pages related with education or ebooks as the symbol represents a pair of glasses that are made with two sixes. Showing two color options, any change in the color or type included in price.

5. More Cake News $400

Can be anything from business news to a lot of other things. Blogging perhaps.

6. Crabissors $350

Illustrative crab with scissors as hands – wordplay: crab – scissors – crabissors. This logo can be good for hair cut brands, media, maybe restaurants or web companies.

7. Pepperhorn $350

A spicy brand that would work great for a wide variety of businesses, including media companies, broadcasting, music companies etc., or something related to food and music – a restaurant with live music, for example. The mark resembles both a chilli pepper and a horn (the musical instrument).

8. Go $395

This design is ideal for any cycling and bikes/bicycles business or event. its called GO. It can be customized to suit your requirement, bottom text can be change if your business in the say industry but different to text on the design.

9. Happy Cream $250

This is a classy logo for any ice cream parlors or dessert shops.

10. Coffe Corner $350

The logo and name works well for restaurants or cafe’s, the name may well indicate the place of business location.

11. Cactus Fireworks $300

This logo brand can be useful for any specialized Cactus Gardening, also for any Fireworks company or product related to fireworks with eco friendly concept.

12. Royal Theater $999

Good logo for any royal or luxurious theater or opera.

13. Media Labs $475

Media Labs Logo is best suited for Entertainemnt and media industry. The “lab” meaning is stressed so as to give the industry is giving even minute detail of their Media work.

How To Create Recognizable And Really Unique Article Thumbnails

Posted: 19 Jul 2010 03:00 AM PDT

Preview-post-thumbnailsPicture can save a thousand words. That's true and it works everywhere, even in blogs. Next thing visitors spot after the title is thumbnail. Well done post thumbnails will attract more visitors and they will explore your website with interest.

In this article I'm going to share some tips and advices about beautiful post thumbnails. You will see lot examples of using thumbnails and hopefully learn something new.

Size and Location

Correct size and placing is as important as the thumbnails themselves. Don't overplay with the sizes. Too small size might not display all the information you need, but too large size will be distracting. Don't choose too striking or too imperceptible position either. Cleary visible spot for your thumbnails is good, but the content is more important, right? Too imperceptible spot won't attract so many visitors. Below you will find some of the most popular thumbnail placing and size.

Large thumbnail below title or introduction

Layouts where quite large thumbnail lies below heading or introduction has become quite popular. They're handy, because you can insert a lot of information there. You don't have to resize your preferred image to half. Great preview is available. Lot of blogs choose to put pictures or screenshots there, because creating so large thumbnail yourself is time-consuming. Usually the width is fixed, but the height varies from around 200 to 400 pixels. And that's great, because if you are using a photo, you can crop it as you like. These large thumbnails if made properly can really attach lots of visitors. But be aware that not all designs will look good with these large thumbnails.

Fubiz

Fubiz-post-thumbnails

Denis Designs Blog

Denis-designs-blog-post-thumbnails

Little Box Of Ideas

Little-box-of-ideas-post-thumbnails

SW Graphic

Sw-graphic-blog-post-thumbnails

Chilli Blog

In Chilli the thumbnail is actually above title. The thumbnails aren't too large, they fit perfectly and make superb contrast with this awesome dark design.

Chilli-blog-post-thumbnails

Square thumbnail leftwards title

This is definitely most used layout in design blogs. It's very practical and the thumbnails doesn't take up too much room. Users can quickly scroll trough posts. Sizes of these thumbnails usually varies from 100 to 250 pixels for each brink. If you have a good taste and accordant skills, these thumbnails can look really beautiful and make people willing to read your posts.

PSDFan

Psd-fan-post-thumbnails

Appstorm

Appstorm-post-thumbnails

PSD Vault

Psd-vault-post-thumbnails

SpeckyBoy

Specky-boy-post-thumbnails

Square thumbnail below title and leftwards content

This solution is very similar to previous one, but not used as much. It allows users to focus more on the title, and only after the title they spot the thumbnail. I like this solution, because you can read the title and then get a small preview about article. However thumbnail is not as important as the content itself and in this location the thumbnail distracts attention from your post introduction a little. But there are many blogs, where this layout looks very good. The most popular again is square shaped thumbnail, but there are blogs using rectangular thumbnails too.

Forcg

Forcg-post-thumbnails

Web Designer Depot

Web-designer-depot-post-thumbnails

My Ink Blog

My-ink-blog-post-thumbnails

Creative Fan

Creative-fan-post-thumbnails

Square thumbnail rightwards title

Infrequent placing, but basically it's pretty much the same as within the left side. Only people are not used to it, that's why it looks a bit strange. Personally I prefer left side placing, because I don't like switching my look from thumbnail to beginning of the title and backwards. But in some blogs those thumbnails actually make segregated column and look pretty solid.

UX Booth

Ux-booth-post-thumbnails

Techniques

Photographs

Photos matching the subject you are writing about can really highlight your post. Choose them with taste and keep the photos relevant. If you are writing about jQuery tutorials, don't put a photo manipulation as thumbnail. I suggest checking out 60 Free High Quality Stock Photography Sites if you want to find free stock photos. But I think you will agree that photos on those sites usually aren't exactly as you imagined. If you want the quality, you have to pay for it. Here are some good sites to get finest quality images:

Of course, it's pretty expensive to buy images there one by one, but subscription would be a good option. Then you could use some magnificent images to afforce your posts. If you have already found and included some photos in your post, you can assuredly put one of those photos as thumbnail.

Screenshots

If your post includes well designed webpage, tool or a software, then why don't you put it as a thumbnail? It will completely measure up with the content and you will unite appropriate with enjoyable. People will get a preview about what's in the article.

Screenshots-1-post-thumbnails

Psd.Tutsplus has a freebie to offer, it's pretty logic that they're putting preview of it as a thumbnail.

Screenshots-2-post-thumbnails

Here Smashing Magazine is writing about jQuery and some tools and they have included a screenshot of one of them as the thumbnail. It's a good looking tool with nice contrast and at the same time it gives readers a visual preview about what can they expect from the article.

Show off content

This method is even more simple than using screenshots. If you are writing about art or design, you can just pick one image from your post and set it as thumbnail. Again, people will get a preview of post content and thumbnail will be attractive.

Show-off-content-1-post-thumbnails

Abduzeedo always chooses one gorgeous image from their daily inspiration series and sets it as a thumbnail. Readers spot the great artwork and want to see more.

Show-off-content-2-post-thumbnails

Reencoded is writing about humorous artworks and they've picked up colorful and catching image as their thumbnail.

Text on thumbnail

Adding some text to your thumbnails can help people focus to your posts. This text can also help to bring visitors if they search for images in sites like Google.

Text-1-post-thumbnails

Text-2-post-thumbnails

Trendland has a unique and really great solution. Once you hover the thumbnail, a pop up with some introduction is revealed. That way you can save a lot of space and visitors can have both visual and written preview available.

United style

If you are writing lot about similar topics, a united thumbnail design is a neat solution. You can create thumbnails after premade template. That way you will save time and you will have stylish thumbnails. Many blogs have CSS solutions for thumbnail styling.

United-1-post-thumbnails

See those shadows under thumbnails in Web Stuff Share? They're under every thumbnail making them look small arches. That gives your blog more unified look. Every thumbnail is different there, but you can see those shadows right away.

United-2-post-thumbnails

Hv-Designs releases freebie pack every Friday. Instead of creating new thumbnail every week, Richard Carpenter has created a template and just changes the number once a week.

Other uses

Thumbnails are not used just in main page while users browse trough posts. Of course that's the most important use of them, but there are still some other, worth to mention, uses.

Related posts

Related posts section after article is a nice feature itself. But monotonous links just themselves aren't embolding users to read some other articles. You need to brighten them up. That's where thumbnails come in again.

Related-1-post-thumbnails

Web Design Ledger has nice 5 related posts after article each with pretty large fixed size thumbnail.

Related-2-post-thumbnails

Smashing Hub also has 5 related posts, but they're using small squared thumbnails. The cons are that there are large spacings between titles and those thumbnails are really small.

Related-3-post-thumbnails

But Graphic Design Blender has a solution for this problem. They have placed titles in fixed space below thumbnails. Though there are less posts, but the spacing is good and it's very compact.

Featured posts

Featured post thumbnails are even more important, because they will be seen by much more people. Again, if your thumbnails are worked great, they will attract lots of visitors.

Featured-1-post-thumbnails

Iso 50 doesn't have a lot of space for featured posts, but those small dishy thumbnails are working great on the right side of posts.

Featured-2-post-thumbnails

Epicera Studio has got really large thumbnails and they're using jQuery to rotate them. There is also category and title with direct links on thumbnails. If you have a lot of space in your design, this is one brilliant solution.

Gallery view

Blogs, who are posting a lot often use gallery style post view. Thumbnails are very important then. Since you won't be able to add long post descriptions, only available information will be title and thumbnail. And, of course, in that miscellany people won't focus so much to the titles. They will look for a pleasant picture to click on.

Gallery-1-post-thumbnails

Design Aside is publishing a lot of posts, so they have chosen gallery post view. With those large thumbnails it's very easy to quickly run over the content.

Gallery-2-post-thumbnails

Chonch Style has customized thumbnails to match the designs. Pretty large rectangular thumbnails with title on them makes browsing agreeable.

List thumbnails

When you have a long list with articles or links again, as in related posts, people won't be willing to read those titles anc click on them. Small thumbnail is a fine way out.

List-1-post-thumbnails

Web Design Ledger has placed two lists with their premium files and recent articles on the left side. Each link has a small 25×25 pixel thumbnail in front of it. You can't get a good preview of them, but at least it's something and it's much better than just boring list of links.

List-2-post-thumbnails

Boompa has added small squared thumbnails showing off their new music. There aren't many of links, so they can afford the thumbnails to be larger.

Quick tutorial

I'm going to show you how I created 150×150 pixel thumbnail for this article. I'm going to use screenshot above mentioned of PSD Fan.

1. Create a new document like shown below.

Tutorial-1-post-thumbnails

2. Take the screenshot and paste it into your document. Then press Ctrl + T and enter settings shown below.

Tutorial-2-post-thumbnails

3. Move your photo up a bit using Move Tool. You should have something like this.

Tutorial-3-post-thumbnails

4. Go to Filter – Blur – Gaussian Blur and apply 1.5 pixels. Then go to Filter – Blur – Motion Blur and apply 4 pixels with 10° angle. You should have something like this.

Tutorial-4-post-thumbnails

5. Grab Rectangle Tool, set it to Fill Pixels mode and fix it's size to 150×32 pixels. Create a new layer and draw it. Place it somewhere in bottom.

Tutorial-5-post-thumbnails

6. Lower the Fill Opacity to 35% and apply 1 pixel black stroke with 40% Opacity.

Tutorial-6-post-thumbnails

7. Add your text. I used

  • Myriad Pro
  • Regular, 18 pt, Sharp, White, 0 Tracking
  • Drop shadow, 30% Opacity, 0 px Distance, 0% Spread, 1 px Size

Then I duplicated layer, rasterized it and painted it black. I placed it under original and moved 1 px down. That will give you little depth effect.

Tutorial-7-post-thumbnails

8. Select soft brush (I used 50 px large) and brush around brinks. Then go to Filter – Blur – Box Blur and apply 20 pixels. In this case I lowered the Opacity to 45%.

Tutorial-8-post-thumbnails

9. Create a new layer above your screenshot layer. Fill it with 50% grey and set it to Overlay. Use Burn and Dodge tool to darken corners and highlight middle part. After you're done, apply some Gaussian blur (I used 8 pixels). Lower layers Opacity if you need.

Tutorial-9-post-thumbnails

10. For final touches, I added some blurry vivid colors, warm photo filter and black and white Gradient map with low opacity.

Preview-post-thumbnails

Summary

Well, what can I say to you? You've seen various layouts, techniques and uses of thumbnails. Now it's time to improve yours.

Learn Photoshop.

There aren't specific tutorials for creating thumbnails much, but if you're blogging about Photoshop, then sometimes it's really worth checking out some of the tutorials. Learn new techniques and explore facilities. That will relief your work immensely.

Ask advice

If you aren't sure about your design, ask for a feedback. You will get objective opinion and will be able to do some work on mistakes.

Analyse

You're probably using Google Analytics or similar service to track your sites stats. So research more and find out how big influence on tour visitors your thumbnails have.

Ways of use

You saw some great ways to use thumbnails. Don't be afraid to be creative. Think where you could use your thumbnails to benefit the best from them.

Comments (0)

Post a Comment