mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-28 16:48:00 +02:00
all the remaining post edits
This commit is contained in:
parent
b9ce517ca9
commit
60e35b6aa4
|
|
@ -51,7 +51,7 @@ module.exports = function(grunt){
|
|||
options: {
|
||||
drafts: true,
|
||||
future: true,
|
||||
limit_posts: 50
|
||||
//limit_posts: 50
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
49
_config.yml
49
_config.yml
|
|
@ -1,50 +1,51 @@
|
|||
#
|
||||
# Home: /
|
||||
# About Page: /about/
|
||||
# Archive Page: /archive/
|
||||
# Pagination: /page/N/
|
||||
# Post: /post/post-slug/
|
||||
# RSS Feed: /feed.xml
|
||||
# Home: /
|
||||
# About Page: /about/
|
||||
# Archive Page: /archive/
|
||||
# Pagination: /page/N/
|
||||
# Post: /post/post-slug/
|
||||
# RSS Feed: /feed.xml
|
||||
#
|
||||
|
||||
# Basics
|
||||
# --------------------
|
||||
|
||||
name: kremalicious
|
||||
description: 'Blog of designer & developer Matthias Kretschmann'
|
||||
url: http://kremalicious.com
|
||||
author: Matthias Kretschmann
|
||||
email: m@kretschmann.io
|
||||
name: kremalicious
|
||||
description: 'Blog of designer & developer Matthias Kretschmann'
|
||||
url: http://kremalicious.com
|
||||
author: Matthias Kretschmann
|
||||
email: m@kretschmann.io
|
||||
|
||||
|
||||
# Urls
|
||||
# --------------------
|
||||
|
||||
permalink: /:title
|
||||
relative_permalinks: true
|
||||
paginate: 10
|
||||
paginate_path: "/page/:num"
|
||||
category_dir: "/"
|
||||
category_title_prefix: ""
|
||||
permalink: /:title
|
||||
relative_permalinks: true
|
||||
paginate: 10
|
||||
paginate_path: "/page/:num"
|
||||
category_dir: "/"
|
||||
category_title_prefix: ""
|
||||
|
||||
|
||||
# Content Parsing
|
||||
# --------------------
|
||||
|
||||
markdown: redcarpet
|
||||
pygments: true
|
||||
future: false
|
||||
markdown: redcarpet
|
||||
pygments: true
|
||||
|
||||
redcarpet:
|
||||
extensions: ['autolink', 'smart']
|
||||
extensions: ['autolink', 'smart']
|
||||
|
||||
|
||||
# Generator
|
||||
# --------------------
|
||||
|
||||
source: ./_src
|
||||
destination: ./generated
|
||||
exclude: ['node_modules', 'less', 'app.js']
|
||||
keep_files: ['media', 'gen']
|
||||
source: ./_src
|
||||
destination: ./generated
|
||||
exclude: ['node_modules', 'less', 'app.js']
|
||||
keep_files: ['media', 'gen']
|
||||
|
||||
|
||||
# jekyll-picture-tag
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2005-07-26 11:44:49+00:00
|
||||
layout: post
|
||||
slug: beaucarnea-leafs
|
||||
layout: photo
|
||||
|
||||
title: Beaucarnea leafs
|
||||
image: img_1820-Version-4.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2005-07-26 11:44:49+00:00
|
||||
wordpress_id: 1982
|
||||
categories:
|
||||
- photos
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2005-08-02 11:39:04+00:00
|
||||
layout: post
|
||||
slug: snail-on-a-leaf
|
||||
layout: photo
|
||||
|
||||
title: Snail on a leaf
|
||||
image: schnecke_blatt.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2005-08-02 11:39:04+00:00
|
||||
wordpress_id: 1973
|
||||
categories:
|
||||
- photos
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2006-07-23 11:36:28+00:00
|
||||
layout: post
|
||||
slug: electricity
|
||||
layout: photo
|
||||
|
||||
title: Electricity
|
||||
image: MG_5885_2006-7-23.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2006-07-23 11:36:28+00:00
|
||||
wordpress_id: 1970
|
||||
categories:
|
||||
- photos
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2006-07-23 11:32:14+00:00
|
||||
layout: post
|
||||
slug: floating-sky
|
||||
layout: photo
|
||||
|
||||
title: Floating Sky
|
||||
image: floating-sky-1.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2006-07-23 11:32:14+00:00
|
||||
wordpress_id: 1964
|
||||
categories:
|
||||
- photos
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2006-08-21 11:22:34+00:00
|
||||
layout: post
|
||||
slug: new-berlin-bridge
|
||||
layout: photo
|
||||
|
||||
title: New Berlin Bridge
|
||||
image: berliner_bruecke1-HDR-16bit.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2006-08-21 11:22:34+00:00
|
||||
wordpress_id: 1958
|
||||
categories:
|
||||
- photos
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2006-09-16 11:47:16+00:00
|
||||
layout: post
|
||||
slug: wooden-windmill
|
||||
layout: photo
|
||||
|
||||
title: Wooden Windmill
|
||||
image: muehle_suhlendorf_HDR_Tonemapped_16bit.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2006-09-16 11:47:16+00:00
|
||||
wordpress_id: 1985
|
||||
categories:
|
||||
- photos
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2006-10-22 11:43:00+00:00
|
||||
layout: post
|
||||
slug: german-chancellery
|
||||
layout: photo
|
||||
|
||||
title: German Chancellery
|
||||
image: bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2006-10-22 11:43:00+00:00
|
||||
wordpress_id: 1979
|
||||
categories:
|
||||
- photos
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2007-02-10 12:34:39+00:00
|
||||
layout: post
|
||||
slug: macbook-abstract
|
||||
layout: photo
|
||||
|
||||
title: MacBook abstract
|
||||
image: MG_9313_2007-02-10.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2007-02-10 12:34:39+00:00
|
||||
wordpress_id: 1967
|
||||
categories:
|
||||
- photos
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2007-03-01 20:50:32+00:00
|
||||
layout: post
|
||||
slug: adjustment-tool-guide-for-aperture-152
|
||||
|
||||
title: Adjustment Tool Guide for Aperture 1.5.2
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2007-03-01 20:50:32+00:00
|
||||
wordpress_id: 1562
|
||||
categories:
|
||||
- photography
|
||||
|
|
@ -12,7 +12,7 @@ tags:
|
|||
- aperture
|
||||
---
|
||||
|
||||
The Adjustment Tool Guide gives an in-depth-view of the Adjustment tool in Aperture. The documentary provided by Apple isn't that what most people were looking for. But Kendall Gelner wrote his own Adjustment Tools Guide originally for the Aperture Version 1.0.1.
|
||||
The Adjustment Tool Guide gives an in-depth-view of the Adjustment tool in Aperture. The documentary provided by Apple isn't that what most people were looking for. But Kendall Gelner wrote his own Adjustment Tools Guide originally for the Aperture Version 1.0.1.
|
||||
|
||||
Now he has updated his excellent Guide to fit with the current Aperture Version 1.5.2. His new guide now has a cool visual walkthrough of the Edge Sharpen Tool introduced in Aperture 1.5. The Adjustment Tool Guide can be downloaded as a free download from Kendall's Aperture-Website (which was named Inside Aperture long before the well-known blog from o'reilly started):
|
||||
[http://insideaperture.com/Site/AdjustmentToolGuide.html](http://insideaperture.com/Site/AdjustmentToolGuide.html)
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ So I called the Canon Support two months ago but they could only say sorry and a
|
|||
|
||||
|
||||
|
||||
## The solution...
|
||||
# The solution...
|
||||
|
||||
|
||||
[Canon Asia](http://www.canon-asia.com/) (Canon South & Southeast-Asia to be precise) was the solution! They really offer a universal-driver for the CanoScan LiDE 500f on their site which is from June 2007! You have to follow this link and choose your desired device:
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-02-26 23:24:17+00:00
|
||||
layout: post
|
||||
slug: how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites
|
||||
|
||||
title: How to quickly generate encrypted .htpasswd passwords
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-02-26 23:24:17+00:00
|
||||
wordpress_id: 12
|
||||
categories:
|
||||
- design
|
||||
|
|
@ -12,22 +12,19 @@ tags:
|
|||
- tutorial
|
||||
---
|
||||
|
||||
As you may know you can easily password protect your website or parts of it using an htaccess file with special instructions on an [Apache](http://www.apache.org/)-based server. For using this method you just have to put a file named .htaccess (which includes the instructions for the webserver) and a file named .htpasswd (which includes the login-accounts) in the directory you want to have password protected. But you have to encrypt the passwords of the login data for yourself, which is a quick task on a Mac.
|
||||
As you may know you can easily password protect your website or parts of it using an htaccess file with special instructions on an [Apache](http://www.apache.org/)-based server. For using this method you just have to put a file named .htaccess (which includes the instructions for the webserver) and a file named `.htpasswd` (which includes the login-accounts) in the directory you want to have password protected. But you have to encrypt the passwords of the login data for yourself, which is a quick task on a Mac.
|
||||
|
||||
<!-- more -->
|
||||
I won't go into detail what exactly is needed in your `.htaccess`, since it often depends on your hosting provider which instructions are allowed. If you are new to all this stuff and want to password protect your website or parts of it, have a look in the part ["Password Protection"](http://www.javascriptkit.com/howto/htaccess3.shtml) of the [Comprehensive guide to .htaccess written by Feyd](http://www.javascriptkit.com/howto/htaccess.shtml).
|
||||
|
||||
I won't go into detail what exactly is needed in your .htaccess-file, since it often depends on your hosting provider which instructions are allowed. If you are new to all this stuff and want to password protect your website or parts of it, have a look in the part ["Password Protection"](http://www.javascriptkit.com/howto/htaccess3.shtml) of the [Comprehensive guide to .htaccess written by Feyd](http://www.javascriptkit.com/howto/htaccess.shtml).
|
||||
|
||||
The login data, in detail just the password is stored encrypted in the .htpasswd-file but you have to encrypt it before writing it in this file. On a Mac you can benefit from the underlying [Unix](http://www.apple.com/macosx/technology/unix.html)-technology for quickly generating your login accounts using the commandline utility htpasswd.
|
||||
The login data, in detail just the password is stored encrypted in the .htpasswd-file but you have to encrypt it before writing it in this file. On a Mac you can benefit from the underlying [Unix](http://www.apple.com/macosx/technology/unix.html)-technology for quickly generating your login accounts using the commandline utility `htpasswd`.
|
||||
|
||||
Just open Terminal application and type in the following code and replace username and password with your desired data:
|
||||
|
||||
|
||||
|
||||
<code>htpasswd -nb username password</code>
|
||||
```bash
|
||||
htpasswd -nb username password
|
||||
```
|
||||
|
||||
|
||||
|
||||
and press enter. Terminal should output a new line containing your login data with an encrypted password. Just paste it in your .htpasswd-file and you're done.
|
||||
and press enter. Terminal should output a new line containing your login data with an encrypted password. Just paste it in your `.htpasswd`-file and you're done.
|
||||
|
||||
It's that easy.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-03-30 19:24:21+00:00
|
||||
layout: post
|
||||
slug: launch-of-kremaliciouscom
|
||||
|
||||
title: Launch of kremalicious.com
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-03-30 19:24:21+00:00
|
||||
wordpress_id: 14
|
||||
categories:
|
||||
- personal
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-03-31 20:54:45+00:00
|
||||
layout: post
|
||||
slug: love-the-parallax
|
||||
|
||||
title: Love the parallax
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-03-31 20:54:45+00:00
|
||||
wordpress_id: 15
|
||||
categories:
|
||||
- design
|
||||
|
|
@ -14,6 +14,6 @@ categories:
|
|||
|
||||
I implemented the header effect of those flying black polaroids on kremalicious.com following the original idea by the folks of [clearleft](http://clearleft.com/) on [their silverback teaser page](http://www.silverbackapp.com/)
|
||||
|
||||
This effect draw much attention in the webdesign community and meanwhile there are some great articles about this effect. Over at thinkvitamin is a detailed explanation of the effect. [Paul Annett from clearleft gives an in-depth-view how they created the parallax effect on their silverback teaser page.](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/trackback/)
|
||||
This effect drew much attention in the webdesign community and meanwhile there are some great articles about this effect. Over at thinkvitamin is a detailed explanation of the effect. [Paul Annett from clearleft gives an in-depth-view how they created the parallax effect on their silverback teaser page.](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/trackback/)
|
||||
|
||||
A more common explanation [gives Chris Coyier over at css-tricks.com.](http://css-tricks.com/3d-parralax-background-effect/trackback) He uses three star layers to make a cool space-effect.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-04 18:43:05+00:00
|
||||
layout: post
|
||||
slug: 6-web-design-tips-from-leonardo-da-vinci
|
||||
layout: link
|
||||
|
||||
title: 6 Web Design Tips from Leonardo da Vinci
|
||||
linkurl: http://designpepper.com/blog/6-web-design-tips-from-leonardo-da-vinci
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-04 18:43:05+00:00
|
||||
wordpress_id: 24
|
||||
categories:
|
||||
- design
|
||||
|
|
@ -14,12 +15,4 @@ post_format:
|
|||
|
||||
An awesome creative idea for a blog post about Web-Design from Joshua Clanton:
|
||||
|
||||
|
||||
|
||||
> Leonardo Da Vinci was one of the greatest artists of the Renaissance, leaving behind a legacy that continues to inspire artists, scientists and others. Here are six things we can learn from him about web design.
|
||||
|
||||
|
||||
|
||||
He also made two other articles in this creative style:
|
||||
[5 Web Design Tips from Michelangelo](http://joshuaclanton.com/blog/2008/02/11/5-web-design-tips-from-michelangelo/trackback/)
|
||||
[What Medieval Philosophers can teach us about Web Design](http://joshuaclanton.com/blog/2007/12/06/what-medieval-philosophers-can-teach-us-about-web-design/trackback/)
|
||||
|
|
|
|||
|
|
@ -21,6 +21,6 @@ These icons are free for your personal use and include icons for all file types
|
|||
|
||||
Get them from [the goodies-page](http://www.kremalicious.com/goodies/) and have fun.
|
||||
|
||||
<a class="btn btn-block icon-download-alt" href="/media/aperturefiletypes_by_kremalicious.zip">Download</a>
|
||||
<a class="btn btn-block icon-download" href="/media/aperturefiletypes_by_kremalicious.zip">Download</a>
|
||||
|
||||
And don't forget to read my article about [how to change the generic image icons in Mac OS X Leopard](http://www.kremalicious.com/2008/04/changing-the-image-icons-in-mac-os-x-leopard/).
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-04 19:01:09+00:00
|
||||
layout: post
|
||||
slug: london-police-afraid-of-photographers
|
||||
|
||||
title: London police afraid of photographers
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-04 19:01:09+00:00
|
||||
wordpress_id: 25
|
||||
categories:
|
||||
- photography
|
||||
|
|
@ -12,8 +12,6 @@ categories:
|
|||
|
||||
> Thousands of people take photos every day. What if one of them seems odd? Terrorists use surveillance to help plan attacks, taking photos and making notes about security measures like the location of CCTV cameras. If you see someone doing that, we need to know. Let experienced officers decide what action to take.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
yeah, i'm guilty. i took several photos of cctv cameras:
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-04 10:47:23+00:00
|
||||
layout: post
|
||||
slug: mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine
|
||||
layout: link
|
||||
|
||||
title: 'Mac OS X Leopard: Designer’s Guide to Icons'
|
||||
linkurl: http://www.smashingmagazine.com/2008/04/04/mac-os-x-leopard-designers-guide-to-icons
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-04 10:47:23+00:00
|
||||
wordpress_id: 22
|
||||
categories:
|
||||
- design
|
||||
|
|
@ -12,12 +13,8 @@ post_format:
|
|||
- Link
|
||||
---
|
||||
|
||||
Nice article on Smashing Magazine by Kate England. It's the Human Interface Guidelines for icons in a nutshell: [Mac OS X Leopard: Designer’s Guide to Icons](http://www.smashingmagazine.com/2008/04/04/mac-os-x-leopard-designers-guide-to-icons/trackback):
|
||||
|
||||
|
||||
Nice article on Smashing Magazine by Kate England. It's the Human Interface Guidelines for icons in a nutshell: [Mac OS X Leopard: Designer’s Guide to Icons](http://www.smashingmagazine.com/2008/04/04/mac-os-x-leopard-designers-guide-to-icons):
|
||||
|
||||
> To get really beautiful icons, Apple recommends that you let a professional designer create your icons. Despite all the eye candy and realism that is possible to apply to icons, less is more. Strive for a simple solution using one easily recognisable object. The basic shape or silhouette of your icon can help users to quickly identify it. If you aim for an international market, your symbols need to also be internationally recognizable providing Worldwide Compatibility.
|
||||
|
||||
|
||||
|
||||
For reference you [can browse the Human Interface Guidelines (HIG) from Apple online](http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGIntro/chapter_1_section_1.html) or [download it as a big pdf-file](http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/OSXHIGuidelines.pdf).
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-05 14:01:51+00:00
|
||||
layout: post
|
||||
slug: first-principles-for-choosing-type
|
||||
layout: link
|
||||
|
||||
title: First principles for choosing the right typeface
|
||||
linkurl: http://ilovetypography.com/2008/04/04/on-choosing-type
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-05 14:01:51+00:00
|
||||
wordpress_id: 26
|
||||
categories:
|
||||
- design
|
||||
|
|
@ -16,6 +17,4 @@ Nice article over at [i love typography](http://ilovetypography.com) about what
|
|||
|
||||
[On choosing type - First principles](http://ilovetypography.com/2008/04/04/on-choosing-type/trackback/):
|
||||
|
||||
|
||||
|
||||
> Before we get to the nitty-gritty of choosing type, let’s briefly talk about responsibility. Fundamentally, the responsibility we bear is two-fold: first we owe it to the reader not to hinder their reading pleasure, but to aid it; second, we owe a responsibility to the typeface or typefaces we employ. Good typefaces are designed for a good purpose, but not even the very best types are suited to every situation. Personally, I’m always a little nervous about using a newly acquired typeface. A new typeface is something like a newborn baby (though it doesn’t throw-up on you): don’t drop it, squeeze it too hard, hold it upside-down; in other words, don’t abuse it, treat it respectfully, carefully.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-06 21:21:22+00:00
|
||||
layout: post
|
||||
slug: 9-lesser-known-safari-features-worth-switching-for
|
||||
layout: link
|
||||
|
||||
title: 9 Lesser Known Safari Features
|
||||
linkurl: http://www.danielmiessler.com/blog/9-lesser-known-safari-features-worth-switching-for
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-06 21:21:22+00:00
|
||||
wordpress_id: 29
|
||||
categories:
|
||||
- design
|
||||
|
|
@ -12,6 +13,7 @@ post_format:
|
|||
- Link
|
||||
---
|
||||
|
||||
> Inline Dictionary:
|
||||
Safari, being a Cocoa app (OS X), allows us to instantly define words we find. Simply highlight the word and hit the ctrl-cmd-d shortcut. So if I highlight the word ‘functionality’ in Safari and hit the shortcut, here’s what I get.
|
||||
Cool stuff, like the Inline Dictionary:
|
||||
|
||||
> Safari, being a Cocoa app (OS X), allows us to instantly define words we find. Simply highlight the word and hit the ctrl-cmd-d shortcut. So if I highlight the word ‘functionality’ in Safari and hit the shortcut, here’s what I get.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-08 15:48:14+00:00
|
||||
layout: post
|
||||
slug: pulitzer-price-winners-2008-announced-various-photographers-awarded
|
||||
|
||||
title: Pulitzer Price Winners 2008 announced, various photographers awarded
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-08 15:48:14+00:00
|
||||
wordpress_id: 31
|
||||
categories:
|
||||
- photography
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-09 13:13:42+00:00
|
||||
layout: post
|
||||
slug: changing-the-image-icons-in-mac-os-x-leopard
|
||||
|
||||
title: 'HowTo: Changing the image icons in Mac OS X Leopard'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-09 13:13:42+00:00
|
||||
wordpress_id: 32
|
||||
categories:
|
||||
- design
|
||||
|
|
@ -12,18 +12,11 @@ tags:
|
|||
- tutorial
|
||||
---
|
||||
|
||||
[](/media/aperturefiletypes.png)After i released my [Aperture File Types icon set](http://www.kremalicious.com/goodies) many of you asked how they can really use these icons for displaying the icons of images on your Mac system. Sadly this isn't as easy as dropping them in [Candybar](http://www.panic.com/candybar) into a well for image icons cause there isn't any well for them. So using other icons as standard file type icons for images is a bit tricky. I discovered two ways of doing it, which involves overwriting resources of Preview.app and Photoshop. So before doing anything I mention in this post, you should make a backup copy of them.<!-- more -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/aperturefiletypes.png)After i released my [Aperture File Types icon set](http://www.kremalicious.com/goodies) many of you asked how they can really use these icons for displaying the icons of images on your Mac system. Sadly this isn't as easy as dropping them in [Candybar](http://www.panic.com/candybar) into a well for image icons cause there isn't any well for them. So using other icons as standard file type icons for images is a bit tricky. I discovered two ways of doing it, which involves overwriting resources of Preview.app and Photoshop. So before doing anything I mention in this post, you should make a backup copy of them.
|
||||
|
||||
|
||||
## Changing Preview.app icons
|
||||
|
||||
|
||||
|
||||
[](/media/openwithpreview.png)Image icons in Mac OS X doesn't really belong to the system icons. Instead they come from [Preview.app](http://www.apple.com/macosx/features/300.html%23preview) which is the factory default application for viewing images on Mac OS X.
|
||||
|
||||
And since Preview.app is used to show the icons we can find all file type icons for images in Preview.app > Contents > Resources. You get there by right clicking on Preview in your Applications folder and choosing Show Package Contents from the context menu. There you'll find icons in icns-format for bmp, dng, eps, fax, fpx, gif, icns, ico,jp2, jpeg, openexr, pdf, pict, png, pntg, ps, psd, qtif, radiance, raw, sgi, tga, tiff, xbm.
|
||||
|
|
@ -38,12 +31,8 @@ But, as you can see, Preview doesn’t have an unique icon for all RAW file type
|
|||
|
||||
The problem is that from now on every RAW-file is represented by this icon, which is ok if you just use one RAW-format. But it's a problem if you use more than one RAW format.
|
||||
|
||||
|
||||
|
||||
## Changing the file type icons of Photoshop
|
||||
|
||||
|
||||
|
||||
[](/media/PS_CR2FileIcon.png)A solution to this mess is Photoshop. So this solution just works if you have Photoshop installed. Photoshop does have a unique icon for every RAW-format out there. To confirm that you can choose Adobe Photoshop as Standard Application in the Get Info window and the icon of the file should change instantly.
|
||||
|
||||
So here's the trick: The icons from Photoshop are stored in Adobe Photoshop CS3.app > Contents > Resources. the icon e.g. for .cr2-icons is named PS_CR2FileIcon.icns. Just rename the icons in my pack in the naming scheme used in the Photoshop Resources and replace them.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-09 17:44:23+00:00
|
||||
layout: post
|
||||
slug: measuring-the-color-of-light
|
||||
layout: link
|
||||
|
||||
title: Measuring the Color of Light
|
||||
linkurl: http://duncandavidson.com/2008/04/kelvins-and-the-color-of-light.html
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-09 17:44:23+00:00
|
||||
wordpress_id: 33
|
||||
categories:
|
||||
- photography
|
||||
|
|
@ -14,17 +15,9 @@ post_format:
|
|||
|
||||
Ever wondered what the heck 6500 Kelvin has to do with your photos? Here's an in-depth article from the blog of [James Duncan Davidson](http://duncandavidson.com/blog/) for better understanding of the whole color and white balance thing in photography.
|
||||
|
||||
|
||||
|
||||
[Measuring the Color of Light by James Duncan Davidson](http://duncandavidson.com/2008/04/kelvins-and-the-color-of-light.html):
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
> Like all settings, the color of light has a unit associated with it. The unit, however, isn't unique to specifying the color of light. Instead, it's the same SI unit that is used for temperature: the Kelvin. I know that the first few times I delved into this subject matter, I thought it was a strange unit to use, mostly because light itself doesn't have a temperature. Since it's radiation, when it hits a surface it can cause that surface to heat up. But the light itself is neither hot nor cold. So, why the heck is a unit of temperature used to describe the color of it? ...
|
||||
|
||||
|
||||
|
||||
And another in-depth article from James which is a follow up of the above article:
|
||||
[Color Temperature and White Balance](http://duncandavidson.com/2008/04/color-temperature-and-sensors.html)
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-10 13:16:47+00:00
|
||||
layout: post
|
||||
slug: the-story-behind-the-pulitzer-picture
|
||||
layout: link
|
||||
|
||||
title: The story behind the Pulitzer picture
|
||||
linkurl: http://blogs.reuters.com/photographers-blog/2008/04/07/the-story-behind-the-pictures/
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-10 13:16:47+00:00
|
||||
wordpress_id: 34
|
||||
categories:
|
||||
- photography
|
||||
|
|
@ -14,11 +15,7 @@ post_format:
|
|||
|
||||
Two days ago [I posted links to the winning photographers of the Pulitzer Price 2008](http://www.kremalicious.com/2008/04/pulitzer-price-winners-2008-announced-various-photographers-awarded/). Now Adrees Latif, who won in the category Breaking News Photography for his picture of the japanese videographer Kenji Nagai shot down during riots in Myanmar in 2007, [reveales the story behind the picture in the Reuters Blog](http://blogs.reuters.com/photo/2008/04/07/the-story-behind-the-pictures/):
|
||||
|
||||
|
||||
|
||||
> Within minutes, the crowd swelled from hundreds to a few thousand. The soldiers threw barbed wire coils across the roads.
|
||||
Knowing that hundreds of people were gunned down in similar circumstances in a 1988 uprising, I climbed an old crosswalk directly overhead, to get to one of the few spots offering a clear view...
|
||||
|
||||
|
||||
|
||||
[Read the whole story on the Reuters Blog](http://blogs.reuters.com/photo/2008/04/07/the-story-behind-the-pictures/)
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-11 14:16:51+00:00
|
||||
layout: post
|
||||
slug: photographers-strike-back-in-uk
|
||||
layout: link
|
||||
|
||||
title: Photographers strike back in UK
|
||||
linkurl: http://www.pressgazette.co.uk/node/40875
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-11 14:16:51+00:00
|
||||
wordpress_id: 36
|
||||
categories:
|
||||
- photography
|
||||
|
|
@ -14,19 +15,9 @@ post_format:
|
|||
|
||||
[](/media/londonpolice.jpg)Remember [the campaign of the London police](http://www.kremalicious.com/2008/04/london-police-afraid-of-photographers/) calling all people to regard photographers as potential terrorists?
|
||||
|
||||
Now the [PressGazette reports](http://www.pressgazette.co.uk/story.asp?sectioncode=1&storycode=40875&c=1) that
|
||||
Now the [PressGazette reports](http://www.pressgazette.co.uk/node/40875) that
|
||||
|
||||
|
||||
|
||||
>
|
||||
|
||||
>
|
||||
> Labour MP [Member of Parliament] Austin Mitchell is planning to take a delegation of photographers to the Home Office to protest about the growing number of cases in which police officers and others try to stop professional and amateur photographers taking pictures in public places.
|
||||
>
|
||||
>
|
||||
|
||||
|
||||
|
||||
|
||||
You can read the whole story here:
|
||||
[Photographers lobby parliament over police curbs](http://www.pressgazette.co.uk/story.asp?sectioncode=1&storycode=40875&c=1)
|
||||
[Photographers lobby parliament over police curbs](http://www.pressgazette.co.uk/node/40875)
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-14 13:51:39+00:00
|
||||
layout: post
|
||||
slug: new-automation-helper-for-apples-aperture-released
|
||||
|
||||
title: New automation helper for Apple's Aperture released
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-14 13:51:39+00:00
|
||||
wordpress_id: 37
|
||||
categories:
|
||||
- photography
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-15 17:36:34+00:00
|
||||
layout: post
|
||||
slug: webkit-team-introduced-css-based-gradients
|
||||
|
||||
title: WebKit team introduces CSS-based gradients
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-15 17:36:34+00:00
|
||||
wordpress_id: 38
|
||||
categories:
|
||||
- design
|
||||
|
|
@ -12,34 +12,17 @@ categories:
|
|||
|
||||
Writing right now on a longer article about text-shadow and it's implementation in WebKit, the rendering engine which powers Safari and Konqueror. But now this exciting news popped up from Surfin' Safari, the blog of the WebKit development team:
|
||||
|
||||
|
||||
|
||||
> WebKit now supports gradients specified in CSS. There are two types of gradients: linear gradients and radial gradients.
|
||||
|
||||
|
||||
|
||||
Take a look at [the entry on Surfin' Safari to learn how those css-based gradients work and how they can be coded](http://webkit.org/blog/175/introducing-css-gradients/):
|
||||
|
||||
|
||||
|
||||
> So what exactly is a gradient in CSS? It is an image, usable anywhere that image URLs were used before. That’s right… anywhere.
|
||||
>
|
||||
>
|
||||
|
||||
|
||||
>
|
||||
> You can use gradients in the following places:
|
||||
>
|
||||
>
|
||||
|
||||
|
||||
>
|
||||
> background-image
|
||||
border-image
|
||||
list-style-image
|
||||
content property
|
||||
|
||||
|
||||
> border-image
|
||||
> list-style-image
|
||||
> content property
|
||||
|
||||
Although the WebKit team is saying it is supported "now" [a commenter on Surfin' Safari states](http://webkit.org/blog/175/introducing-css-gradients/#comment-24343) that it seems the whole function isn't included in the latest nightly builds of WebKit.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-17 01:32:13+00:00
|
||||
layout: post
|
||||
slug: make-cool-and-clever-text-effects-with-css-text-shadow
|
||||
|
||||
title: 'Text-Shadow Exposed: Make cool and clever text effects with css text-shadow'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-17 01:32:13+00:00
|
||||
wordpress_id: 39
|
||||
categories:
|
||||
- design
|
||||
|
|
@ -12,11 +12,7 @@ tags:
|
|||
- tutorial
|
||||
---
|
||||
|
||||
|
||||
|
||||
The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it's not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image.
|
||||
|
||||
|
||||
The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it's not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image.
|
||||
|
||||
Because it's included in Safari since version 1.1(!) Mac users should be aware of various effects done by this property. In fact, most companys and persons with mac users as their main target audience use this effect on their websites.
|
||||
|
||||
|
|
@ -25,51 +21,24 @@ This article describes how text-shadow works, what you can do with it and which
|
|||
<!-- more -->
|
||||
|
||||
Here's an overview of the headlines in this article. As you can see it's rather complex and long. Be sure to get a delicious fresh cup of coffee or tea before reading on:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
1. What text-shadow is good for
|
||||
|
||||
|
||||
2. Which browsers support it
|
||||
|
||||
|
||||
3. Cross-browser compatibility
|
||||
|
||||
|
||||
4. How does it work and how to use it
|
||||
|
||||
|
||||
5. Examples with code & demos
|
||||
|
||||
|
||||
6. Hack: Safari Text Rendering
|
||||
|
||||
|
||||
6. Hack: Safari Text Rendering
|
||||
7. More articles and resources
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 1. What text-shadow is good for
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
subtle glow in my navigation
|
||||
|
||||
The main goal of this property is to give designers and css coders a tool to make text effects, which could only be done before by rendering text as images with all the side effects. Text rendered as an image isn't searchable and therefore very undelicious for search engines. Another side effect is the fact that images can be way more bigger as one small line of code in terms of file size. As you may know most css-files, which contain the whole layout of a website, are smaller than one image on most websites. So it's really clever to use a css function instead of images for reducing unnecessary traffic.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
text-shadow on Apple.com
|
||||
|
||||
Utilizing text-shadow to simulate engraved or stenciled text is widely used on websites. Apple did it everywhere in Mac OS X not just since Leopard (just look at the titlebars). So if you design a website for Mac users you can increase the sexyness of your website, because this particular usage of text-shadow integrates very well with the overall look of Mac OS X. I will explain how to achieve this engraved-text-on-metal effect later on in this article.
|
||||
|
|
@ -77,172 +46,12 @@ Utilizing text-shadow to simulate engraved or stenciled text is widely used on w
|
|||
|
||||
|
||||
## 2. Which browsers support it?
|
||||
|
||||
|
||||
|
||||
 
|
||||
 In fact, text-shadow is not a new property since it was first defined with [CSS2 in 1998](http://www.w3.org/TR/REC-CSS2/text.html#text-shadow-props) but it was just implemented by the KHTML/WebKit-folks. But it's available in [Safari](http://www.apple.com/safari/) since version 1.1 (2003), in [Konqueror](http://www.konqueror.org/features/browser.php) since version 3.4 (I believe, not sure) and [Opera](http://www.opera.com/) 9.5. Furthermore it's also supported by [Firefox](http://www.mozilla.com/en-US/firefox/firefox.html) 3.1/3.5 and finally [Google Chrome](http://www.google.com/chrome) 2 adds full support for the text-shadow property after they had stripped this from the first version of Chrome.
|
||||
In fact, text-shadow is not a new property since it was first defined with [CSS2 in 1998](http://www.w3.org/TR/REC-CSS2/text.html#text-shadow-props) but it was just implemented by the KHTML/WebKit-folks. But it's available in [Safari](http://www.apple.com/safari/) since version 1.1 (2003), in [Konqueror](http://www.konqueror.org/features/browser.php) since version 3.4 (I believe, not sure) and [Opera](http://www.opera.com/) 9.5. Furthermore it's also supported by [Firefox](http://www.mozilla.com/en-US/firefox/firefox.html) 3.1/3.5 and finally [Google Chrome](http://www.google.com/chrome) 2 adds full support for the text-shadow property after they had stripped this from the first version of Chrome.
|
||||
|
||||
On the Mac platform WebKit is also used in various other programs with a browser included like [Coda](http://www.panic.com/coda/) from Panic, [CSSedit](http://www.macrabbit.com/cssedit/) from MacRabbit or [NetNewsWire](http://www.newsgator.com/NetNewsWire.aspx) from NewsGator. Also every browser which is powered by the WebKit engine is able to render the text-shadow property, like [Shiira](http://shiira.jp/en.php), [OmniWeb](http://www.omnigroup.com/applications/omniweb/) or [Epiphany](http://www.gnome.org/projects/epiphany/) which are either for Mac or Linux.
|
||||
|
||||
But with Safari 3.1, the beta release of Opera 9.5, Firefox 3.1 and Google Chrome 2 the text-shadow property is finally finding it's way to the Windows desktop after 10 years of it's birth and Opera is the first non-WebKit browser which supports text-shadow.
|
||||
|
||||
Here's a list of some browsers and their compatibilty for the text-shadow property to give you an overview:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Safari 3.1 (Mac/Win)
|
||||
|
||||
|
||||
yes, but no multiple shadows
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Safari 4 (Mac/Win)
|
||||
|
||||
|
||||
yes, full support
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Opera 9.5 (Mac/Win/Lin)
|
||||
|
||||
|
||||
yes, full support
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Firefox 2/3 (Mac/Win/Lin)
|
||||
|
||||
|
||||
no
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Firefox 3.1/3.5 (Mac/Win/Lin)
|
||||
|
||||
|
||||
yes, full support
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Google Chrome 1 (Win)
|
||||
|
||||
|
||||
no
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Google Chrome 2 (Win)
|
||||
|
||||
|
||||
yes, full support
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
IE 7/8 (Win)
|
||||
|
||||
|
||||
no
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Shiira (Mac)
|
||||
|
||||
|
||||
yes, but no multiple shadows
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Konqueror (Lin/Mac/Win)
|
||||
|
||||
|
||||
yes, full support
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
iCab (Mac)
|
||||
|
||||
|
||||
yes, but no multiple shadows
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Epiphany (Lin)
|
||||
|
||||
|
||||
yes, since April 2008
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Safari on iPhone
|
||||
|
||||
|
||||
yes, but no multiple shadows
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Nokia Symbian-Smartphones (Series 60)
|
||||
|
||||
|
||||
yes
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Opera Mini 4.1
|
||||
|
||||
|
||||
yes, no blur radius
|
||||
|
||||
|
||||
|
||||
|
||||
But wait, regarding Safari on Mac OS X there's one more (bad) thing to remember. The Mac OS X 10.5.2 update [resulted in minor changes of the WebKit text-shadow rendering](http://www.islayer.com/blog/?p=255). It seems that with this update text-shadow is finally rendered correctly as WebKit added one extra pixel to the shadow offset on 10.4.11 and 10.5.1.
|
||||
|
||||
|
||||
|
|
@ -250,7 +59,6 @@ But wait, regarding Safari on Mac OS X there's one more (bad) thing to remember.
|
|||
## 3. Any chance of cross-browser compatibility?
|
||||
|
||||
|
||||
|
||||
So the major browser Internet Explorer doesn't support it yet but just don't count on Internet Explorer. I guess they are happy with [coding their own non-standard version of CSS for IE9](http://blogs.msdn.com/ie/archive/2008/04/01/announcing-css-2012.aspx) and making shadows with those [DXImageTransform.Microsoft.Shadow-stuff](http://msdn2.microsoft.com/en-us/library/ms532985(VS.85).aspx) which in the end just [looks horrible](http://kilianvalkhof.com/2008/design/almost-cross-browser-text-shadow/). So even IE 9 won't have it included.
|
||||
|
||||
But with Firefox 3.1 including text-shadow all major browsers except Internet Explorer are now supporting it. So you can start using it all around your next projects just with a lot of other techniques which in the end aren't available in Internet Explorer.
|
||||
|
|
@ -267,7 +75,9 @@ Now that you're aware of it's compatibility with the various browsers we can tak
|
|||
|
||||
When defined in a css-stylesheet the property syntax should look like this:
|
||||
|
||||
[css]p { text-shadow: 1px 1px 1px #000; }[/css]
|
||||
```css
|
||||
p { text-shadow: 1px 1px 1px #000; }
|
||||
```
|
||||
|
||||
The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:
|
||||
|
||||
|
|
@ -282,17 +92,14 @@ The third value, the blur radius, is an optional value which can be specified bu
|
|||
|
||||
Alternatiely, for WebKit-based browsers, you can use rgba values instead of hex code colors as the fourth value. The last number stands for transparency and can be set between 0.0 and 1.0 so you can make the text-shadow more subtle:
|
||||
|
||||
[css]p { text-shadow: 1px 1px 1px rgba(255,255,255, .5); }[/css]
|
||||
```css
|
||||
p { text-shadow: 1px 1px 1px rgba(255,255,255, .5); }
|
||||
```
|
||||
|
||||
Of course the effects done by this property often depend on the colors of your text and your background, so let's take a look at what we can do with all those combinations.
|
||||
|
||||
|
||||
|
||||
|
||||
## 5. Examples with code & demos
|
||||
|
||||
|
||||
|
||||
I've made up some examples to show you the possibilities of this css property. Every example code follows a text example which is rendered by your browser. Below that you'll find a screenshot of the described effect rendered in Safari 3.1 on Mac OS X 10.5.2 so the n<del>on-WebKit and non-Opera</del> Internet Explorer users can see the effect.
|
||||
|
||||
|
||||
|
|
@ -302,198 +109,206 @@ I've made up some examples to show you the possibilities of this css property. E
|
|||
|
||||
|
||||
With the following lines of css code you get black text on white background with a smooth black drop shadow.The shadow is placed 2 pixels right and 2 pixels below the text and has a blur radius of 3:
|
||||
[css]color: #000;
|
||||
|
||||
```css
|
||||
color: #000;
|
||||
background: #fff;
|
||||
text-shadow: 2px 2px 3px #000;[/css]
|
||||
|
||||
|
||||
|
||||
I'm a text with a smooth shadow
|
||||
text-shadow: 2px 2px 3px #000;
|
||||
```
|
||||
|
||||
<p style="color: #000;background: #fff;text-shadow: 2px 2px 3px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm a text with a smooth shadow</p>
|
||||
|
||||
|
||||
|
||||
Or you can make it not so smooth but also good looking by ignoring the blur radius and setting a lighter color for the shadow:
|
||||
[css]color: #000;
|
||||
|
||||
```css
|
||||
color: #000;
|
||||
background: #fff;
|
||||
text-shadow: 2px 2px #000;[/css]
|
||||
|
||||
|
||||
I'm a text with no smooth shadow
|
||||
text-shadow: 2px 2px #000;
|
||||
```
|
||||
|
||||
<p style="color: #000;background: #fff;text-shadow: 2px 2px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm a text with no smooth shadow</p>
|
||||
|
||||
|
||||
|
||||
Using some negative values you can make the shadow look like it's lightsource is placed below the text:
|
||||
[css]color: #000;
|
||||
|
||||
```css
|
||||
color: #000;
|
||||
background: #fff;
|
||||
text-shadow: 2px -2px 3px #000;[/css]
|
||||
|
||||
|
||||
I'm a text with a smooth shadow
|
||||
text-shadow: 2px -2px 3px #000;
|
||||
```
|
||||
|
||||
<p style="color: #000;
|
||||
background: #fff;
|
||||
text-shadow: 2px -2px 3px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm a text with a smooth shadow</p>
|
||||
|
||||
|
||||
|
||||
|
||||
Of course you can make it more funky and horrible to read:
|
||||
[css]color: #33cc33;
|
||||
|
||||
```css
|
||||
color: #33cc33;
|
||||
background: #fff;
|
||||
text-shadow: 2px 2px 2px #ff3300;[/css]
|
||||
|
||||
|
||||
I'm funky colored text
|
||||
text-shadow: 2px 2px 2px #ff3300;
|
||||
```
|
||||
|
||||
<p style="color: #33cc33;
|
||||
background: #fff;
|
||||
text-shadow: 2px 2px 2px #ff3300;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm funky colored text</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5.2 Apple style (engraved text on metal)
|
||||
|
||||
|
||||
|
||||
With those lines you get this engraved-text-on-metal effect often used by Apple. You should use a grey background and a very dark text color for this. It's nothing more than a white or light grey shadow which is placed 1px below the text. You can use a blur of 1 to make it look more round. I've used bold text to make the effect more visible:
|
||||
[css]color: #000;
|
||||
|
||||
```css
|
||||
color: #000;
|
||||
background: #666;
|
||||
text-shadow: 0px 1px 1px #fff;[/css]
|
||||
|
||||
|
||||
I'm engraved text
|
||||
text-shadow: 0px 1px 1px #fff;
|
||||
```
|
||||
|
||||
<p style="color: #000;
|
||||
background: #666;
|
||||
text-shadow: 0px 1px 1px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:bold;padding:0.3em">I'm engraved text</p>
|
||||
|
||||
|
||||
|
||||
This even works the other way around on a black background with grey text by adjusting only the color values:
|
||||
[css]color: #666;
|
||||
|
||||
```css
|
||||
color: #666;
|
||||
background: #000;
|
||||
text-shadow: 0px 1px 0px #ccc;[/css]
|
||||
|
||||
|
||||
I'm engraved text on black
|
||||
text-shadow: 0px 1px 0px #ccc;
|
||||
```
|
||||
|
||||
<p style="color: #666;
|
||||
background: #000;
|
||||
text-shadow: 0px 1px 0px #ccc;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:bold;padding:0.3em">I'm engraved text on black</p>
|
||||
|
||||
|
||||
|
||||
Or you can make this one which looks like the text stands out from the background:
|
||||
[css]color: #fff;
|
||||
|
||||
```css
|
||||
color: #fff;
|
||||
background: #666;
|
||||
text-shadow: 0px 1px 1px #000;[/css]
|
||||
|
||||
|
||||
I'm on top of the background
|
||||
text-shadow: 0px 1px 1px #000;
|
||||
```
|
||||
|
||||
<p style="color: #fff;
|
||||
background: #666;
|
||||
text-shadow: 0px 1px 1px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm on top of the background</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5.3 Make your text glow
|
||||
|
||||
|
||||
|
||||
By utilizing the blur radius we can achieve some interesting effects. Here's some subtle glowing white text on a black background:
|
||||
[css]color: #fff;
|
||||
|
||||
```css
|
||||
color: #fff;
|
||||
background: #000;
|
||||
text-shadow: 1px 1px 6px #fff;[/css]
|
||||
|
||||
|
||||
I'm subtle glowing text
|
||||
text-shadow: 1px 1px 6px #fff;
|
||||
```
|
||||
|
||||
<p style="color: #fff;
|
||||
background: #000;
|
||||
text-shadow: 1px 1px 6px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm subtle glowing text</p>
|
||||
|
||||
|
||||
|
||||
You can also make the whole text blurry by using the same color for text and shadow with no offset:
|
||||
[css]color: #fff;
|
||||
|
||||
```css
|
||||
color: #fff;
|
||||
background: #666;
|
||||
text-shadow: 0px 0px 3px #fff;[/css]
|
||||
|
||||
|
||||
I'm also glowing but more blurry
|
||||
text-shadow: 0px 0px 3px #fff;
|
||||
```
|
||||
|
||||
<p style="color: #fff;
|
||||
background: #666;
|
||||
text-shadow: 0px 0px 3px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm also glowing but more blurry</p>
|
||||
|
||||
|
||||
|
||||
We can make it quite mysterious by using the same color for text and background and make the text just visible through text-shadow. Remember that the same color for text and background can be bad for usability...:
|
||||
[css]color: #000;
|
||||
|
||||
```css
|
||||
color: #000;
|
||||
background: #000;
|
||||
text-shadow: 1px 1px 4px #fff;[/css]
|
||||
|
||||
|
||||
I'm pretty mysterious looking text
|
||||
text-shadow: 1px 1px 4px #fff;
|
||||
```
|
||||
|
||||
<p style="color: #000;
|
||||
background: #000;
|
||||
text-shadow: 1px 1px 4px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm pretty mysterious looking text</p>
|
||||
|
||||
|
||||
|
||||
Or the other way around to make it look light and... milky:
|
||||
[css]color: #fff;
|
||||
|
||||
```css
|
||||
color: #fff;
|
||||
background: #fff;
|
||||
text-shadow: 1px 1px 4px#000;[/css]
|
||||
|
||||
|
||||
I'm pretty milky looking text
|
||||
text-shadow: 1px 1px 4px#000;
|
||||
```
|
||||
|
||||
<p style="color: #fff;
|
||||
background: #fff;
|
||||
text-shadow: 1px 1px 4px#000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm pretty milky looking text</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5.4 Dublicate your text
|
||||
|
||||
|
||||
## 5.4 Duplicate your text
|
||||
|
||||
With text-shadow you can make pixel-perfect dublicates of any text. Just add some pixels to your font-size and use it as a value for the vertical description of the shadow offset:
|
||||
[css]color: #000;
|
||||
|
||||
```css
|
||||
color: #000;
|
||||
background: #fff;
|
||||
text-shadow: 0px 20px #000;[/css]
|
||||
|
||||
|
||||
Which line is text, which is shadow?
|
||||
text-shadow: 0px 20px #000;
|
||||
```
|
||||
|
||||
<p style="color: #000;
|
||||
background: #fff;
|
||||
text-shadow: 0px 20px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">Which line is text, which is shadow?</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5.5 Multiple shadows
|
||||
|
||||
|
||||
|
||||
Sadly Safari 3 isn't able to render more than one shadow on one element. It just renders the first property description and will ignore all others. But using multiple shadows looks awesome. So currently the following will only work in Opera 9.5 beta or Konqueror. Just have a look at the screenshot below the example if you're not using these browsers. Due to the lack of support for this in Safari the screenshot below the example is rendered in Opera 9.5 beta on Mac OS X 10.5.2. For no reason Opera 9.5 beta doesn't render the background color:
|
||||
[css]color: #000;
|
||||
|
||||
```css
|
||||
color: #000;
|
||||
background: #000;
|
||||
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;[/css]
|
||||
|
||||
|
||||
Isn't this awesome?
|
||||
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
|
||||
```
|
||||
|
||||
<p style="color: #000;
|
||||
background: #000;
|
||||
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.5em">Isn't this awesome?</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 6. Hack: Avoid jagged light-on-dark text rendering in Safari
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/text-shadow-hack.png)
|
||||
|
||||
sub-pixel rendering (click to zoom)
|
||||
|
||||
|
||||
More than a hack than an effect but it addresses the poor light-on-dark text rendering in Safari. This is caused by the [sub-pixel rendering](http://en.wikipedia.org/wiki/Subpixel_rendering) of OS X's Quartz 2D layer as a part of the Core Graphics framework. Also Safari 3.1 on Windows uses sub pixel rendering instead of plain anti-aliasing.
|
||||
|
||||
[](/media/text-shadow-hack.png)
|
||||
|
||||
anti-alias rendering through text-shadow (click to zoom)
|
||||
|
||||
In most situations this improves the legibility and smoothness of all 2D-text rendered throughout the Mac OS X interface which makes everything look so gorgeous. But it has some [rough problems with light text on dark backgrounds in Safari](http://equinox-of-insanity.com/2007/08/osx-text-rendering/) This problem doesn't exist when using anti-aliasing.
|
||||
|
||||
And since [24ways'](http://24ways.org/2006/knockout-type) and [Cameron's discovery](http://cameron.io/photo/id:1055) we know that Safari renders all text-shadow-styled text with plain anti-aliasing instead of sub-pixels. So we can add a text-shadow with an offset of 0px to the desired text style:
|
||||
|
||||
[css]text-shadow: 0 0 0 #000;[/css]
|
||||
```css
|
||||
text-shadow: 0 0 0 #000;
|
||||
```
|
||||
|
||||
This causes Safari 3 to use anti-aliasing and make your text on dark backgrounds more legible with it.
|
||||
|
||||
|
|
@ -504,92 +319,35 @@ Apparently if your shadow has no blur, then the text will be sub-pixel rendered.
|
|||
But fear not. Rogie King already came up with a solution for this which you can read here:
|
||||
[Safari's text-shadow anti-aliasing CSS hack Revision](http://www.komodomedia.com/blog/2009/03/safari-text-shadow-anti-aliasing-css-hack/)
|
||||
|
||||
|
||||
|
||||
## 7. More articles and resources
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* [Description of the text-shadow property](http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows) in: [CSS3 W3C Candidate Recommendation from 14 May 2003](http://www.w3.org/TR/2003/CR-css3-text-20030514)
|
||||
text-shadow in-depth
|
||||
|
||||
|
||||
|
||||
* [Cross-browser text-shadow by Kilian Valkhof](http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/)
|
||||
Nice article about trying to make text-shadow cross-browser compatible
|
||||
|
||||
|
||||
|
||||
* [CSS Drop Shadows on Design Meme](http://www.designmeme.com/articles/dropshadows/)
|
||||
An easy css-hack for cross-browser compatibilty (but without a blur radius)
|
||||
|
||||
|
||||
|
||||
* [text-shadow hack for firefox on klog](http://verens.com/archives/2005/02/28/text-shadow/)
|
||||
Another hack just for Gecko-based browsers by utilizing javascript
|
||||
|
||||
|
||||
|
||||
* [Firefox plugin "A Text Shadow"](http://piro.sakura.ne.jp/xul/_textshadow.html.en)
|
||||
A xpi-plugin providing support for text-shadow in Firefox written by Shimoda Hiroshi
|
||||
|
||||
|
||||
|
||||
* [Animating css text-shadow with javascript](http://maettig.com/code/css/text-shadow.html)
|
||||
The author animates multiple text-shadows with javascript, really incredible. Also various nice examples on this page.
|
||||
|
||||
|
||||
|
||||
* [Text-Shadow in Safari 1.1](http://whatdoiknow.org/archives/001305.shtml)
|
||||
Propably the oldest text-shadow demo originally made for Safari 1.1 ;-)
|
||||
|
||||
|
||||
|
||||
* [10.5.2 brings WebKit text-shadow rendering changes](http://www.islayer.com/blog/?p=255)
|
||||
Blog entry on islayer.com about different text-shadow rendering across different Mac OS X versions
|
||||
|
||||
|
||||
|
||||
* [CSS3 preview on css3.info](http://www.css3.info/preview/)
|
||||
"Everything you need to know about CSS3" - get excited before CSS3 becomes final
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Article Updates
|
||||
|
||||
|
||||
|
||||
|
||||
04/04/2008 updated the browser table to include Safari 4 and Google Chrome, stripped some parts in the compatibility and cross browser description and included some words on the Safari text-rendering hack for Safari 4
|
||||
|
||||
|
||||
|
||||
|
||||
10/23/2008 updated the Browser support part to reflect the implementation of text-shadow in Firefox 3.1
|
||||
|
||||
|
||||
|
||||
|
||||
update 2 added a new paragraph "5.6 Avoid jagged light-on-dark text rendering in Safari" as another possible usage of text-shadow (tanks Armen!)
|
||||
|
||||
|
||||
|
||||
|
||||
update 1 added some lines in the "2. Which Browsers support it" part about different text-shadow rendering across different Mac OS X versions
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-22 05:58:41+00:00
|
||||
layout: post
|
||||
slug: apple-releases-sdk-for-aperture-21
|
||||
|
||||
title: Apple releases plugin-SDK for Aperture 2.1
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-22 05:58:41+00:00
|
||||
wordpress_id: 42
|
||||
categories:
|
||||
- photography
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-28 12:53:18+00:00
|
||||
layout: post
|
||||
slug: more-awesomeness-from-the-webkit-team-css-masks
|
||||
|
||||
title: 'More awesomeness from the WebKit team: CSS Masks'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-28 12:53:18+00:00
|
||||
wordpress_id: 44
|
||||
categories:
|
||||
- design
|
||||
|
|
@ -14,12 +14,8 @@ categories:
|
|||
|
||||
From the Surfin' Safari Blog:
|
||||
|
||||
|
||||
|
||||
> WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image.
|
||||
|
||||
|
||||
|
||||
It even can be applied to a video-element.
|
||||
|
||||
(Via [Surfin' Safari](http://webkit.org/blog/181/css-masks/))
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-04 16:04:48+00:00
|
||||
layout: post
|
||||
slug: using-the-canoscan-lide-500f-with-mac-os-x-leopard
|
||||
|
||||
title: Using the CanoScan LiDE 500F scanner with Mac OS X Leopard
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-04 16:04:48+00:00
|
||||
|
||||
wordpress_id: 45
|
||||
categories:
|
||||
- photography
|
||||
|
|
@ -18,21 +19,14 @@ But since then Apple released Mac OS X 10.5 Leopard in october 2007 and the Cano
|
|||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
## Finding and downloading the new driver 11.2.5.0X
|
||||
|
||||
|
||||
# Finding and downloading the new driver 11.2.5.0X
|
||||
|
||||
But there's a new driver available. It was posted on the Canon USA website on 7 December 2007 and on the Canon Asia website on 28 January 2008. The new version number is 11.2.5.0X for Mac OS X and yes the driver remains a universal scanner driver running fine on both PowerPC- and Intel-Macs.
|
||||
|
||||
The changelog says:
|
||||
|
||||
|
||||
> Newly supports Mac OS X v10.5.
|
||||
ScanGear Starter is removed. (Because the operation problem occurs when the destination to save the scan file is changed in Mac OS X v10.5.)
|
||||
|
||||
|
||||
> ScanGear Starter is removed. (Because the operation problem occurs when the destination to save the scan file is changed in Mac OS X v10.5.)
|
||||
|
||||
So this sounds just right. You can download the new universal scanner driver from [Canon USA](http://www.usa.canon.com/consumer/controller?act=ModelInfoAct&tabact=SupportDetailTabAct&fcategoryid=235&modelid=11011#DownloadDetailAct) or [Canon Asia](http://support-asia.canon-asia.com/contents/ASIA/EN/0900321901.html). Following these links takes you right to the driver download page for this scanner.
|
||||
|
||||
|
|
@ -42,38 +36,25 @@ After the installation is finished you have to restart your Mac (very Mac-unlike
|
|||
|
||||
After a restart you should be able to use the scanner as a TWAIN device all over the system.
|
||||
|
||||
|
||||
|
||||
## Using the scanner in Mac OS X Leopard
|
||||
|
||||
|
||||
|
||||
# Using the scanner in Mac OS X Leopard
|
||||
|
||||
|
||||
## Preview / Image Capture
|
||||
|
||||
|
||||
|
||||
[](/media/scanwindow_preview.png)Leopard included a new version of Preview, the pdf and image-viewing application by Apple and also a new version of Image Capture. To use it with your scanner just plug in the scanner, open Preview and choose File > Import Image or just open the Image Capture application. A new scan window should open doing an automatic overview scan. In the scan window you have some minor options like resolution, scaling etc. You can even make simple but powerful image corrections down at the bottom (set it to manual).
|
||||
|
||||
But the best thing with the new Image Capture is the feature of setting the bit depth of the scanner to 16 bits. This was just possible before through the Canon software ScanGear in Photoshop.
|
||||
|
||||
|
||||
|
||||
## Scanning right into Apple Aperture?
|
||||
|
||||
|
||||
|
||||
[](/media/aperturescan.png) Wouldn't that be great? Although the scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. Maybe someone will code a generic scanning plugin for Aperture like VueScan for Aperture or something like that. But I guess this is something just Canon is able to do that and they won't.
|
||||
|
||||
But using Preview/Image Capture and Automator you can bypass this limitation. If you want to know how you can do that have a look at my article [Scan images directly into Apple Aperture](http://www.kremalicious.com/2008/05/scan-images-directly-into-apple-aperture/).
|
||||
|
||||
|
||||
|
||||
## Adobe Photoshop CS3
|
||||
|
||||
|
||||
|
||||
[](/media/scangearwindow.png)Just like with Creative Suite 2 you can use Photoshop to import images with your Scanner by using the Canon ScanGear software which indeed is just the scan window in Photoshop. Just chose File > Import > CanoScan LiDE 500F in Photoshop. If you have installed the driver for the first time the scan window in Photoshop defaults to Simple Mode. But if you want it simple you better chose a Preview/Image Capture workflow. So in Photoshop you should head over to Advanced Mode and check the preferences button down at the bottom first.
|
||||
|
||||
[](/media/scangear_color.png)Under the Color Settings tab you should set your preferred color management options.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-05 04:15:11+00:00
|
||||
layout: post
|
||||
slug: scan-images-directly-into-apple-aperture
|
||||
|
||||
title: Scan images directly into Apple Aperture
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-05 04:15:11+00:00
|
||||
wordpress_id: 46
|
||||
categories:
|
||||
- photography
|
||||
|
|
@ -17,22 +17,9 @@ tags:
|
|||
|
||||
In the Image Capture scan window you can define an automatic task which will follow the scan process. It defaults to Preview meaning that the scanned image will open as a new Preview document after the scan. But we can make the images import to Aperture after the scan just with tools which are build into Mac OS X and come with every Mac (besides Aperture). So here's what you can do to scan directly into Aperture in 3 simple steps.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 1. Make an Automator action
|
||||
|
||||
|
||||
# 1. Make an Automator action
|
||||
|
||||
Open up Automator and click on the photos library item. Find the Aperture action "Import Photos" and drag and drop it on the workflow field. Then you can chose your desired project or a new project for the scanned images to appear. I have a project for all new images called @Review so I chose that one as my target project. You can set a referenced import or the deletion of your source images as well. If you want to chose the desired project or any of the other preferences every time you're scanning you have to activate "Show this action when the workflow runs" in the Options of this action.
|
||||
|
||||
|
|
@ -40,19 +27,11 @@ To make it a bit cooler we can assign one or more keywords to our scanned images
|
|||
|
||||
[](/media/apertureimport_automator.png)
|
||||
|
||||
|
||||
|
||||
## 2. Save it as a plug-in for Image Capture
|
||||
|
||||
|
||||
# 2. Save it as a plug-in for Image Capture
|
||||
|
||||
[](/media/apertureimportplugin.png)Now we're going to save the whole workflow we clicked together. But instead of saving it as a general workflow chose File > Save as Plug-in. Type in a name like "Import to Aperture" and chose Image Capture from the dropdown menu and click save. Now your workflow has become a freshly new plug-in of the Image Capture application. If you ever want to delete, edit or just backup your Image Capture Plugins you can find them in your user folder library under /Workflows/Applications/Image Capture.
|
||||
|
||||
|
||||
|
||||
## 3. Scanning and have fun
|
||||
|
||||
|
||||
# 3. Scanning and have fun
|
||||
|
||||
[](/media/apertureimport_automatic.png)Plug in your scanner and open up Image Capture. A new scan window should open with your connected scanner as source. Now we have to define our freshly created plug-in as a task which will run after the image was scanned. Just chose your freshly created workflow from the Automatic Task dropdown menu and there you have it. So after you hit the scan button our freshly created workflow will run after the scan.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-07 03:27:25+00:00
|
||||
layout: post
|
||||
slug: high-quality-watermarks-with-aperture
|
||||
|
||||
title: 'HowTo: Use high-quality watermarks in your images with Aperture 2.1'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-07 03:27:25+00:00
|
||||
wordpress_id: 48
|
||||
categories:
|
||||
- photography
|
||||
|
|
@ -19,26 +19,13 @@ So let's see how we can make Aperture automatically render watermarks on our ima
|
|||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
1. Create a watermark image in Photoshop
|
||||
|
||||
|
||||
2. Render different sizes of the watermark image
|
||||
|
||||
|
||||
3. Define the watermark image inside an export preset in Aperture
|
||||
|
||||
|
||||
4. Make even more...
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 1. Create a watermark image in Photoshop
|
||||
# 1. Create a watermark image in Photoshop
|
||||
|
||||
|
||||
Open up Photoshop and load a photo taken with your camera in full size (pixel size of course, not file size). If you have photos with different pixel sizes you should use a photo with the biggest pixel size you're going to export from your Aperture library.
|
||||
|
|
@ -47,61 +34,37 @@ To illustrate the process I will use a picture taken by me. Create a new layer o
|
|||
|
||||
[](/media/watermark_1.png)
|
||||
|
||||
|
||||
|
||||
If you want it simple you can start with the Text tool right now but I prefer to add a background so our text is always readable no matter if the photo is dark or light. With the select tool draw a rectangle on the bottom of the image. Then select the Paintbucket tool, chose a foreground color of white and click on the selection in the image so the rectangle selection is filled with white.
|
||||
|
||||
|
||||
|
||||
[](/media/watermark_2.png)
|
||||
|
||||
|
||||
|
||||
Add some inner shadow by double clicking on the watermark layer and adjusting the values for inner shadow (just have a german speaking Photoshop version while writing this article but i guess you can identify the values visually):
|
||||
|
||||
|
||||
|
||||
[](/media/watermark_3.png)
|
||||
|
||||
|
||||
|
||||
Adjust the Fill of the layer to 40%. This will just make the fill color transparent while the opacity of the layer styles are preserved. You should end up with something like this:
|
||||
|
||||
|
||||
|
||||
[](/media/watermark_4.png)
|
||||
|
||||
|
||||
|
||||
Next select the Text tool, chose a black color in the tool preferences and click on the image. A new layer will be automatically created and you can type in the text you want to use in your watermark. For this tutorial I just used the copyright sign (opt + g) with a year and the word "Watermark". I used Helvetica Neue Ultra Light as font face.
|
||||
|
||||
|
||||
|
||||
Place the text at the bottom right and be sure to add some space to the right and to the bottom. Next set the layer mode of the text layer to "Overlay". Finally I've added a logo and set it's opacity to 80%. So now you should end up with something like this:
|
||||
|
||||
[](/media/watermark_5.png)
|
||||
|
||||
|
||||
|
||||
Now delete the Background layer. You should see the transparent grid. Next chose Image > Trim from the menu bar, select transparent pixels and click ok. The result should look like this:
|
||||
|
||||
|
||||
|
||||
[](/media/watermark_6.png)
|
||||
|
||||
|
||||
|
||||
Although Aperture is able to render all layers even with their layer styles correctly it has some problems with text layers and their styles. So to be on the save side you should flatten the layers by selecting them all (with command + click on the name of the layers) and pressing command + e which will merge all layers into one. After this step you won't be able to edit your layers so maybe you want to save your document BEFORE this step as an editable psd template file. Be sure that the background of your canvas remains transparent.
|
||||
|
||||
|
||||
|
||||
Now you're finished with your watermark image. Save it as a .psd file e.g. in your Pictures folder and name it watermark.psd.
|
||||
|
||||
Since version 2 Aperture can also handle other filetypes than psd as watermark images. So you can also use a jpg or png file. But remember that jpg can't handle transparency. But you can control the final opacity of the overlay image in Aperture so in the end you can have transparancy with a jpg file. More on that later on.
|
||||
|
||||
|
||||
|
||||
## 2. Render different sizes of the watermark image
|
||||
# 2. Render different sizes of the watermark image
|
||||
|
||||
|
||||
Before starting to create hundreds of watermark images remember that Aperture automatically can scale the watermark image down to fit the size of the exported image. So you could just use one watermark image and have Aperture scale it down to the correct size automatically. But it won't scale it up if your image is bigger, that's why we used a photo with the biggest pixel size you're going to export from Aperture. Just test it out with just one watermark image scaled down by Aperture and decide if the quality is enough for you. But even Apple recommends using different sizes.
|
||||
|
|
@ -112,7 +75,7 @@ Now you can close Photoshop or let it open if you have enough RAM ;-)
|
|||
|
||||
|
||||
|
||||
## 3. Define the watermark image inside an export preset
|
||||
# 3. Define the watermark image inside an export preset
|
||||
|
||||
|
||||
|
||||
|
|
@ -173,7 +136,7 @@ Or use a subtle colorful spectrum:
|
|||
|
||||
|
||||
|
||||
## 4. Make even more...
|
||||
# 4. Make even more...
|
||||
|
||||
|
||||
You can also use this feature to add borders or a whole new style to your images without the use of a plugin like [BorderFX](http://web.mac.com/reinharduebel/BorderFX/).
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-07 19:21:34+00:00
|
||||
layout: post
|
||||
slug: nik-ships-viveza-as-the-first-available-aperture-editing-plugin
|
||||
|
||||
title: Nik ships Viveza as an Aperture editing plugin
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-07 19:21:34+00:00
|
||||
wordpress_id: 49
|
||||
categories:
|
||||
- photography
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-07 19:22:49+00:00
|
||||
layout: post
|
||||
slug: the-15-best-new-features-of-aperture-2
|
||||
|
||||
title: The 15 best new features of Aperture 2
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-07 19:22:49+00:00
|
||||
wordpress_id: 50
|
||||
categories:
|
||||
- photography
|
||||
|
|
@ -16,13 +16,7 @@ tags:
|
|||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
## 15. The "New" toolbar icon
|
||||
|
||||
|
||||
|
||||
|
||||
# 15. The "New" toolbar icon
|
||||
|
||||
[](/media/aperture15_1.png)
|
||||
|
||||
|
|
@ -30,59 +24,31 @@ A handy dropdown icon with the most common create tasks you can do in Aperture 2
|
|||
|
||||
|
||||
|
||||
## 14. Skimming through your projects
|
||||
|
||||
|
||||
|
||||
|
||||
# 14. Skimming through your projects
|
||||
|
||||
[](/media/aperture15_2.png)
|
||||
|
||||
The Library item has a new child item: All Photos. Clicking on it displays all your projects like the Event view known from iPhoto 08. By hovering the mouse over the key photo (which you can define for yourself too) you "skim" through the project and quickly see all images contained in this project. Perfect for visually finding that non-keyworded photo you remember you've taken it but don't know where it is.
|
||||
|
||||
|
||||
|
||||
## 13. Search for adjustments
|
||||
|
||||
|
||||
|
||||
|
||||
# 13. Search for adjustments
|
||||
|
||||
[](/media/aperture15_3.png)
|
||||
|
||||
With Aperture 2 you can define a search query based on the adjustments you've made to an image in your library. So you can quickly identify all your images which have the monochrome mixer applied to them or maybe all your images which have _no_ edge sharpening applied and so on.
|
||||
|
||||
|
||||
|
||||
## 12. The Retouch tool
|
||||
|
||||
|
||||
|
||||
|
||||
# 12. The Retouch tool
|
||||
|
||||
[](/media/aperture15_4.png)
|
||||
|
||||
No more fiddling around with the poor results of the spot & patch tool when you just want to remove some sensor dust from your image. The repair mode of this tool is just perfect for that kind of task. The clone mode pretty much functions the same way as the clone tool in Photoshop. You define a clone source in your image by pressing option + click in your image and then pasting that source onto the imperfection by clicking on it.
|
||||
|
||||
|
||||
|
||||
## 11. Double click behavior
|
||||
|
||||
|
||||
|
||||
|
||||
# 11. Double click behavior
|
||||
|
||||
[](/media/aperture15_5.png)
|
||||
|
||||
The behavior of double clicking on images can now be set in Aperture's preferences. Either you can make Aperture show or hide the Viewer or set it to enter full screen mode with the double clicked image in focus.
|
||||
|
||||
|
||||
|
||||
## 10. Book Layout
|
||||
|
||||
|
||||
|
||||
|
||||
# 10. Book Layout
|
||||
|
||||
[](/media/aperture15_6.png)
|
||||
|
||||
|
|
@ -90,11 +56,7 @@ The photobook layout capabilities of Aperture became much powerful with version
|
|||
|
||||
|
||||
|
||||
## 9. The V- and W-cycle
|
||||
|
||||
|
||||
|
||||
|
||||
# 9. The V- and W-cycle
|
||||
|
||||
[](/media/aperture15_8.png)
|
||||
|
||||
|
|
@ -104,95 +66,49 @@ By pressing W on your keyboard you can cycle through the tabbed Inspector on the
|
|||
|
||||
|
||||
|
||||
## 8. The tabbed Inspector/HUD
|
||||
|
||||
|
||||
|
||||
|
||||
# 8. The tabbed Inspector/HUD
|
||||
|
||||
[](/media/aperture15_7.png)
|
||||
|
||||
An addition to the W-cycle: The overall inspector get polished by Apple which results in a completely new clean interface. But the best thing is you can access all those inspector tabs in full screen mode too by hitting the H-key. You can cycle through the tabs of the HUD in full screen mode just like you can do in the Aperture window by pressing the W-key. In fact the tabbed HUD will make you never want to leave full screen mode.
|
||||
|
||||
|
||||
|
||||
## 7. .Mac Web Gallery
|
||||
|
||||
|
||||
|
||||
|
||||
# 7. .Mac Web Gallery
|
||||
|
||||
|
||||
|
||||
Create easy updatable password protected galleries for different clients in no time. Your clients are even able to download the master files from your good looking .Mac web gallery.
|
||||
|
||||
|
||||
|
||||
## 6. Definition adjustment slider
|
||||
|
||||
|
||||
|
||||
|
||||
# 6. Definition adjustment slider
|
||||
|
||||
[](/media/aperture15_11.png)
|
||||
|
||||
It's a bit hard to describe. In short the slider adds more detail to the midtones of your image. But you just have to see it in action. You can get crisp and sharp images without the need of any sharpening tool.
|
||||
|
||||
|
||||
|
||||
## 5. Recovery + Black Point sliders
|
||||
|
||||
|
||||
|
||||
|
||||
# 5. Recovery + Black Point sliders
|
||||
|
||||
|
||||
|
||||
Although the Highlights & Shadow tool already produced reasonable results, the new Recovery and Black Point sliders are much more powerful and can reveal a lot of detail either in your blown out highlights or your underexposed shadows. Tip: While moving either the Recovery or the Black Point slider hold down the command key at the same time to see just an overlay of your hot & cold areas in your image.
|
||||
|
||||
|
||||
|
||||
## 4. Quick Preview
|
||||
|
||||
|
||||
|
||||
|
||||
# 4. Quick Preview
|
||||
|
||||
|
||||
|
||||
Perfect for first selections of your images during import. Aperture uses either a preview embedded by your camera in the RAW-file, the corresponding jpg-file if you shoot RAW+JPG or it uses the previews rendered by Aperture itself.
|
||||
|
||||
|
||||
|
||||
## 3. Color Picker
|
||||
|
||||
|
||||
|
||||
|
||||
# 3. Color Picker
|
||||
|
||||
[](/media/aperture15_13.png)
|
||||
|
||||
Inside the Color adjustment brick you can now directly pick the color you want to alter from your image by selecting it with the little eye dropper. So you aren't bound to the standard colors when adjusting the colors of your image separately.
|
||||
|
||||
|
||||
|
||||
## 2. Spe(eeee)ed
|
||||
|
||||
|
||||
|
||||
|
||||
# 2. Spe(eeee)ed
|
||||
|
||||
[](/media/aperture15_14.jpg)
|
||||
|
||||
Now you can "scroll like butter" (I bet you know who said that) through your whole library fro real. I don't know what exactly causes Aperture 2 to be so much more responsive and speedier than previous versions but the development team have done magic with this. In combination with the quick preview mode quickly browsing through thousands of photos even in full screen mode is now a snap.
|
||||
|
||||
|
||||
|
||||
## 1. RAW 2.0
|
||||
|
||||
|
||||
|
||||
|
||||
# 1. RAW 2.0
|
||||
|
||||
[](/media/raw20.png)
|
||||
|
||||
|
|
@ -200,5 +116,4 @@ The best new feature to me just because the whole purpose of Aperture should be
|
|||
|
||||
And you even get more adjustments for decoding the RAW file. The new Hue Boost slider only applies to the colors of your images rather than to the overall exposure like Boost do.
|
||||
|
||||
|
||||
These are my favorite new features of Aperture 2. I guess my next list in this style will be my wishlist of 15 features I would love to see in Aperture 2.5 or 3.
|
||||
These are my favorite new features of Aperture 2.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-08 15:47:48+00:00
|
||||
layout: post
|
||||
slug: the-iconfactory-presents-beautiful-indiana-jones-desktop-icons
|
||||
|
||||
title: The Iconfactory presents beautiful Indiana Jones desktop icons
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-08 15:47:48+00:00
|
||||
wordpress_id: 51
|
||||
categories:
|
||||
- design
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-14 10:01:15+00:00
|
||||
layout: post
|
||||
slug: canon-updates-its-photographic-software-to-work-with-leopard
|
||||
|
||||
title: Canon updates photographic software to work with Leopard
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-14 10:01:15+00:00
|
||||
wordpress_id: 53
|
||||
categories:
|
||||
- photography
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-18 05:00:01+00:00
|
||||
layout: post
|
||||
slug: first-aperture-adjustment-plugins-have-arrived
|
||||
|
||||
title: 'Update: First overview: Aperture 2.1 adjustment plugins have arrived'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-18 05:00:01+00:00
|
||||
wordpress_id: 54
|
||||
categories:
|
||||
- photography
|
||||
|
|
@ -14,11 +14,7 @@ tags:
|
|||
|
||||
With the release of Aperture 2.1 Apple introduced a plugin architecture for adding third party image adjustment and export plugins. Now the first third party image adjustment plugins for Aperture 2.1 have arrived. And they can definitely make you stop roundtripping your pictures to Photoshop and back. For now a total of 14 plugins from 9 companys were announced which are waiting to help you with your Aperture 2 workflow.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
## Dfx digital filters plugin from Tiffen
|
||||
# Dfx digital filters plugin from Tiffen
|
||||
|
||||
|
||||
|
||||
|
|
@ -26,19 +22,11 @@ The first one is the [Dfx digital filters plug-in from Tiffen](http://www.tiffen
|
|||
|
||||
[](/media/tiffen_aperture.jpg)
|
||||
|
||||
|
||||
|
||||
Tiffen made the plugin available in May 2008. You can download a [free 15-day trial](http://www.tiffen.com/dfx_downloads.html) too or you can purchase it from the Tiffen-website for US$299. Also don't forget to have a look [at the user guide](http://www.tiffen.com/userimages/Dfx-v1-Photo-UserGuide.pdf) for this plugin.
|
||||
|
||||
|
||||
|
||||
A nice in-depth overview of this plugin [gives Dominique James over at Aperture Users Professional Network](http://www.apertureprofessional.com/showthread.php?t=15225).
|
||||
|
||||
|
||||
|
||||
## Digital Film Tools Aperture Plugins
|
||||
|
||||
|
||||
# Digital Film Tools Aperture Plugins
|
||||
|
||||
Digital Film Tools [released three plugins](http://www.digitalfilmtools.com/apertureprods.htm) for Aperture 2.1 and above which were also already available for Photoshop:
|
||||
|
||||
|
|
@ -46,34 +34,18 @@ Digital Film Tools [released three plugins](http://www.digitalfilmtools.com/aper
|
|||
|
||||
[](/media/dft-powerstroke_uis.jpg)
|
||||
|
||||
|
||||
|
||||
[Light! 3.5](http://www.digitalfilmtools.com/light/) is a plugin for adding Light effects with defined patterns which are created by Gamproducts.
|
||||
|
||||
|
||||
|
||||
[](/media/dft-light_ui.jpg)
|
||||
|
||||
|
||||
|
||||
[Ozone 2.5](http://www.digitalfilmtools.com/ozone/) is an adjustment plugin for selective adjustments of colors. It' based on the Digital Zone System, which divides a picture into 11 discrete zones where you can adjust each zone separately.
|
||||
|
||||
|
||||
|
||||
[](/media/dft-ozone_ui.jpg)
|
||||
|
||||
|
||||
|
||||
|
||||
All plugins are available now and can be [purchased fom the Digital Film Tools website](http://www.digitalfilmtools.com/buy/home.php?cat=38) as a Super Bundle with all three plugins included for US$ 175 or separately for US$ 50 (Light and Ozone) or US$ 120 (Power Stroke). There are also trial versions for the [Power Stroke](http://www.digitalfilmtools.com/powerstroke/media.htm), [Light](http://www.digitalfilmtools.com/light/media.htm) and [Ozone](http://www.digitalfilmtools.com/ozone/media.htm) plugin available from DFT's website which will watermark the edited images in demo mode.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Nik Viveza
|
||||
|
||||
|
||||
# Nik Viveza
|
||||
|
||||
Nik Software [announced the availabilty of Viveza](http://www.niksoftware.com/viveza/usa/entry.php?view=intro/viveza_aperture_announcement.shtml), an image editing plugin based on the cool U-Point technology as known from [Nikon's Capture NX](http://imaging.nikon.com/products/imaging/lineup/software/capturenx/index.htm). You can select areas from your image and adjust them separately from the rest of the picture. It is long available as a plugin for Photoshop and is shipping in May for Aperture 2.1. It will cost US$249.95 but users who already purchased Viveza for Photoshop get it for free!
|
||||
|
||||
|
|
@ -81,53 +53,29 @@ On May 7, 2008, Nik finally [shipped Viveza as the first availailabe plugin for
|
|||
|
||||
[](/media/viveza_aperture_ui.jpg)
|
||||
|
||||
|
||||
|
||||
## dvGarage dpMatte & HDR Toner
|
||||
|
||||
|
||||
# dvGarage dpMatte & HDR Toner
|
||||
|
||||
[DpMatte](http://www.dvgarage.com/prod/prod.php?prod=dpmatte) is a plugin for greenscreen keying for photographers. You can easily composite two images together, like adding another background for a portrait. It is available since April 22 and costs you US$ 69.
|
||||
|
||||
[](/media/dpmatte_index1.jpg)
|
||||
|
||||
|
||||
|
||||
The folks at dvGarage are also working on an Aperture plugin called HDRToner for high dynamic range images which will cost US$ 69 too and is expected to be available on June 15 2008.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Image Trends Aperture plugins
|
||||
|
||||
|
||||
# Image Trends Aperture plugins
|
||||
|
||||
Image Trends announced three plugins coming for Aperture 2.1. First one is the the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) which can remap images taken with fisheye lenses. If you're using a Fisheye lens you will love this plugin. According to Image Trends' Michael K. Conley the plugin should be available on May 19, 2008 and will cost US$ 29.95. But if you already purchased the Photoshop version Image Trends will give you 50% discount.
|
||||
|
||||
[](/media/imagetrends_hemi_10.jpg)
|
||||
|
||||
|
||||
|
||||
The [PearlyWhites](http://www.imagetrendsinc.com/products/prodpage_pearly.asp) plugin, which is intended to automatically whiten and brighten teeth in your images should be available within the next 60 days.
|
||||
|
||||
|
||||
|
||||
[](/media/imagetrends_pearlywhite.png)
|
||||
|
||||
|
||||
|
||||
And the [ShineOff](http://www.imagetrendsinc.com/products/prodpage_shine.asp) plugin, which removes shine from faces and skin should be available within the next 60 days too.
|
||||
|
||||
|
||||
|
||||
[](/media/imagestrends_shieoff.jpg)
|
||||
|
||||
|
||||
|
||||
## Picturecode Noise Ninja
|
||||
|
||||
|
||||
# Picturecode Noise Ninja
|
||||
|
||||
Well known for it's awesome noise reduction capabilities, Picturecode's [Noise Ninja](http://www.picturecode.com/nn_overview.htm) will be available as an Aperture 2.1 plugin too.
|
||||
|
||||
|
|
@ -135,47 +83,27 @@ According to Picturecode we can expect the plugin "sometimes next month" (June)
|
|||
|
||||
[](/media/noiseninja.png)
|
||||
|
||||
|
||||
|
||||
You can have a first look at an early alpha version of the plugin running in Aperture 2.1 in an [in-depth article by Rob Galbraith](http://www.robgalbraith.com/bins/content_page.asp?cid=7-9308-9356).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Creaceed Hydra + HDR Aperture Plugin
|
||||
|
||||
|
||||
# Creaceed Hydra + HDR Aperture Plugin
|
||||
|
||||
[Hydra](http://www.creaceed.com/hydra/) is a neat application for High Dynamic Range (HDR) image processing. With the release of Hydra 1.5, Creaceed made an Aperture plugin available with it too. It has a limited feature set compared to Photomatix or Photoshop but creating HDR images within Aperture is possible right now with this plugin. You can purchase Hydra for US$ 59.95 to get the included plugin or test it out by downloading the trial version (it will expire on July 1, 2008). But remember that the plugin is in beta stage at the moment.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Kekus LensFix CI
|
||||
|
||||
|
||||
# Kekus LensFix CI
|
||||
|
||||
The [LensFix](http://www.kekus.com/software/plugin.html) product from Kekus will help you to correct lens distortion automatically along with it's database of over 500 combinations of camera and lenses. It is also capable of reducing chromatic aberration in your images. Along with a standalone version and a Photoshop plugin the latest version will deliver you a plugin for Aperture in beta stage. The LensFix CI product with the Aperture plugin included will cost you US$ 30.
|
||||
|
||||
You can read a first review of the beta plugin for Aperture [over at trick77.com](http://www.trick77.com/2008/05/18/review-lens-correction-plug-in-kekus-lensfix-for-aperture-2/).
|
||||
|
||||
|
||||
|
||||
## Human Software ApertureEdit
|
||||
|
||||
|
||||
# Human Software ApertureEdit
|
||||
|
||||
This plugin is a whole bundle of 11 different modules for more than 4000 effects like denoising, lens fixing, framing, light effects and many more. All effects can be applied to one image at a time or to a whole set of images at once. Just head over to the [product page](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) to see all effects and features this plugin bundle is capable of. The whole bundle will cost you US$ 299.95 or US$ 69.95 for each module.
|
||||
|
||||
[](/media/apertureedit_interface.jpg)
|
||||
|
||||
|
||||
|
||||
## More information
|
||||
|
||||
|
||||
# More information
|
||||
|
||||
[Image editing plug-ins the centrepiece of Aperture 2.1 by Rob Galbraith](http://www.robgalbraith.com/bins/content_page.asp?cid=7-9308-9356): In-depth article about the plugin architecture of Aperture 2.1
|
||||
|
||||
|
|
@ -204,54 +132,4 @@ Kekus website
|
|||
[www.kekus.com](http://www.kekus.com/)
|
||||
|
||||
Human Software website
|
||||
[www.humansoftware.com](http://www.humansoftware.com)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Article Updates
|
||||
|
||||
|
||||
|
||||
|
||||
Update 7 added Human Software's ApertureEdit plugin bundle
|
||||
|
||||
|
||||
|
||||
|
||||
Update 6 added Kekus' LensFix CI plugin
|
||||
|
||||
|
||||
|
||||
|
||||
Update 5 added Creaceed's Hydra plugin
|
||||
|
||||
|
||||
|
||||
|
||||
Update 4 added 2 more plugins from Image Trends and some more details about all of their Aperture plugins
|
||||
|
||||
|
||||
|
||||
|
||||
Update 3 added a new paragraph about Picturecode's rare documented Noise Ninja plugin for Aperture
|
||||
|
||||
|
||||
|
||||
|
||||
Update 2 added dvGarage's HDR Toner and the price for dvGarage's dpMatte
|
||||
|
||||
|
||||
|
||||
|
||||
Update 1 added some lines about the final shipment of Nik's Viveza
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[www.humansoftware.com](http://www.humansoftware.com)
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-19 13:05:23+00:00
|
||||
layout: post
|
||||
slug: image-trends-releases-fisheye-hemi-plug-in-for-aperture
|
||||
|
||||
title: Image Trends releases Fisheye-Hemi plug-in for Apple Aperture
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-19 13:05:23+00:00
|
||||
wordpress_id: 55
|
||||
categories:
|
||||
- photography
|
||||
|
|
@ -16,20 +16,11 @@ tags:
|
|||
|
||||
From the press release:
|
||||
|
||||
|
||||
> Photographers can now easily preserve a normal view of people by not distorting their faces and bodies, as the plug-in straightens vertical lines. Fisheye-Hemi Plug-In uses almost all of the pixel data in that view with no loss of image resolution while displaying the intended composition and framing better than other un-warping programs.
|
||||
|
||||
|
||||
|
||||
If you're interested in how the plugin works there's [a cool in-depth explanation from the guys at Image Trends on their website](http://www.imagetrendsinc.com/products/specpage_hemi.asp).
|
||||
|
||||
The Fisheye-Hemi plugin is the first plugin from Image Trends coming for Apple's Aperture. Image Trends' president and CEO Dan Sullivan says that the other plugins [PearlyWhite](http://www.imagetrendsinc.com/products/prodpage_pearly.asp) and [ShineOff](http://www.imagetrendsinc.com/products/prodpage_shine.asp) are expected to be released within the next 60 days while some mysterious "other products" will follow them too. The plugin costs US$ 29.95 and if you want the plugin for Aperture and Photoshop you get a 50% discount. There's also a free trial version of the plugin available.
|
||||
|
||||
|
||||
|
||||
* [Plugin website](http://www.imagetrendsinc.com/products/prodpage_hemi.asp)
|
||||
|
||||
|
||||
* [First overview: Aperture 2.1 adjustment plugins have arrived](http://www.kremalicious.com/2008/05/first-aperture-adjustment-plugins-have-arrived/)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-21 13:02:00+00:00
|
||||
layout: post
|
||||
slug: awesome-parallax-optical-illusion
|
||||
|
||||
title: 'Awesome parallax optical illusion: Make a horse move'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-21 13:02:00+00:00
|
||||
wordpress_id: 58
|
||||
categories:
|
||||
- design
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-22 20:01:12+00:00
|
||||
layout: post
|
||||
slug: showcasing-the-css-parallax-effect-12-creative-usages
|
||||
|
||||
title: 'Showcasing the CSS Parallax Effect: 12+1 Creative Usages'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-22 20:01:12+00:00
|
||||
wordpress_id: 59
|
||||
categories:
|
||||
- design
|
||||
|
|
@ -14,8 +14,6 @@ categories:
|
|||
|
||||
Been so in love with the parallax effect that I have to post another article about it. For the non-geeks: I don't mean [measuring distances between objects in space](http://en.wikipedia.org/wiki/Parallax), the [parallax error in photography](http://en.wikipedia.org/wiki/Parallax#Parallax_error_in_photography), any [StarTrek episode](http://www.startrek.com/startrek/view/series/VOY/episode/68824.html), the [movie Parallax View](http://www.imdb.com/title/tt0071970/) and definitely not [DC Comic's Parallax monster](http://scifipedia.scifi.com/index.php/Parallax_(DC)).
|
||||
|
||||
|
||||
|
||||
I mean [Parallax Scrolling](http://en.wikipedia.org/wiki/Parallax_scrolling) which is a technique often used in good ol' arcade and video games like [Moon Patrol](http://en.wikipedia.org/wiki/Moon_Patrol) or [Sonic the Hedgehog](http://en.wikipedia.org/wiki/Sonic_the_Hedgehog_%28video_game%29). In such 2D games parallax scrolling was used to create an illusion of three dimensional depth.
|
||||
|
||||
Since our operating systems are mainly 2D too we can use this pseudo 3D technique to create the same illusion in our web browsers. Of course this was first done by flash designers and it's a popular effect used in flash based websites or [parts of it](http://a.viary.com/).
|
||||
|
|
@ -23,40 +21,12 @@ Since our operating systems are mainly 2D too we can use this pseudo 3D techniqu
|
|||
But with the rise of CSS this technique can now be done without the use of flash as [Alex Walker](http://www.sitepoint.com/blogs/2008/01/18/in-the-lab-doing-strange-things-to-css-backgrounds/) and [Paul Annett](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax) discovered. You see we are now very close to the [Atari](http://en.wikipedia.org/wiki/Atari) with Web-Design.
|
||||
|
||||
So it's time for a first showcase of websites using this effect. At the end of this article you'll find some tutorials for making this effect too. And as you can see there's a parallax effect in the header of this website too so I will not include myself in this showcase list ;-)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
So here are the examples. Just start clicking, resizing and goggling!
|
||||
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
|
||||
# Examples
|
||||
|
||||
[Clearleft's Silverback Teaser page](http://www.silverbackapp.com/)
|
||||
|
||||
|
|
@ -116,9 +86,7 @@ A russian site with an awesome making-webdesign-in-jungle parallax (thanks [egot
|
|||
|
||||
|
||||
|
||||
## More Scripts and Interaction, please
|
||||
|
||||
|
||||
# More Scripts and Interaction, please
|
||||
|
||||
All the showcased sites above need to be resized in the browser to see the effect. This fact makes those effects nice easter eggs but they are rather useless for most users. But with some JavaScript we can bypass this limitation.
|
||||
|
||||
|
|
@ -159,37 +127,21 @@ Same graphics as on Silverback too but this Parallax follows your mouse pointer.
|
|||
|
||||
|
||||
|
||||
## How-Tos and Tutorials
|
||||
|
||||
|
||||
|
||||
|
||||
# How-Tos and Tutorials
|
||||
|
||||
* [How to recreate Silverback's Parallax Effect](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax)
|
||||
|
||||
|
||||
|
||||
* [In the Lab: Doing strange things to CSS Backgrounds](http://www.sitepoint.com/blogs/2008/01/18/in-the-lab-doing-strange-things-to-css-backgrounds/)
|
||||
|
||||
|
||||
|
||||
* [Starry Night: Incredible 3D Background Effect with Parallax](http://css-tricks.com/3d-parralax-background-effect/)
|
||||
|
||||
|
||||
|
||||
* [Your own CSS parallax illusion 3d image](http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html)
|
||||
|
||||
|
||||
|
||||
|
||||
* [Parallax Backgrounds - a multi–layered javascript experiment](http://inner.geek.nz/javascript/parallax/)
|
||||
|
||||
|
||||
|
||||
* [How to Make the Parallax Effect](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/)
|
||||
|
||||
|
||||
|
||||
|
||||
Hope you enjoyed this little showcase. Please share it on your favorite social website or vote for it. Your vote is always highly appreciated! And if you know any other websites using this effect (the non-flash versions) feel free to post them in the comments beneath this article.
|
||||
|
||||
**Update 05/29/2008:** [Dylan Bathurst](http://www.dylanbathurst.com/) wrote an article [How to make the Parallax effect](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/) which includes his own "Keep out of the Rain" example and a sticky, Hulk style Parallax footer:
|
||||
|
|
@ -215,9 +167,5 @@ A star parallax which follows your mouse pointer. Done with jQuery and with heav
|
|||
My personal favorite for now in terms of usability. If you are able to understand spanish, [read his explanation](http://www.csslab.cl/2008/05/29/parallax-en-uso-real/).
|
||||
|
||||
[](http://www.csslab.cl/ejemplos/parallax_mootools/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-28 15:29:56+00:00
|
||||
layout: post
|
||||
slug: new-all-in-one-aperture-plug-in-released
|
||||
|
||||
title: New all-in-one Aperture plug-in released
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-28 15:29:56+00:00
|
||||
wordpress_id: 60
|
||||
categories:
|
||||
- photography
|
||||
|
|
|
|||
|
|
@ -15,10 +15,8 @@ categories:
|
|||
|
||||
I have added my first wallpaper to the Goodies section on this website. It's a shot of blooming chives which was altered with Aperture 2.1 and Photoshop CS3.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
You can get the wallpaper by browsing [my Goodies section](http://www.kremalicious.com/goodies/) and clicking on the download link for the wallpaper. The download package also includes a custom folder icon (512px as .icns, .png, .ico) with the Chives wallpaper on it.
|
||||
|
||||
<a class="btn btn-block icon-download-alt" href="/media/chives_by_kremalicious.zip">Download Chives Wallpaper</a>
|
||||
<a class="btn btn-block icon-download" href="/media/chives_by_kremalicious.zip">Download Chives Wallpaper</a>
|
||||
|
||||
Beside that, this image is [available for print on deviantArt in various sizes](http://www.deviantart.com/print/3347544/).
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-02 18:26:37+00:00
|
||||
layout: post
|
||||
slug: tweet-im-on-twitter-now
|
||||
|
||||
title: Tweet! I'm on Twitter now.
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-06-02 18:26:37+00:00
|
||||
wordpress_id: 65
|
||||
categories:
|
||||
- personal
|
||||
|
|
|
|||
|
|
@ -16,29 +16,18 @@ categories:
|
|||
|
||||
These two desktop icons show the Camera Obscura as it was used by Nicéphore Niépce in an Aperture and iPhoto style and are intended as an homage to him. Nicéphore Niépce made it first possible to preserve an image taken with a camera obscura in 1826 or 1827 by using a special mixture of bitumen on a pewter plate, naming it Heliography. This first preserved photograph "View from the Window at Le Gras" is the one you can see in the iPhoto icon contained in this package. The third icon is the folder icon I have created for this icon package.
|
||||
|
||||
|
||||
{% picture cameraobscura11_all.png %}
|
||||
|
||||
Either just download the icons or read the exciting story about the First Photograph.
|
||||
|
||||
1. The story behind these icons: The First Photograph and References in the icons
|
||||
|
||||
2. Download and enjoy!
|
||||
|
||||
3. How to use these icons
|
||||
|
||||
4. Final Words
|
||||
|
||||
|
||||
## The story behind these icons
|
||||
# The story behind these icons
|
||||
|
||||
There's a fascinating story behind these icons which is nothing more than the story of the invention of photography. Grab yourself a cup of coffee or tea and sit back while reading this story. Of course, if you're bored already just grab the download package further down this page ;-)
|
||||
|
||||
|
||||
|
||||
## Nicéphore Niépce and The First Photograph
|
||||
|
||||
|
||||
[](/media/nicephore-niepce.jpg) Nicéphore Niépce, ca. 1795
|
||||
[](/media/nicephore-niepce.jpg) Nicéphore Niépce, ca. 1795
|
||||
|
||||
Niépce was a multitasking French inventor who became famous for his experiments trying to preserve the projected image inside of the Camera Obscura. The Camera Obscura uses a well known optical phenomenon which is known to mankind for quite a long time.
|
||||
|
||||
|
|
@ -50,7 +39,8 @@ In 1822 he created a first non-fading negative contact print by utilizing a bitu
|
|||
|
||||
After some more tries and combining other elements in his procedure he was able to produce the famous First Photograph "View from the Window at Le Gras" in 1826 or 1827 by utilizing a bitumen of Judea-coated pewter plate and improved lenses from the Paris optician, Charles Chevalier. He called this procedure Heliography and the bitumen-coated pewter plate needed an exposure of eight or more hours!
|
||||
|
||||
[](/media/View-from-the-Window-at-Le-Gras.png) View from the Window at Le Gras
|
||||
{% picture View-from-the-Window-at-Le-Gras.png %}
|
||||
View from the Window at Le Gras
|
||||
|
||||
By the way, in 2002 another Picture made by Niépce was discovered which dates back to 1825. It was made in a process he called Heliogravure and it was an image of an (engraving) image (showing a man leading a horse). But since the scientific definition of the First Photograph is "the world's first permanent photograph from nature", "View from the Window at Le Gras" remains the First "real" photograph.
|
||||
|
||||
|
|
@ -66,24 +56,16 @@ Finally let me say that this is just a brief description of Niépce's discoverie
|
|||
|
||||
Now switch back from historical learning to Icon Design ;-)
|
||||
|
||||
|
||||
|
||||
## References in the icons
|
||||
|
||||
|
||||
|
||||
The Camera Obscura seen in my icon set is a drawing of the replica of Niépce's Camera Obscura which you can find in Chalon-sur-Saône, France in Niépce's house. The Maison Nicéphore Niépce is a museum today, where they try to reproduce Niépce's procedures. And this isn't as easy as it seems with our shiny new 21st century technology.
|
||||
|
||||
The photography you can find in the iPhoto icon is the First Photograph "View from the Window at Le Gras", produced as a Heliography and dated to 1826 or 1827.
|
||||
|
||||
And finally, if you know the Aperture and iPhoto icons then you may have noticed the references to these applications too (just compare the lenses). ;-)
|
||||
|
||||
|
||||
|
||||
## Sources and more informations on Nicéphore Niépce
|
||||
|
||||
|
||||
|
||||
[Maison Nicéphore Niépce](http://www.niepce.com/)
|
||||
The home of Nicéphore Niépce in Saint-Loup-de-Varennes, France which is a museum today. It houses the replica of Niépce's Camera Obscura which was the inspiration for these icons and it was the view out of this house which became the First Photograph/Heliography.
|
||||
|
||||
|
|
@ -102,23 +84,15 @@ Massive 19th and 20th century text archive of The Daguerreian Society about the
|
|||
[Daguerre and the Invention of Photography](http://www.metmuseum.org/toah/hd/dagu/hd_dagu.htm)
|
||||
Brief description of Daguerres role in the invention of photography process by The Metropolitan Museum of Art
|
||||
|
||||
|
||||
|
||||
## Download and enjoy
|
||||
|
||||
|
||||
# Download and enjoy
|
||||
|
||||
This icon package was exclusively announced first on [MacThemes](http://macthemes2.net) and you can download it from the [Goodies section on this website](http://www.kremalicious.com/goodies/) or directly via this link:
|
||||
|
||||
<a class="btn btn-block icon-download-alt" href="/media/niepces_camera_obscura_by_kremalicious.zip">Download </a>
|
||||
<a class="btn btn-block icon-download" href="/media/niepces_camera_obscura_by_kremalicious.zip">Download </a>
|
||||
|
||||
In addition to these icons you can download the [associated wallpapers for your desktop or your iPhone](http://www.kremalicious.com/2008/06/new-goodie-niepces-camera-obscura-wallpaper-pack/).
|
||||
|
||||
|
||||
|
||||
## How to use these icons
|
||||
|
||||
|
||||
# How to use these icons
|
||||
|
||||
These desktop icons are free for your personal and non-commercial use. They were intended to be replacement icons for Apple's Aperture and iPhoto applications. Of course, you can use it for every other application instead or use the folder icon for your picture collection.
|
||||
|
||||
|
|
@ -126,18 +100,12 @@ The easiest way to change and apply icons in Mac OS X involves the awesome appli
|
|||
|
||||
To replace the icon of either an application, file or folder on Mac OS X simply ctrl + click (or right-click) on the desired application, file or folder and click "Get Info". Leave the Get Info dialog open and browse to an icon from this package inside the Mac folder. There you have three folders with the different icons applied to them. Now simply ctrl + click (or right-click) on the desired folder with the icon applied to it and click "Get Info". Now click on the icon in the upper left corner so it has a subtle shine around it noticing you it's selected. Now copy the icon by hitting command + c or choose Edit > Copy from the menubar. Make the dialog active we have opened in the first step by clicking on it and select the image in the upper left corner and hit command + v or choose Edit > Paste from the menubar. Now the desired icon should have been applied to the new folder.
|
||||
|
||||
|
||||
|
||||
## Legal
|
||||
|
||||
|
||||
# Legal
|
||||
|
||||
These desktop icons are free for you personal and non-commercial use. All other usage of this copyrighted material [require my written permission](http://www.kremalicious.com/about/contact/).
|
||||
|
||||
# Final Words
|
||||
|
||||
<a href="http://krlc.us/givecoffee"></a>
|
||||
|
||||
## Final Words
|
||||
|
||||
|
||||
|
||||
Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-](http://www.kremalicious.com/feed/) or buy me my next coffee ;-)
|
||||
Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-](http://www.kremalicious.com/feed/) or <a href="http://krlc.us/givecoffee">buy me my next coffee</a>.
|
||||
|
|
|
|||
|
|
@ -17,12 +17,11 @@ In addition to my Niépce's Camera Obscura icons for Aperture and iPhoto I have
|
|||
|
||||
All Wallpapers are using a custom designed background which imitates the look of a metal plate like it was used in Niépce's experiments although it wasn't golden ;-) To make it more Mac style I have added a stenciled dots pattern (which is a commonly used reference to the front design of the MacPro).
|
||||
|
||||
<a class="btn btn-block icon-download-alt" href="/media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip">Download Niépce's Camera Obscura Wallpaper</a>
|
||||
<a class="btn btn-block icon-download" href="/media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip">Download Niépce's Camera Obscura Wallpaper</a>
|
||||
|
||||
Here are the details:
|
||||
|
||||
* Aperture and iPhoto styled Camera Obscura as it was used by Nicéphore Niépce.
|
||||
|
||||
* Including one desktop version with the Aperture styled Camera Obscura and one with the iPhoto styled. Both come in 1920x1200 for widescreen displays and 1600x1200 for normal displays
|
||||
* Including 2 different crops for the iPhone (480x320).
|
||||
|
||||
* Including 2 different crops for the iPhone (480x320).
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: post
|
||||
layout: photo
|
||||
|
||||
slug: helvetica-typewriter-keys
|
||||
title: Helvetica Typewriter Keys
|
||||
|
|
|
|||
|
|
@ -1,18 +1,17 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-11 10:37:07+00:00
|
||||
layout: post
|
||||
slug: safari-4-developer-preview
|
||||
|
||||
title: Safari 4 Developer Preview - Better Performance, Overhauled Web Inspector,
|
||||
New CSS [Update]
|
||||
New CSS
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-06-11 10:37:07+00:00
|
||||
wordpress_id: 70
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
|
||||
Apple released a developer preview of the upcoming version of its web browser Safari to registered Developers. The Safari 4 Developer Preview is available for Mac OS X Tiger/Leopard and Windows. While the main changes are not visible to the user the most significant visible new feature is the overhauled Web Inspector.
|
||||
<!-- more -->
|
||||
|
||||
You can access Safari's Web Inspector through Develop > Show Web Inspector (you have to check the "Show Develop menu" box in the Preferences first to enable it). The Web Inspector, like the Firebug plug-in for Firefox, is a cool tool especially for Web Developers to inspect various elements of the website you're browsing.
|
||||
|
||||
|
|
@ -24,12 +23,8 @@ The "Resources" section got a slight overhaul too. With it you can see in which
|
|||
|
||||
[](/media/webinspector_2.png)
|
||||
|
||||
|
||||
|
||||
Among the visible new features in the Safari 4 Developer Preview is the ability to save websites as desktop applications or site-specific browsers (SSB) called Web Applications (File > Save as Web Application) and some more options for new windows or tabs in the General Preferences:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
In terms of web standards and performance the Safari 4 Developer Preview passes the [Acid3 performance test](http://acid3.acidtests.org/) with 100/100 and is way more faster at rendering web pages.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-17 15:21:57+00:00
|
||||
layout: post
|
||||
slug: quick-tip-borders-titles-plug-in-for-aperture
|
||||
|
||||
title: 'Quick Tip: Borders & Titles Plug-In for Aperture'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-06-17 15:21:57+00:00
|
||||
wordpress_id: 73
|
||||
categories:
|
||||
- photography
|
||||
|
|
@ -20,6 +20,4 @@ There's a simple editing plug-in available for this task called [Borders & Title
|
|||
|
||||
[](/media/aperture_bt.png)
|
||||
|
||||
|
||||
|
||||
The downlaod package includes the source code too so you can adjust the plug-in if you're able to code Cocoa. After downloading put the BordersAndTitles.ApertureEdit plug-in into /Library/Application Support/Aperture/Plug-Ins and access the plug-in from Aperture.
|
||||
|
|
|
|||
|
|
@ -64,9 +64,7 @@ Here are the steps involved in setting up your Ubuntu box as a Mac file server:
|
|||
|
||||
|
||||
|
||||
## 1. Modify and install Netatalk
|
||||
|
||||
|
||||
# 1. Modify and install Netatalk
|
||||
|
||||
[Netatalk](http://netatalk.sourceforge.net/) is the Open Source implementation of AFP. Mac OS X requires encryption to work properly but the standard package of netatalk provided in the Ubuntu repositories doesn't include this feature. So we have to build our own netatalk package from the sources with the encryption feature enabled.
|
||||
|
||||
|
|
@ -97,8 +95,6 @@ Depending on your hardware this may take a while but you can enjoy the geeky bui
|
|||
|
||||
[](/media/ubuntuserver2.png)
|
||||
|
||||
|
||||
|
||||
If everything went through without errors (except the signing warnings, can be ignored) you can install the recently created package:
|
||||
|
||||
|
||||
|
|
@ -114,11 +110,7 @@ echo "netatalk hold" | sudo dpkg --set-selections
|
|||
|
||||
Now you have successfully build and installed your custom Netatalk package which now has support for encrypted logins. Now let's configure the whole thing.
|
||||
|
||||
|
||||
|
||||
## 2. Configure Netatalk
|
||||
|
||||
|
||||
# 2. Configure Netatalk
|
||||
|
||||
First you should deactivate services provided by Netatalk which are not needed if you just want to use your Ubuntu box for file sharing. This will speed up the response and startup time of Netatalk dramatically. For instance Netatalk starts the old AppleTalk protocol by default which is just needed for pre OS X systems. So we're going to use the graphical editor gedit for stopping unneeded services:
|
||||
|
||||
|
|
@ -153,11 +145,7 @@ Scroll to the very bottom of the document and add this to the bottom (replace th
|
|||
|
||||
Press Ctrl + S to save the document or choose File > Save.
|
||||
|
||||
|
||||
|
||||
## 3. Configure shared Volumes
|
||||
|
||||
|
||||
# 3. Configure shared Volumes
|
||||
|
||||
Now we have to tell the afpd daemon what Volumes to share. This is defined in the AppleVolumes.default file inside /etc/netatalk/. The following line will open this file in the gedit editor with superuser privileges (required for saving) where we can define our shared volumes:
|
||||
|
||||
|
|
@ -196,9 +184,7 @@ sudo /etc/init.d/netatalk restart
|
|||
|
||||
Although we now have a fully configured AFP file server it will not show up in the Finder sidebar on Mac OS X Leopard (but it's reachable via Go > Connect to Server... in the Finder). Macs use a service called [Bonjour](http://www.apple.com/macosx/technology/bonjour.html) for the sidebar thing (and for a lot of other cool stuff) and on the Linux side we can have this functionality with the Open Source implementation of Bonjour, called [Avahi](http://avahi.org/).
|
||||
|
||||
|
||||
|
||||
## 4. Install Avahi
|
||||
# 4. Install Avahi
|
||||
|
||||
So the Avahi daemon will advertise all defined services across your network just like Bonjour do. So let's install the avahi daemon and the mDNS library used for imitating the Bonjour service. When fully configured this will cause all Macs in your network to discover your Ubuntu box automatically:
|
||||
|
||||
|
|
@ -221,10 +207,7 @@ hosts: files mdns4_minimal [NOTFOUND=return] dns mdns4 mdns
|
|||
|
||||
Press Ctrl + S to save the document or choose File > Save.
|
||||
|
||||
|
||||
## 5. Configure Avahi and advertise services
|
||||
|
||||
|
||||
# 5. Configure Avahi and advertise services
|
||||
|
||||
Next we have to tell Avahi which services it should advertise across the network. In our case we just want to advertise AFP sharing. This is done by creating a xml-file for each service inside /etc/avahi/services/ following a special syntax. Let's create a xml-file for the afpd service with the following line:
|
||||
|
||||
|
|
@ -273,11 +256,7 @@ update: If you've followed the revised version of this article your Linux box sh
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
## 6. Configure Time Machine
|
||||
|
||||
|
||||
# 6. Configure Time Machine
|
||||
|
||||
**update 07/14/2008:** On the Mac side you have to enable the option to use network volumes as Time Machine drives first. Without it your freshly shared and advertised network volume won't show up in the disk selection dialogue in Time Machine. This is a hidden option not accessible via the graphical user interface so you have to copy & paste this in Terminal (it's one line):
|
||||
|
||||
|
|
@ -293,11 +272,7 @@ When your first Time Machine backup is done you can remove all Volumes and the n
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
## 7. Conclusion, Problems and more informations
|
||||
|
||||
|
||||
# 7. Conclusion, Problems and more informations
|
||||
|
||||
You see that Linux and Ubuntu can be configured to behave like Macs in your network. But it's sad, that you have to fire up the Terminal to achieve this. I hope especially the Ubuntu team will simplify this in future versions. Another sad thing is that Ubuntu is missing a useful avahi/Bonjour and AFP implementation for Nautilus, the file manager. So there's no way to access your Mac from Ubuntu via AFP in the file manager. In my network I use SSH to access the Macs from Ubuntu or Linux by allowing Remote Login on the Macs in the Sharing preferences. But there's a command line based [AFP client available called afps-ng](http://alexthepuffin.googlepages.com/home) which uses the FUSE system.
|
||||
|
||||
|
|
@ -309,13 +284,8 @@ Although I have checked all log files while using file sharing and especially wh
|
|||
|
||||
Finally the only problem remaining is that your Ubuntu or Linux box isn't formatted as journaled HFS+ so some scenarios would fail or make problems. This can include having your iTunes, iPhoto or Aperture library on your Ubuntu server. But the cnid_meta daemon will always try handle that for us. This will cause some hidden folders to show up in Ubuntu which are used to store all the metadata required to almost reproduce a HFS+ file system. But if you ever run into problems you can easily resolve these by creating sparse disk images on your server with the Disk Utility built into Mac OS X. Just create a new sparse disk image on your desktop, copy it to your mounted Ubuntu volume and mount the copied disk image by double clicking it. Now you can put all the files and libraries in it which depends on HFS+
|
||||
|
||||
**update 07/06/2008:**
|
||||
|
||||
|
||||
## Problems with creating the backup disk image
|
||||
|
||||
|
||||
|
||||
If time Machine says "The backup disk image could not be created" during the first backup attempt you can do the following to avoid this problem and some others (backup fail due to permissions):
|
||||
|
||||
In short, you have to create the backup disk image on your Desktop and copy it to your mounted Time Machine volume. But Time Machine creates a unique filename for the disk image and we can find out this name with a little trick:
|
||||
|
|
@ -338,24 +308,14 @@ In the field volume name write Backup of computername. Now FIRST chose sparse bu
|
|||
|
||||
Select your Desktop as destination and click create. After the creation is finished drag the created disk image to your mounted Time Machine volume (you can delete the disk image on your desktop when copy is finished). Finally go to Time Machine preferences and start your backup again and everything should work as expected now. After the first backup (this can take a long time depending on your harddrive) you can unmount your Time Machine volume and the next time Time Machine starts it will grab and mount the sparse bundle disk image automatically (with "Backup of computername" as the volume name).
|
||||
|
||||
**update 09/21/2008:**
|
||||
|
||||
|
||||
|
||||
## Firewall Settings
|
||||
|
||||
|
||||
|
||||
As [Kevin points out in the comments](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6431) you would have to adjust any firewall you use. But the standard Ubuntu installation won't use any Firewall.
|
||||
|
||||
In short you have to allow communications over port 548 and 5353.
|
||||
|
||||
|
||||
|
||||
## "Connection Failed"
|
||||
|
||||
|
||||
|
||||
If you get one of those errors:
|
||||
|
||||
````
|
||||
|
|
@ -393,24 +353,16 @@ Sorry I can't give you any other solutions for that but in most cases it's some
|
|||
|
||||
But for those people still having problems with these error messages: On Mac OS X have a look in the Console app inside your Utilities folder. Click on "All Messages" in the left sidebar, try to connect to your Ubuntu box in Finder and see the messages in Console. These are the "real" error messages which normally will lead you to a solution.
|
||||
|
||||
|
||||
|
||||
## -5014 error
|
||||
|
||||
|
||||
|
||||
Some people have problems when connecting to an AFP share and get a -5014 error. [As J5 pointed out in the comments](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-5021) you have to delete the hidden .AppleDB folders on your Ubuntu box and restart netatalk afterwards:
|
||||
|
||||
``` bash
|
||||
sudo /etc/init.d/netatalk restart
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Time Machine Full System Restore
|
||||
|
||||
|
||||
|
||||
In case of a full system restore you would have to boot your Mac from the Mac OS X installation DVD (the one delivered with your Mac) by pressing the c key during boot. Your Mac will start with a minimal UI where you have a Utilities section in the top menu bar. There you'll find "Restore from a Time Machine Backup" but it won't find your network share with your Time Machine backup. Luckily [Dmitry Nedospasov found a way to manage this](http://nedos.net/2008/03/29/restore-from-an-unsupported-time-machine-backup-with-the-leopard-dvd/) by simply mounting your Time Machine network share with the Terminal (which you can find under Utilities in the menu bar too) by utilizing the following syntax (shamelessly copied from [Dmitry](http://nedos.net/2008/03/29/restore-from-an-unsupported-time-machine-backup-with-the-leopard-dvd/)):
|
||||
|
||||
``` bash
|
||||
|
|
@ -429,26 +381,16 @@ Now you can close the Terminal and select "Restore from Time Machine Backup" fro
|
|||
|
||||
**update 12/07/2008:**
|
||||
|
||||
|
||||
## Netatalk backup disk reaching maximum capacity
|
||||
|
||||
|
||||
|
||||
As [Seron](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-15122) pointed out in the comments, there is some discussion on the net regarding problems with Netatalk and TimeMachine when the backup disk reaches maximum capacity. This is due to missing support for the AFP commands FPSyncDir aka commands 78 and 78 in Netatalk. [As a commenter in an ArsTechnica forum says](http://episteme.arstechnica.com/eve/forums/a/tpc/f/942005082731/m/370002065931?r=782005065931#782005065931): "As soon as your backup volume will reach max capacity, it will self destruct because of it."
|
||||
|
||||
In the forum you'll also find some links to various patches to avoid problems with that. If you have tested such patch please post your experiences in the comments for this article.
|
||||
|
||||
|
||||
|
||||
## More Articles
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* In case you want to connect your iPhone via AFP: [An AFP Server on your iPhone](http://www.eecs.berkeley.edu/~job/afpd/AFP_File_Server_on_your_iPhone.html). This uses the Netatalk package too
|
||||
|
||||
|
||||
* [Netatalk 2.0 manual](http://netatalk.sourceforge.net/2.0/htmldocs/)
|
||||
|
||||
|
||||
|
|
@ -467,12 +409,7 @@ In the forum you'll also find some links to various patches to avoid problems wi
|
|||
* [Using NetBSD, with guest account](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6143): [Johannes](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6143) laid down the steps to use NetBSD instead of Ubuntu.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 8. Downloading and using the Server Display Icons
|
||||
|
||||
|
||||
# 8. Downloading and using the Server Display Icons
|
||||
|
||||
I've quickly crafted a custom icon for your Ubuntu server. It's the Apple Cinema Display with the default wallpaper of Ubuntu 8.04 called Hardy Heron. Additionally I've included an icon with the default Leopard and the default Vista wallpaper to represent your Leopard and Windows server too (The default Mac server icon uses the old Tiger wallpaper).
|
||||
|
||||
|
|
@ -484,11 +421,7 @@ Because I've just modified Apple's standard icons these icons are just available
|
|||
|
||||
<a class="btn btn-primary icon-download" href="/media/server_displays_by_kremalicious.zip">Download Server Display Icons <span>zip</span></a>
|
||||
|
||||
|
||||
|
||||
## How to use the icons
|
||||
|
||||
|
||||
# How to use the icons
|
||||
|
||||
In the avahi configuration part in this article you have assigned the Xserve device info to your afpd.service file. All you have to do is to replace the generic Xserve icon (or whatever model you have assigned in your afpd.service file) with an icon from this icon package. Just rename the Ubuntu Server.icns to com.apple.xserve.icns and navigate to
|
||||
|
||||
|
|
@ -514,7 +447,7 @@ update: A solution for the icon problem is here: [Simon Wheatley figured out](ht
|
|||
|
||||
Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](http://www.kremalicious.com/feed/), discuss this article or <a href="http://krlc.us/givecoffee">buy me my next coffee</a>.
|
||||
|
||||
## 9. Translations Of This Article
|
||||
# 9. Translations Of This Article
|
||||
|
||||
The following articles are direct translations of my article but some of them are slightly modified or simplified. Remember that the authors/translators are responsible for the content.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-25 15:29:22+00:00
|
||||
layout: post
|
||||
slug: apertureedit-is-edit-for-aperture-now-updated-to-12
|
||||
|
||||
title: ApertureEdit is Edit for Aperture now, updated to 1.2
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-06-25 15:29:22+00:00
|
||||
wordpress_id: 77
|
||||
categories:
|
||||
- photography
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: post
|
||||
layout: photo
|
||||
|
||||
title: Stone Head
|
||||
image: stonehead.jpg
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ The theme itself makes heavy use of the `-webkit-border-radius` css option to di
|
|||
|
||||
Beside that I've used some special html and css properties which are essential for the iPhone:
|
||||
|
||||
## The Viewport
|
||||
# The Viewport
|
||||
|
||||
While Safari on iPhone will display all websites just fine it can happen that the initial viewport is too big so the text is too small to read. By setting a viewport meta tag you can exactly define the viewable dimensions of your website. Apple has [some nice examples](http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/chapter_4_section_3.html#//apple_ref/doc/uid/TP40006509-SW33) for understanding the importance of setting the Viewport in iPhone optimized websites.
|
||||
|
||||
|
|
@ -31,7 +31,7 @@ The viewport can be larger or smaller than the visible area but I wanted my cont
|
|||
This code will let the user scale the content up to 1.6 times to the default view and the default width of the content is set to the width of the (iPhone) device.
|
||||
|
||||
|
||||
## Tap Color
|
||||
# Tap Color
|
||||
|
||||
There's neither an active nor a hover state for links on the iPhone which makes sense on a touch interface although it would be much easier to just use a:active for the tap highlighting. Safari on the iPhone uses a special webkit property for that:
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ There's neither an active nor a hover state for links on the iPhone which makes
|
|||
-webkit-tap-highlight-color: rgba(234,234,234,0.5);
|
||||
{% endhighlight %}
|
||||
|
||||
## Home Screen Icon
|
||||
# Home Screen Icon
|
||||
|
||||
I've used a 147x147px icon so the icon looks crisp and sharp on the iPhone screen (because it's a 160dpi screen). You really should use a bigger size than [Apple's recommendation in their iPhone HIG](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/chapter_14_section_2.html). You have to provide a png icon without rounded corners and without the highlight shine since the iPhone will render that automatically on the icon. The icon has to be named apple-touch-icon.png and gets automatically detected when put in the root of your website. Additionally you can tell the iPhone the place where the icon is with this link tag in your head section:
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ There's neither an active nor a hover state for links on the iPhone which makes
|
|||
And finally many thanks to [cschock](http://www.cschock.de) for continuously testing my code voodoo soup even at late hours.
|
||||
|
||||
|
||||
## Resources for you to do the same and even more
|
||||
# Resources for you to do the same and even more
|
||||
|
||||
* [iWPhone by ContentRobot](http://iwphone.contentrobot.com/): The plug-in I use for kremalicious.iPhone. It detects an iPhone or iPod Touch and switches to another simple theme. You can easily adjust the plugin to point it to your own theme.
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ As always these desktop icons are free for you personal and non-commercial use.
|
|||
|
||||
The whole package includes 7 icons either packed in a nice tagged iContainer for use with Candybar or in Mac + Win + Linux compatible formats. If you have such an Icy Box case grab the icons [from my Goodies page.](http://www.kremalicious.com/goodies/#icons) Have fun!
|
||||
|
||||
<a class="btn btn-primary icon-download-alt" href="http://cdn2.kremalicious.com/media/icybox_by_kremalicious.zip">Download Icy Box Icons</a>
|
||||
<a class="btn btn-primary icon-download" href="http://cdn2.kremalicious.com/media/icybox_by_kremalicious.zip">Download Icy Box Icons</a>
|
||||
|
||||
* Replacement icons for the silver and black Icy Box external aluminium case with USB interface
|
||||
* Mac + Win + Linux + iContainer
|
||||
|
|
|
|||
|
|
@ -16,4 +16,4 @@ Show your geeky love for extraterrestrial universities! This is a simple Futuram
|
|||
|
||||
As usual you can [grab the whole zip package from my Goodies page](http://www.kremalicious.com/goodies/#wall) and have fun.
|
||||
|
||||
<a class="btn btn-primary icon-download-alt" href="/media/mars-u-wall-by-kremalicious.zip">Download Futurama Mars U Wallpaper</a>
|
||||
<a class="btn btn-primary icon-download" href="/media/mars-u-wall-by-kremalicious.zip">Download Futurama Mars U Wallpaper</a>
|
||||
|
|
@ -23,4 +23,4 @@ I’ve just released my own coffee cup icon, enjoy:
|
|||
|
||||
## Download
|
||||
|
||||
<a class="btn btn-primary icon-download-alt" href="/media/coffee_cup_by_kremalicious.zip">Download Coffee Cup Icons</a>
|
||||
<a class="btn btn-primary icon-download" href="/media/coffee_cup_by_kremalicious.zip">Download Coffee Cup Icons</a>
|
||||
|
|
|
|||
|
|
@ -29,4 +29,4 @@ Seriously, the pink versions are burning my eyes but the pink is a good referenc
|
|||
|
||||
The whole wallpaper pack can be downloaded [from the Goodies section on my website](http://www.kremalicious.com/goodies/) or via this button:
|
||||
|
||||
<a class="btn btn-primary icon-download-alt" href="/media/out-of-whale-oil-wall-by-kremalicious.zip">Download</a>
|
||||
<a class="btn btn-primary icon-download" href="/media/out-of-whale-oil-wall-by-kremalicious.zip">Download</a>
|
||||
|
|
@ -29,7 +29,7 @@ But I think you don't want to load tons of scripts on your websites if you inclu
|
|||
|
||||
To make this a bit more straightforward I provide these links compiled within two Coda Clip files for use with [Panic's Coda](http://panic.com/coda). While the first clip group contains all the plain link snippets the second group includes those snippets for use with Wordpress. Just download and add them to your Coda Clips collection:
|
||||
|
||||
<a class="btn btn-primary icon-download-alt" href="/media/share-link-bonanza-coda-clips.zip" title="Download Share Links Coda Clips">Download Share Links Coda Clips</a>
|
||||
<a class="btn btn-primary icon-download" href="/media/share-link-bonanza-coda-clips.zip" title="Download Share Links Coda Clips">Download Share Links Coda Clips</a>
|
||||
|
||||
Included are a **total of 40 share links per clip group** for the following social/bookmark sites. This list uses the links provided in the Coda clips so you can test them out here with this article ;-):
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ _
|
|||
|
||||
If you download the above Coda Clip files this icon is already applied on the clip files but here're just the icon files (icns, folder, iContainer, PNGs):
|
||||
|
||||
<a class="btn btn-primary icon-download-alt" href="http://www.kremalicious.com/media/coda-clips-icon-files.zip" title="Download Coda Clips Icon">Download Coda Clips Icon</a>
|
||||
<a class="btn btn-primary icon-download" href="http://www.kremalicious.com/media/coda-clips-icon-files.zip" title="Download Coda Clips Icon">Download Coda Clips Icon</a>
|
||||
|
||||
## 2. Usage
|
||||
|
||||
|
|
@ -129,7 +129,7 @@ If you want to use just icons and no text you should provide a link text anyway
|
|||
|
||||
Sadly Coda's clips aren't in a portable format ([Panic guys](http://panic.com), consider this is a feature request!) so here's a comprehensive list for the non-Coda users of all the links included in the above Coda Clips with plain and the Wordpress version for every site. This comes as a downloadable stripped-down HTML file (meaning there's no HTML site structure included) and as a long list within in this article. First, here's the HTML file download. Just open this locally in your browser or in your favorite editor:
|
||||
|
||||
<a class="btn btn-primary icon-download-alt" href="http://www.kremalicious.com/media/share-link-bonanza-html.zip" title="Download Share Links HTML File">Download Share Links HTML File</a>
|
||||
<a class="btn btn-primary icon-download" href="http://www.kremalicious.com/media/share-link-bonanza-html.zip" title="Download Share Links HTML File">Download Share Links HTML File</a>
|
||||
|
||||
And here's the huge list with all the share links in case you quickly want to grab just one of them. But be warned that this is a huge list so this is hidden by default.
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ Here's a quick twitter icon for use on your websites which is kind of a by-produ
|
|||
|
||||
This icon comes in various formats (PNG, ICNS, iContainer) and in 4 different sizes (128px, 48px, 32px, 16px) with each icon size redrawn (of course). Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these icons while they're hot.
|
||||
|
||||
<a class="btn btn-primary icon-download-alt" href="/media/twitter-crisp-by-kremalicious.zip">Download</a>
|
||||
<a class="btn btn-primary icon-download" href="/media/twitter-crisp-by-kremalicious.zip">Download</a>
|
||||
|
||||
Use them on any web project you like and/or [convert them into a send to twitter link](http://kremalicious.com/ultimate-coda-wordpress-share-link-bonanza/). Have fun!
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ The icon comes in various formats (iContainer, icns, png) in sizes from 512px-16
|
|||
|
||||
Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab this icon while it's hot.
|
||||
|
||||
<a class="btn btn-primary icon-download-alt" href="/media/adiumeetie-by-kremalicious.zip">Download</a>
|
||||
<a class="btn btn-primary icon-download" href="/media/adiumeetie-by-kremalicious.zip">Download</a>
|
||||
|
||||
## Adium Icon Usage
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ categories:
|
|||
|
||||
Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these replacement icons.
|
||||
|
||||
<a class="btn btn-primary icon-download-alt" href="/media/delibar-by-kremalicious.zip">Download</a>
|
||||
<a class="btn btn-primary icon-download" href="/media/delibar-by-kremalicious.zip">Download</a>
|
||||
|
||||
## Icon Usage
|
||||
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ This first checks if the feature exists and if a post thumbnail was addd with th
|
|||
Well and that's it. I would love to link to some smart WordPress Codex pages for these new template tags but at the time of this writing there simply isn't anything in the Codex about this.
|
||||
|
||||
|
||||
|
||||
<a href="http://krlc.us/givecoffee"></a>
|
||||
|
||||
|
||||
As always: before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee ;-)
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ The homescreen icons pixels in the 16px version needed all more vivid colors to
|
|||
|
||||
The icons come in various formats: iContainer, ICNS, ICO and PNG files for each size. Just click the following download button to grab the whole pack:
|
||||
|
||||
<a class="btn btn-primary icon-download-alt" href="/media/ipixelpad_by_kremalicious.zip">Download</a>
|
||||
<a class="btn btn-primary icon-download" href="/media/ipixelpad_by_kremalicious.zip">Download</a>
|
||||
|
||||
## License
|
||||
|
||||
|
|
|
|||
|
|
@ -23,5 +23,5 @@ The wallpaper comes in four versions with two color variations and two text vari
|
|||
|
||||
You can grab the full zip-package with versions for Desktop, iPad, iPhone & Android included:
|
||||
|
||||
<a class="btn btn-primary icon-download-alt" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
|
||||
<a class="btn btn-primary icon-download" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ So if you value quality and want pixel perfect icons in your admin area you need
|
|||
|
||||
I’ve put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away:
|
||||
|
||||
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn btn-primary icon-download-alt">Download Template & Code</a>
|
||||
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn btn-primary icon-download">Download Template & Code</a>
|
||||
<a href="https://github.com/kremalicious/wp-icons-template" class="icon-github btn">GitHub</a>
|
||||
<a href="http://krlc.us/givecoffee" class="icon-heart btn">Donate</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple
|
|||
|
||||
Download the whole package with all the sizes included or grab the individual ones from the list, all linked to the image files:
|
||||
|
||||
<a class="btn btn-block icon-download-alt" href="/media/project-purple-kremalicious.zip">Download <span> zip</span></a>
|
||||
<a class="btn btn-block icon-download" href="/media/project-purple-kremalicious.zip">Download <span> zip</span></a>
|
||||
|
||||
* [Desktop/rMBP/iPad 3 (3200x2048)](/media/project-purple-kremalicious.png)
|
||||
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
h1, h2 {
|
||||
.heading-band;
|
||||
}
|
||||
h1 { font-size: ceil(@font-size-base * 2.5) }
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user