The Top 8 Placeholder Services for Web Designers

* placeholder : 웹페이지에서 화면을 잡아주는 것. 이미지.

1 – PlaceKitten

PlaceKitten

A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code. Just put your image size (width & height) after our URL and you’ll get a placeholder.

Usage

  1. <img src="http://placekitten.com/200/300" /> 
  2.  
  3. <!-- Black and White --> 
  4. <img src="http://placekitten.com/g/200/300" /> 

Follow the placekitten.com url with your desired dimensions. For example, if I needed a 450 x 300 placeholder image, I’d set the source attribute of an image tag to: http://placekitten.com/450/300.


2 – Placehold.it

Placehold

A quick and simple image placeholder service.

Usage

  1. <img src="http://placehold.it/350x150"> 
  2.  
  3. <!-- Set Colors --> 
  4. <img src="http://placehold.it/350x150/292929/e3e3e3"> 
  5.  
  6. <!-- Add Text --> 
  7. <img src="http://placehold.it/350x150&text=Hello World"> 
  8.  
  9. <!-- Set Image Type --> 
  10. <img src="http://placehold.it/350x150.png&text=Hello World"> 
  11. <img src="http://placehold.it/350x150.gif&text=Hello World"> 
  12. <img src="http://placehold.it/350x150.jpg&text=Hello World"> 

Note that, with this service, you set your dimensions more traditionally, rather than separating the widths and heights into segments.

Placehold.it is a bit different in that, rather than using photos for placeholders, it instead uses more traditional solid color images, which might be more appealing to some designers.


3 – SheenHolders

SheenHolders

Add some Sheen to your designs and prototypes with Charlie Sheen placeholder pictures. Simply change the width and height in the URL to get your custom placeholder.

Usage

  1. http://sheenholders.com/421x550  
  2.  
  3. <img src="http://sheenholders.com/421x550" /> 

If you want your web designs to be winning, then you need the Sheen!


4 – FlickHoldr

FlickrHolder

Get placeholders related to the site you are developing, by pulling images from flickr based on tags.

Usage

FlickrHolder is helpful in that, in addition to using Flickr photos as the placeholders, it also allows you to choose a desired tag as the third segment. You can even choose to display photos in black and white.

  1. <img src="http://flickholdr.com/200/300" /> 
  2.  
  3. <!-- Apply one or more tags --> 
  4. <img src="http://flickholdr.com/200/300/sea,sun" alt="" /> 
  5.  
  6. <!-- Need black and white? --> 
  7. <img src="http://flickholdr.com/200/300/sea,sun/bw" alt="" /> 

5 – LoremPixum

Placeholder Images for every case. Webdesign or Print. It’s simple and absolutely free!

Usage

  1. <!-- Default --> 
  2. <img src="http://www.lorempixum.com/400/100" alt="" /> 
  3.  
  4. <!-- Black and White --> 
  5. <img src="http://www.lorempixum.com/g/400/100" alt="" /> 
  6.  
  7. <!-- Tagged --> 
  8. <img src="http://www.lorempixum.com/g/400/100/sports" alt="" /> 

6 – PlaceDog

PlaceDog

Dogs are so superior to felines. Just choose your dimensions in the pathname and share the doggie love on your projects.

Usage

  1. <img src="http://placedog.com/400/300" alt="" /> 
  2.  
  3. <!-- Black and White --> 
  4. <img src="http://placedog.com/g/400/300" alt="" /> 

7 – DummyImage

DummyImage

Usage

DummyImage is particularly nice, when compared to some of its competitors, in that it offers a great deal of flexibility. Let’s take a look at some of the available options.

  1. <!-- If you only pass a width, a square will be generated --> 
  2. <img src="http://dummyimage.com/600" alt="" /> 
  3.  
  4. <!-- Width and Height --> 
  5. <img src="http://dummyimage.com/600x400" alt="" /> 
  6.  
  7. <!-- Apply background and text colors --> 
  8. <img src="http://dummyimage.com/600x400/292929/e3e3e3" alt="" /> 
  9.  
  10. <!-- Set image type --> 
  11. <img src="http://dummyimage.com/600x400.png/292929/e3e3e3" alt="" /> 
  12. <img src="http://dummyimage.com/600x400.gif/292929/e3e3e3" alt="" /> 
  13. <img src="http://dummyimage.com/600x400.jpg/292929/e3e3e3" alt="" /> 
  14.  
  15. <!-- Custom Text --> 
  16. <img src="http://dummyimage.com/800x600&text=Your Mom Goes to College" alt="" /> 
  17.  
  18. or with background and text colors...  
  19.  
  20. <img src="http://dummyimage.com/800x600/292929/e3e3e3&text=Your Mom Goes to College" alt="" /> 

8 – Griddle.it

Griddle.it

A clean and simple way to help align your layouts. No complex grid frameworks necessary.

Certainly, Griddle.it is unique compared to its peers because its focus is on creating grid images, which can then be applied to the background of your web design during production. View a live demo here.

Usage

Applying a background grid requires the following format: http://griddle.it/[total width]-[number of columns]-[gutter size].

  1. /* Generate a 960px grid, with 12 columns and 30px gutter */ 
  2.  
  3. body { 
  4.   background: url(http://griddle.it/960-12-30) repeat-y center top;  
  5. }  



크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/04/13 09:25 2011/04/13 09:25
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6079

Trackback URL : http://tcbs17.cafe24.com/tc/trackback/6079

« Previous : 1 : ... 393 : 394 : 395 : 396 : 397 : 398 : 399 : 400 : 401 : ... 6391 : Next »

블로그 이미지

- 홍반장

Archives

Recent Trackbacks

Calendar

«   2024/03   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
Statistics Graph

Site Stats

Total hits:
175576
Today:
6
Yesterday:
96