mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-13 16:45:14 +01:00
post metadata cleanup
This commit is contained in:
parent
d134cef267
commit
2ca0182a40
GPG Key ID:
606EEEF3C479A91F
@ -2,3 +2,4 @@ node_modules/
|
||||
.cache/
|
||||
static/
|
||||
public/
|
||||
content/
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
layout: page
|
||||
title: I'm sorry Dave
|
||||
---
|
||||
|
||||
<div class="hal-9000"></div>
|
||||
|
||||
<p class="srverror-title">I'm sorry Dave,</p>
|
||||
<p class="srverror-text">I'm afraid I can't do that.</p>
|
||||
|
||||
<a href="#" class="js-search-init">How about a nice search?</a>
|
||||
|
||||
[Go to homepage](/)
|
||||
@ -1,778 +0,0 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
title: Style Guide
|
||||
sitemap: false
|
||||
---
|
||||
|
||||
The main page title of this guide is an `h1` element.
|
||||
|
||||
## Colors
|
||||
|
||||
<div class="colors grid grid--gutters grid--full grid-small--third">
|
||||
{% for color in site.data.colors %}
|
||||
<div class="color grid__col">
|
||||
<div class="color__swatch {{ color.name }}"></div>
|
||||
<span class="color__name">${{ color.name }}</span>
|
||||
<span class="color__hex">#{{ color.hex }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
## Typography
|
||||
|
||||
<div class="fonts">
|
||||
<p class="font__name font__name--brandon">Brandon Grotesque</p>
|
||||
<p class="font__name font__name--fftisa">FF Tisa Sans Pro</p>
|
||||
</div>
|
||||
|
||||
|
||||
## Sections
|
||||
|
||||
The secondary header above is an `h2` element, which may be used for any form of important page-level header. Consider using an `h2` unless you need a header level of less importance, or as a sub-header to an existing `h2` element.
|
||||
|
||||
### Third-Level Header
|
||||
|
||||
The header above is an `h3` element, which may be used for any form of page-level header which falls below the `h2` header in a document hierarchy.
|
||||
|
||||
#### Fourth-Level Header
|
||||
|
||||
The header above is an `h4` element, which may be used for any form of page-level header which falls below the `h3` header in a document hierarchy.
|
||||
|
||||
##### Fifth-Level Header
|
||||
|
||||
The header above is an `h5` element, which may be used for any form of page-level header which falls below the `h4` header in a document hierarchy.
|
||||
|
||||
###### Sixth-Level Header
|
||||
|
||||
The header above is an `h6` element, which may be used for any form of page-level header which falls below the `h5` header in a document hierarchy.
|
||||
|
||||
|
||||
## Structural Elements
|
||||
|
||||
### Paragraphs
|
||||
|
||||
All paragraphs are wrapped in `p` tags. Additionally, `p` elements can be wrapped with a `blockquote` element if the `p` element is indeed a quote.
|
||||
|
||||
The British Isles is an archipelago consisting of the two large islands of Great Britain and Ireland, and many smaller surrounding islands.
|
||||
|
||||
<p class="text-dimmed">Great Britain is the largest island of the archipelago. Ireland is the second largest island of the archipelago and lies directly to the west of Great Britain.</p>
|
||||
|
||||
```html
|
||||
<p class="text-dimmed">...</p>
|
||||
```
|
||||
|
||||
### Blockquotes
|
||||
|
||||
The `blockquote` element represents a section that is being quoted from another source:
|
||||
|
||||
> Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time.
|
||||
>
|
||||
> --- Winston Churchill, in [a speech to the House of Commons](http://hansard.millbanksystems.com/commons/1947/nov/11/parliament-bill#column_206) (11th November 1947)
|
||||
|
||||
### Horizontal Rules
|
||||
|
||||
The `hr` element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book. The following extract from *Pandora's Star* by Peter F. Hamilton shows two paragraphs that precede a scene change and the paragraph that follows it:
|
||||
|
||||
> Dudley was ninety-two, in his second life, and fast approaching time for another rejuvenation. Despite his body having the physical age of a standard fifty-year-old, the prospect of a long degrading campaign within academia was one he regarded with dread. For a supposedly advanced civilization, the Intersolar Commonwearth could be appallingly backward at times, not to mention cruel.
|
||||
>
|
||||
> *Maybe it won't be that bad*, he told himself. The lie was comforting enough to get him through the rest of the night's shift.
|
||||
>
|
||||
> * * *
|
||||
>
|
||||
> The Carlton AllLander drove Dudley home just after dawn. Like the astronomer, the vehicle was old and worn, but perfectly capable of doing its job. It had a cheap diesel engine, common enough on a semi-frontier world like Gralmond, although its drive array was a thoroughly modern photoneural processor. With its high suspension and deep-tread tyres it could plough along the dirt track to the observatory in all weather and seasons, including the metre-deep snow of Gralmond's winters.
|
||||
|
||||
|
||||
## List Elements
|
||||
|
||||
### Ordered Lists
|
||||
|
||||
The `ol` element denotes an ordered list, and various numbering schemes are available through CSS (including 1,2,3... i,ii,iii... a,b,c... and so on). Each item requires a surrounding `li` tag, to denote individual items within the list.
|
||||
|
||||
Here is an example list showing the monarchs of Great Britain and the United Kingdom:
|
||||
|
||||
1. House of Stuart
|
||||
1. Anne
|
||||
2. House of Hanover
|
||||
1. George I
|
||||
2. George II
|
||||
3. George III
|
||||
4. George IV
|
||||
5. William IV
|
||||
6. Victoria
|
||||
3. House of Saxe-Coburg and Gotha
|
||||
1. Edward VII
|
||||
4. House of Windsor
|
||||
1. George V
|
||||
2. Edward VIII
|
||||
3. George VI
|
||||
4. Elizabeth II
|
||||
|
||||
### Unordered Lists
|
||||
|
||||
The `ul` element denotes an unordered list (i.e. a list of loose items that don't require numbering, or a bulleted list). Again, each item requires a surrounding `li` tag, to denote individual items.
|
||||
|
||||
Here is an example list showing the constituent parts of the British Isles:
|
||||
|
||||
* United Kingdom of Great Britain and Northern Ireland:
|
||||
* England
|
||||
* Scotland
|
||||
* Wales
|
||||
* Northern Ireland
|
||||
* Republic of Ireland
|
||||
* Isle of Man
|
||||
* Channel Islands:
|
||||
* Bailiwick of Guernsey
|
||||
* Bailiwick of Jersey
|
||||
|
||||
Sometimes you may want each list item to contain block elements, typically a paragraph or two:
|
||||
|
||||
* The British Isles is an archipelago consisting of the two large islands of Great Britain and Ireland, and many smaller surrounding islands.
|
||||
|
||||
* Great Britain is the largest island of the archipelago. Ireland is the second largest island of the archipelago and lies directly to the west of Great Britain.
|
||||
|
||||
* The full list of islands in the British Isles includes over 1,000 islands, of which 51 have an area larger than 20 km^2^.
|
||||
|
||||
### Definition Lists
|
||||
|
||||
The `dl` element is for another type of list called a definition list. Instead of list items, the content of a `dl` consists of `dt` (definition term) and `dd` (definition description) pairs. Though it may be called a "definition list", `dl` can apply to other scenarios where a parent/child relationship is applicable. For example, it may be used for marking up dialogues, with each `dt` naming a speaker, and each `dd` containing his or her words:
|
||||
|
||||
Romeo
|
||||
: Have not saints lips, and holy palmers too?
|
||||
|
||||
Juliet
|
||||
: Ay, pilgrim, lips that they must use in prayer.
|
||||
|
||||
|
||||
## Table Elements
|
||||
|
||||
Tables should be used when displaying tabular data. The `thead`, `tfoot` and `tbody` elements enable you to group rows within each table.
|
||||
|
||||
If you use these elements, you must use every element. They should appear in this order: `thead`, `tfoot` and `tbody`, so that browsers can render the foot before receiving all the data. You must use these tags within the `table` element.
|
||||
|
||||
Example with Team GB's London 2012 medal table:
|
||||
|
||||
<div class="table-responsive">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align: left">Sport</th>
|
||||
<th>Gold</th>
|
||||
<th>Silver</th>
|
||||
<th>Bronze</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="text-align: left">Athletics</td>
|
||||
<td>4</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Boxing</td>
|
||||
<td>3</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Canoe Slalom</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>0</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Canoe Sprint</td>
|
||||
<td>1</td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Cycling - Road</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Cycling - Track</td>
|
||||
<td>7</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Diving</td>
|
||||
<td>0</td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Equestrian</td>
|
||||
<td>3</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Gymnastics - Artistic</td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td>3</td>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Hockey</td>
|
||||
<td>0</td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Judo</td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Modern Pentathlon</td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Rowing</td>
|
||||
<td>4</td>
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
<td>9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Sailing</td>
|
||||
<td>1</td>
|
||||
<td>4</td>
|
||||
<td>0</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Shooting</td>
|
||||
<td>1</td>
|
||||
<td>0</td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Swimming</td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Tennis</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>0</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Taekwondo</td>
|
||||
<td>1</td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left">Triathlon</td>
|
||||
<td>1</td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td style="text-align: left">Total</td>
|
||||
<td>29</td>
|
||||
<td>17</td>
|
||||
<td>19</td>
|
||||
<td>65</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## Media Elements
|
||||
|
||||
### Image
|
||||
|
||||
The `img` element represents an image:
|
||||
|
||||
<img src="/media/obligatory-it-s-summer-in-berlin-photo.jpg" alt="Example image" width="600" height="360" />
|
||||
|
||||
|
||||
## Text Formatting Elements
|
||||
|
||||
### Links and Anchors
|
||||
|
||||
The `a` element is used to hyperlink text, be that to another page, a named fragment on the current page or any other location on the web. Example:
|
||||
|
||||
[Go to the home page](/) or [return to the top of this page](#top).
|
||||
|
||||
### Stressed Emphasis
|
||||
|
||||
The `em` element is used to denote text with stressed emphasis, i.e. something you'd pronounce differently. Where italicizing is required for stylistic differentiation, the `i` element may be preferable. Example:
|
||||
|
||||
You simply *must* try the negitoro maki!
|
||||
|
||||
### Strong Importance
|
||||
|
||||
The `strong` element is used to denote text with strong importance. Where bolding is used for stylistic differentiation, the `b` element may be preferable. Example:
|
||||
|
||||
**Don't** stick nails in the electrical outlet.
|
||||
|
||||
### Italicised
|
||||
|
||||
The `i` element is used for text in an alternate voice or mood, or otherwise offset from the normal prose. Examples include taxonomic designations, technical terms, idiomatic phrases from another language, the name of a ship or other spans of text whose typographic presentation is typically italicised. Example:
|
||||
|
||||
There is a certain <i>je ne sais quoi</i> in the air.
|
||||
|
||||
### Emboldened
|
||||
|
||||
The `b` element is used for text stylistically offset from normal prose without conveying extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typographic presentation is typically emboldened. Example:
|
||||
|
||||
You enter a small room. Your <b>sword</b> glows brighter. A **rat** scurries past the corner wall.
|
||||
|
||||
### Inline Quotes
|
||||
|
||||
The `q` element is used for quoting text inline. Example showing nested quotations:
|
||||
|
||||
John said, <q>I saw Lucy at lunch, she told me <q>Mary wants you to get some ice cream on your way home</q>. I think I will get some at Ben and Jerry's, on Gloucester Road.</q>
|
||||
|
||||
### Abbreviations
|
||||
|
||||
The `abbr` element is used for any abbreviated text, whether it be acronym, initialism, or otherwise. Generally, it's less work and useful (enough) to mark up only the first occurrence of any particular abbreviation on a page, and ignore the rest. Any text in the `title` attribute will appear when the user's mouse hovers the abbreviation (although, notably, this does not work in Internet Explorer for Windows). Example:
|
||||
|
||||
Get the latest news from the <abbr title="British Broadcasting Corporation">[BBC](http://www.bbc.co.uk/)</abbr> in Stoke and <abbr title="Staffordshire">Staffs</abbr>.
|
||||
|
||||
### Definitions
|
||||
|
||||
The `dfn` element is used to highlight the first use of a term. The `title` attribute can be used to describe the term. Example:
|
||||
|
||||
Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.
|
||||
|
||||
### Citations
|
||||
|
||||
The `cite` element is used to represent the title of a work (e.g. a book, essay, poem, song, film, TV show, sculpture, painting, musical, exhibition, etc.). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. Example:
|
||||
|
||||
<cite>Universal Declaration of Human Rights</cite>, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III).
|
||||
|
||||
### Marked or Highlighted Text
|
||||
|
||||
The `mark` element is used to represent a run of text marked or highlighted for reference purposes. When used in a quotation it indicates a highlight not originally present but added to bring the reader's attention to that part of the text. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its relevance to the user's current activity. Example:
|
||||
|
||||
I also have some ==kitten==s who are visiting me these days. They're really cute. I think they like my garden! Maybe I should adopt a ==kitten==.
|
||||
|
||||
### Edits
|
||||
|
||||
The `del` element is used to represent deleted or retracted text which still must remain on the page for some reason. Meanwhile its counterpart, the `ins` element, is used to represent inserted text. Example:
|
||||
|
||||
As a result, ~~Kodos~~ ++Kang++ was elected president.
|
||||
|
||||
### Variables
|
||||
|
||||
The `var` element is used to denote a variable in a mathematical expression or programming context, but can also be used to indicate a placeholder where the contents should be replaced with your own value. Example:
|
||||
|
||||
If there are <var>n</var> pipes leading to the ice cream factory then I expect at *least* <var>n</var> flavours of ice cream to be available for purchase!
|
||||
|
||||
### Superscript and Subscript Text
|
||||
|
||||
The `sup` element represents a superscript and the sub element represents a `sub`. These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation. As a guide, only use these elements if their absence^superscript would change the meaning of the content.
|
||||
|
||||
Chemical formulas are written using subscripts (e.g. C~6~H~12~O~6~), but atomic isotopes are written using superscripts (e.g. ^13 C, ^131^I, and ^238^U).
|
||||
|
||||
### Small Print
|
||||
|
||||
The `small` element is used to represent disclaimers, caveats, legal restrictions, or copyrights (commonly referred to as 'small print'). It can also be used for attributions or satisfying licensing requirements. Example:
|
||||
|
||||
<small>Copyright (C) 1912-2012 Acme Corporation. All Rights Reserved.</small>
|
||||
|
||||
### Time
|
||||
|
||||
The `time` element is used to represent either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. Example:
|
||||
|
||||
Queen Elizabeth II was proclaimed sovereign of each of the Commonwealth realms on <time datetime="1952-02-06">6</time> and <time datetime="1952-02-07">7 February 1952</time>, after the death of her father, King George VI.
|
||||
|
||||
### Keyboard Entry
|
||||
|
||||
The `kbd` element is used to denote user input (typically via a keyboard, although it may also be used to represent other input methods, such as voice commands). Example:
|
||||
|
||||
To take a screenshot on your Mac, press <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>3</kbd>.
|
||||
|
||||
### Sample Output
|
||||
|
||||
The `samp` element is used to represent (sample) output from a program or computing system. Useful for technology-oriented sites, not so useful otherwise. Example:
|
||||
|
||||
The computer said <samp>Too much cheese in tray two</samp> but I didn't know what that meant.
|
||||
|
||||
### Pre-Formatted Text
|
||||
|
||||
The `pre` element represents a block of pre-formatted text, in which structure is represented by typographic conventions rather than by elements. Here's an example showing the printable characters of ASCII:
|
||||
|
||||
! " # $ % & ' ( ) * + , - . /
|
||||
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
|
||||
@ A B C D E F G H I J K L M N O
|
||||
P Q R S T U V W X Y Z [ \ ] ^ _
|
||||
a b c d e f g h i j k l m n o p
|
||||
q r s t u v w x y z { | } ~
|
||||
|
||||
### Code
|
||||
|
||||
The `code` element is used to represent fragments of computer code. Useful for technology-oriented sites, not so useful otherwise. Example:
|
||||
|
||||
The [`requestAnimationFrame`](https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame) method in the `window` object tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.
|
||||
|
||||
### Code Blocks
|
||||
|
||||
The `code` element can also be used in conjunction with the `pre` element to represent verbatim text like markup or a fragment of computer code:
|
||||
|
||||
```
|
||||
function microsoftShuffle(arr) {
|
||||
return arr.slice().sort(function () {
|
||||
return (0.5 - Math.random());
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
You may also specify the language of a code block, so that it can be properly highlighted. Below you can find the classic *Hello world* program implemented in different languages.
|
||||
|
||||
|
||||
#### JavaScript
|
||||
|
||||
```js
|
||||
console.log('Hello, world!');
|
||||
```
|
||||
|
||||
#### HTML
|
||||
|
||||
```html
|
||||
<h1 class="hello">Hello, world!</h1>
|
||||
```
|
||||
|
||||
#### CSS
|
||||
|
||||
```css
|
||||
.hello { font-size: 2rem; }
|
||||
```
|
||||
|
||||
#### Shell
|
||||
|
||||
```shell
|
||||
echo 'Hello, world!'
|
||||
```
|
||||
|
||||
#### Bash
|
||||
|
||||
```bash
|
||||
# output stuff
|
||||
echo 'Hello, world!'
|
||||
```
|
||||
|
||||
#### PHP
|
||||
|
||||
```php
|
||||
<?= 'Hello, world!' ?>
|
||||
```
|
||||
|
||||
#### C
|
||||
|
||||
```c
|
||||
#include <stdio.h>
|
||||
int main(int argc, char *argv[])
|
||||
{
|
||||
printf("Hello, world!\n");
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
#### C++
|
||||
|
||||
```cpp
|
||||
#include <iostream>
|
||||
using namespace std;
|
||||
int main()
|
||||
{
|
||||
cout << "Hello, world!" << endl;
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
#### C#
|
||||
|
||||
```csharp
|
||||
using System;
|
||||
class Program
|
||||
{
|
||||
public static void Main()
|
||||
{
|
||||
Console.WriteLine("Hello, world!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Clojure
|
||||
|
||||
```clj
|
||||
(println "Hello, world!")
|
||||
```
|
||||
|
||||
#### Elixir
|
||||
|
||||
```elixir
|
||||
IO.puts "Hello World"
|
||||
```
|
||||
|
||||
#### Erlang
|
||||
|
||||
```erlang
|
||||
io:format("~s~n", ["Hello, world!"])
|
||||
```
|
||||
|
||||
#### Go
|
||||
|
||||
```go
|
||||
package main
|
||||
import "fmt"
|
||||
func main() {
|
||||
fmt.Println("Hello, world!")
|
||||
}
|
||||
```
|
||||
|
||||
#### Groovy
|
||||
|
||||
```groovy
|
||||
println "Hello, world!"
|
||||
```
|
||||
|
||||
#### Haskell
|
||||
|
||||
```hs
|
||||
main = putStrLn "Hello, world!"
|
||||
```
|
||||
|
||||
#### Java
|
||||
|
||||
```java
|
||||
public class HelloWorld {
|
||||
public static void main(String[] args) {
|
||||
System.out.println("Hello, world!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Lisp
|
||||
|
||||
```lisp
|
||||
(princ "Hello, world!")
|
||||
```
|
||||
|
||||
#### Lua
|
||||
|
||||
```lua
|
||||
print("Hello, World!")
|
||||
```
|
||||
|
||||
#### Objective-C
|
||||
|
||||
```objc
|
||||
#import <stdio.h>
|
||||
int main(void)
|
||||
{
|
||||
printf("Hello, world!\n");
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
#### Perl
|
||||
|
||||
```perl
|
||||
print "Hello, world!";
|
||||
```
|
||||
|
||||
#### Python
|
||||
|
||||
```py
|
||||
print "Hello, world!"
|
||||
```
|
||||
|
||||
#### R
|
||||
|
||||
```r
|
||||
cat('Hello, world!')
|
||||
```
|
||||
|
||||
#### Ruby
|
||||
|
||||
```rb
|
||||
puts "Hello, world!"
|
||||
```
|
||||
|
||||
#### Scala
|
||||
|
||||
```scala
|
||||
object HelloWorld extends App {
|
||||
println("Hello, world!")
|
||||
}
|
||||
```
|
||||
|
||||
#### Scheme
|
||||
|
||||
```scheme
|
||||
(display "Hello, world!")
|
||||
```
|
||||
|
||||
#### Smalltalk
|
||||
|
||||
```smalltalk
|
||||
Transcript show: 'Hello, world!'.
|
||||
```
|
||||
|
||||
## Form Elements
|
||||
|
||||
Forms can be used when you wish to collect data from users. The `fieldset` element enables you to group related fields within a form, and each one should contain a corresponding `legend`. The `label` element ensures field descriptions are associated with their corresponding form widgets.
|
||||
|
||||
<form action="#">
|
||||
<div class="form-group">
|
||||
<label for="text">Text <abbr title="Required">*</abbr></label>
|
||||
<input class="form-control" type="text" id="text" required="required" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="textph">Text with placeholder</label>
|
||||
<input class="form-control" type="text" id="textph" placeholder="Placeholder" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input class="form-control" type="password" id="password" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input class="form-control" type="email" id="email" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="url">URL</label>
|
||||
<input class="form-control" type="url" id="url" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="number">Number</label>
|
||||
<input class="form-control" type="number" id="number"
|
||||
min="0" max="10" step="2" value="10" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="range">Range</label>
|
||||
<input class="form-control" type="number" id="range"
|
||||
min="0" max="10" step="2" value="10" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="date">Date</label>
|
||||
<input class="form-control" type="date" id="date" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="datetime">Date + Time</label>
|
||||
<input class="form-control" type="datetime" id="datetime" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="search">Search</label>
|
||||
<input class="form-control" type="search" id="search" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="searchph">Search with placeholder</label>
|
||||
<input class="form-control" type="search" id="searchph" placeholder="Placeholder" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="color">Color</label>
|
||||
<input class="form-control" type="color" id="color" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="textarea">Textarea</label>
|
||||
<textarea class="form-control" id="textarea" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="textareaph">Textarea with placeholder</label>
|
||||
<textarea class="form-control" id="textareaph" rows="3" placeholder="Placeholder"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="select">Select</label>
|
||||
<select class="form-control" id="select">
|
||||
<optgroup label="Option Group One">
|
||||
<option>Option One</option>
|
||||
<option>Option Two</option>
|
||||
<option>Option Three</option>
|
||||
</optgroup>
|
||||
<optgroup label="Option Group Two">
|
||||
<option>Option Four</option>
|
||||
<option>Option Five</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button class="btn btn-primary" type="submit">Post Comment</button>
|
||||
<button class="btn">Preview</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
## Patterns
|
||||
|
||||
Design and mark-up patterns unique to this site.
|
||||
|
||||
### Alerts
|
||||
|
||||
<div class="alert alert-info">
|
||||
<p>I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised <a href="#">more than he could</a> deliver. Why not indeed! We're rescuing ya.</p>
|
||||
<p>Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success">
|
||||
<p>I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised <a href="#">more than he could</a> deliver. Why not indeed! We're rescuing ya.</p>
|
||||
<p>Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-error">
|
||||
<p>I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised <a href="#">more than he could</a> deliver. Why not indeed! We're rescuing ya.</p>
|
||||
<p>Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?</p>
|
||||
</div>
|
||||
|
||||
### Pagination
|
||||
|
||||
<nav class="paginator">
|
||||
<a class="paginator__link" href="/">
|
||||
<svg class="icon icon-chevron-left">
|
||||
<use xlink:href="/assets/img/sprite.svg#chevron-left"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/" class="paginator__link">1</a>
|
||||
<a href="#" class="paginator__link active">2</a>
|
||||
<a class="paginator__link" href="/page/3">3</a>
|
||||
<a class="paginator__link" href="/page/4">4</a>
|
||||
<a class="paginator__link" href="/page/5">5</a>
|
||||
<a class="paginator__link" href="/page/6">6</a>
|
||||
<a class="paginator__link" href="/page/7">7</a>
|
||||
<a class="paginator__link" href="/page/8">8</a>
|
||||
<a class="paginator__link" href="/page/9">9</a>
|
||||
<a class="paginator__link" href="/page/10">10</a>
|
||||
<a class="paginator__link" href="/page/11">11</a>
|
||||
<a class="paginator__link" href="/page/12">12</a>
|
||||
<a class="paginator__link" href="/page/3">
|
||||
<svg class="icon icon-chevron-right">
|
||||
<use xlink:href="/assets/img/sprite.svg#chevron-right"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</nav>
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Beaucarnea leafs
|
||||
image: img_1820-Version-4.jpg
|
||||
image: ../media/img_1820-Version-4.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2005-07-26 11:44:49+00:00
|
||||
wordpress_id: 1982
|
||||
|
||||
categories:
|
||||
- photos
|
||||
---
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Snail on a leaf
|
||||
image: schnecke_blatt.jpg
|
||||
image: ../media/schnecke_blatt.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2005-08-02 11:39:04+00:00
|
||||
wordpress_id: 1973
|
||||
|
||||
categories:
|
||||
- photos
|
||||
---
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Electricity
|
||||
image: MG_5885_2006-7-23.jpg
|
||||
image: ../media/MG_5885_2006-7-23.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2006-07-23 11:36:28+00:00
|
||||
wordpress_id: 1970
|
||||
|
||||
categories:
|
||||
- photos
|
||||
---
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Floating Sky
|
||||
image: floating-sky-1.jpg
|
||||
image: ../media/floating-sky-1.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2006-07-23 11:32:14+00:00
|
||||
wordpress_id: 1964
|
||||
|
||||
categories:
|
||||
- photos
|
||||
---
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: New Berlin Bridge
|
||||
image: berliner_bruecke1-HDR-16bit.jpg
|
||||
image: ../media/berliner_bruecke1-HDR-16bit.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2006-08-21 11:22:34+00:00
|
||||
wordpress_id: 1958
|
||||
|
||||
categories:
|
||||
- photos
|
||||
---
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Wooden Windmill
|
||||
image: muehle_suhlendorf_HDR_Tonemapped_16bit.jpg
|
||||
image: ../media/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2006-09-16 11:47:16+00:00
|
||||
wordpress_id: 1985
|
||||
|
||||
categories:
|
||||
- photos
|
||||
---
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: German Chancellery
|
||||
image: bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg
|
||||
image: ../media/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
|
||||
---
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: MacBook abstract
|
||||
image: MG_9313_2007-02-10.jpg
|
||||
image: ../media/MG_9313_2007-02-10.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2007-02-10 12:34:39+00:00
|
||||
wordpress_id: 1967
|
||||
|
||||
categories:
|
||||
- photos
|
||||
---
|
||||
|
||||
@ -5,7 +5,7 @@ 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
|
||||
tags:
|
||||
|
||||
@ -3,13 +3,12 @@ layout: post
|
||||
title: Finally... a universal scanner driver for the Canon CanoScan LiDE 500F for Intel Macs
|
||||
author: Matthias Kretschmann
|
||||
date: 2007-06-11 18:44:28+00:00
|
||||
wordpress_id: 1563
|
||||
|
||||
category: photography
|
||||
tags:
|
||||
- tutorial
|
||||
- osx
|
||||
- macos
|
||||
published: true
|
||||
|
||||
redirect_from:
|
||||
- /2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/
|
||||
@ -24,25 +23,22 @@ So there were two choices for using the scanner on an Intel-Mac: installing the
|
||||
|
||||
So I called the Canon Support two months ago but they could only say sorry and advertise for their new scanner LiDE 600f which has a new Universal-driver and so on. But it hasn't really any new functions. And spending 100$ or so just for a new driver? So what??! They really wanted me to replace my scanner, which isn't a year old. Damn Canon-Support! So I had to keep on searching on all Canon-websites and finally...
|
||||
|
||||
|
||||
|
||||
# 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:
|
||||
[http://www.canon-asia.com/index.jsp?fuseaction=support∏_type=scanner&country;=SG](http://www.canon-asia.com/index.jsp?fuseaction=support&prod_type=scanner&country=SG)
|
||||
|
||||
After choosing the scanner in the dropdown-menu and clicking on "Drivers & Software" you will come to a popup-window where you can find the driver called "LiDE 500F Scanner Driver Ver. 11.2.4.0X (Mac OS X)" in the middle of the site:
|
||||
|
||||
|
||||
|
||||
|
||||
And after installing (and rebooting the system) you can use the scanner with Photoshop CS3 on Intel-Macs. The scanner appears in Photoshop under File > Import > CanoScan LiDE 500f.
|
||||
|
||||
|
||||
|
||||
|
||||
And don't forget to take a look in the preferences-dialog in the scan-window to set your color-management under the tab "Color Settings"
|
||||
And don't forget to take a look in the preferences-dialog in the scan-window to set your color-management under the tab "Color Settings"
|
||||
|
||||
Another important setting is enabling 16bit per channel scanning under the tab "Scan".
|
||||
Another important setting is enabling 16bit per channel scanning under the tab "Scan".
|
||||
|
||||
The only problem that remains is that Photoshop really uses 50% of my CPU-Power (2GHz Intel Core2Duo) just when the scan-window is open. But now after six months of waiting i can finally scan my analog photography in acceptable quality. Thanks to Canon for nothing!
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ title: How to quickly generate encrypted .htpasswd passwords
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-02-26 23:24:17+00:00
|
||||
wordpress_id: 12
|
||||
|
||||
category: design
|
||||
tags:
|
||||
- tutorial
|
||||
|
||||
@ -5,7 +5,7 @@ title: Launch of kremalicious.com
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-03-30 19:24:21+00:00
|
||||
wordpress_id: 14
|
||||
|
||||
categories:
|
||||
- personal
|
||||
tags:
|
||||
|
||||
@ -5,12 +5,12 @@ title: Love the parallax
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-03-31 20:54:45+00:00
|
||||
wordpress_id: 15
|
||||
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
|
||||
If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh?
|
||||
If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh?
|
||||
|
||||
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/)
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ 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
|
||||
---
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
---
|
||||
layout: post
|
||||
title: Aperture File Types
|
||||
image: "Teaser-Aperture-File-Types.jpg"
|
||||
download: aperturefiletypes_by_kremalicious.zip
|
||||
image: ../media/Teaser-Aperture-File-Types.jpg
|
||||
download: ../media/aperturefiletypes_by_kremalicious.zip
|
||||
author: Matthias Kretschmann
|
||||
date: 2008-04-04T01:55:54.000Z
|
||||
wordpress_id: 21
|
||||
|
||||
category: goodies
|
||||
coinhive: true
|
||||
tags:
|
||||
@ -19,9 +19,9 @@ redirect_from:
|
||||
|
||||
These icons are free for your personal use and include icons for all file types Apple’s Aperture 2.0 can handle (.jpeg, .gif, .tiff, .png, .pdf, .psd, .arw, .cr2, .crw, .mos, .nef, .raf, .raw, .srw, .tif, .oly, .fff, .3fr, .dng, .mrw, .pef, .srf, .orf).
|
||||
|
||||
* Mac + Win + Linux + iContainer
|
||||
* Leopard ready (512×512)
|
||||
* custom 32px and 16px icons
|
||||
- Mac + Win + Linux + iContainer
|
||||
- Leopard ready (512×512)
|
||||
- custom 32px and 16px icons
|
||||
|
||||
Get them from [the goodies-page](http://www.kremalicious.com/goodies/) and have fun.
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ title: London police afraid of photographers
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-04 19:01:09+00:00
|
||||
wordpress_id: 25
|
||||
|
||||
categories:
|
||||
- photography
|
||||
---
|
||||
|
||||
> 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:
|
||||
[At Agentur Ahron](http://www.agentur-ahron.de/bild_db/details.php?image_id=552)
|
||||
|
||||
@ -6,7 +6,7 @@ linkurl: http://www.smashingmagazine.com/2008/04/04/mac-os-x-leopard-designers-g
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-04 10:47:23+00:00
|
||||
wordpress_id: 22
|
||||
|
||||
category: design
|
||||
tags:
|
||||
- osx
|
||||
|
||||
@ -6,7 +6,7 @@ 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
|
||||
tags:
|
||||
|
||||
@ -5,12 +5,12 @@ 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
|
||||
---
|
||||
|
||||
The Columbia University has announced the winners for 2008 of the 92nd annual Pulitzer Price. The Pulitzer Price itself is often cited as the highest honor for american journalists. Among the various categories there are two winning entries for [Breaking News Photography](http://www.pulitzer.org/year/2008/breaking-news-photography) and [Feature Photography](http://www.pulitzer.org/year/2008/feature-photography).
|
||||
The Columbia University has announced the winners for 2008 of the 92nd annual Pulitzer Price. The Pulitzer Price itself is often cited as the highest honor for american journalists. Among the various categories there are two winning entries for [Breaking News Photography](http://www.pulitzer.org/year/2008/breaking-news-photography) and [Feature Photography](http://www.pulitzer.org/year/2008/feature-photography).
|
||||
|
||||
In the Breaking News Photography the price was won by Adrees Latif of Reuters [for his picture of the japanese videographer Kenji Nagai shot down during riots in Myanmar in 2007](http://www.pulitzer.org/year/2008/breaking-news-photography/works/).
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ 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
|
||||
|
||||
category: design
|
||||
coinhive: true
|
||||
tags:
|
||||
@ -15,32 +15,32 @@ tags:
|
||||
- icon
|
||||
---
|
||||
|
||||
[](/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.
|
||||
[](../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.
|
||||
[](../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.
|
||||
|
||||
You can just rename the desired icons from my icon pack in icns-format and replace them in the contents > resources of Preview.app.
|
||||
|
||||
|
||||
|
||||
|
||||
But, as you can see, Preview doesn’t have an unique icon for all RAW file types. Instead it uses just a generic RAW-icon named RAW.icns.
|
||||
|
||||
[](/media/raw.png)So here’s what you can do: Grab your desired RAW-file icon from my icon package in icns-format. Rename it as RAW.icns. Copy it over to Preview.app > Contents > Resources and overwrite the standard icon. Making a backup copy of Preview.app before doing that is a wise thing here.
|
||||
[](../media/raw.png)So here’s what you can do: Grab your desired RAW-file icon from my icon package in icns-format. Rename it as RAW.icns. Copy it over to Preview.app > Contents > Resources and overwrite the standard icon. Making a backup copy of Preview.app before doing that is a wise thing here.
|
||||
|
||||
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.
|
||||
[](../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.
|
||||
|
||||
|
||||
|
||||
|
||||
Hope this helps you although it's very tricky. But changing icons for images in Mac OS X is a bit out of my control since i don't develop Mac OS X.
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ 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
|
||||
---
|
||||
|
||||
@ -6,7 +6,7 @@ linkurl: http://blogs.reuters.com/photographers-blog/2008/04/07/the-story-behind
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-10 13:16:47+00:00
|
||||
wordpress_id: 34
|
||||
|
||||
categories:
|
||||
- photography
|
||||
---
|
||||
|
||||
@ -6,12 +6,12 @@ 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
|
||||
---
|
||||
|
||||
[](/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?
|
||||
[](../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/node/40875) that
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ title: New automation helper for Apple's Aperture released
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-14 13:51:39+00:00
|
||||
wordpress_id: 37
|
||||
|
||||
category: photography
|
||||
coinhive: true
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
Panoramic photographer [Ian Wood](http://www.ianjameswood.co.uk/) has released an automation helper for Apple's Aperture called [Aperture Assistant](http://aperture-assistant.com) as a first beta version (build 49). Aperture Assistent allows you to setup and automate complex tasks for Apple's Aperture beyond the Apple delivered Automator actions in Mac OS X. The setup of these workflows is as easy as dragging around visual flowcharts.
|
||||
Panoramic photographer [Ian Wood](http://www.ianjameswood.co.uk/) has released an automation helper for Apple's Aperture called [Aperture Assistant](http://aperture-assistant.com) as a first beta version (build 49). Aperture Assistent allows you to setup and automate complex tasks for Apple's Aperture beyond the Apple delivered Automator actions in Mac OS X. The setup of these workflows is as easy as dragging around visual flowcharts.
|
||||
|
||||
Although the interface looks and feels a bit buggy (dude, it's a beta!) it looks very promising.
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ title: WebKit team introduces CSS-based gradients
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-15 17:36:34+00:00
|
||||
wordpress_id: 38
|
||||
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
- css
|
||||
---
|
||||
|
||||
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:
|
||||
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.
|
||||
|
||||
|
||||
@ -4,8 +4,8 @@ layout: post
|
||||
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
|
||||
date: "2008-04-17 01:32:13+00:00"
|
||||
|
||||
category: design
|
||||
tags:
|
||||
- css
|
||||
@ -17,7 +17,7 @@ redirect_from:
|
||||
- /2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
|
||||
---
|
||||
|
||||
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,30 +25,28 @@ This article describes how text-shadow works, what you can do with it and which
|
||||
|
||||
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
|
||||
7. More articles and resources
|
||||
|
||||
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
|
||||
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.
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
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.
|
||||
@ -57,12 +55,9 @@ But with Safari 3.1, the beta release of Opera 9.5, Firefox 3.1 and Google Chrom
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
@ -70,24 +65,22 @@ One cross-browser trick would be to use conditional tags and serve Internet Expl
|
||||
|
||||
Now that you're aware of it's compatibility with the various browsers we can take a look at the syntax of the text-shadow property.
|
||||
|
||||
|
||||
|
||||
## 4. How does it work and how to use it
|
||||
|
||||
|
||||
|
||||
When defined in a css-stylesheet the property syntax should look like this:
|
||||
|
||||
```css
|
||||
p { text-shadow: 1px 1px 1px #000; }
|
||||
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:
|
||||
|
||||
1. value = The X-ccordinate
|
||||
2. value = The Y-coordinate
|
||||
3. value = The blur radius
|
||||
4. value = The color of the shadow
|
||||
1. value = The X-ccordinate
|
||||
2. value = The Y-coordinate
|
||||
3. value = The blur radius
|
||||
4. value = The color of the shadow
|
||||
|
||||
Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontically (first value) and placing the shadow below the text vertically (second value).
|
||||
|
||||
@ -96,7 +89,9 @@ 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); }
|
||||
p {
|
||||
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.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.
|
||||
@ -105,12 +100,8 @@ Of course the effects done by this property often depend on the colors of your t
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
## 5.1 Simple drop shadow
|
||||
|
||||
|
||||
|
||||
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
|
||||
@ -121,7 +112,7 @@ 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:
|
||||
|
||||
@ -133,7 +124,7 @@ 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:
|
||||
|
||||
@ -147,7 +138,7 @@ text-shadow: 2px -2px 3px #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:
|
||||
|
||||
@ -161,7 +152,7 @@ text-shadow: 2px 2px 2px #ff3300;
|
||||
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)
|
||||
|
||||
@ -177,7 +168,7 @@ text-shadow: 0px 1px 1px #fff;
|
||||
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:
|
||||
|
||||
@ -191,7 +182,7 @@ text-shadow: 0px 1px 0px #ccc;
|
||||
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:
|
||||
|
||||
@ -205,7 +196,7 @@ text-shadow: 0px 1px 1px #000;
|
||||
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
|
||||
|
||||
@ -221,7 +212,7 @@ text-shadow: 1px 1px 6px #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:
|
||||
|
||||
@ -235,7 +226,7 @@ text-shadow: 0px 0px 3px #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...:
|
||||
|
||||
@ -249,7 +240,7 @@ text-shadow: 1px 1px 4px #fff;
|
||||
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:
|
||||
|
||||
@ -263,7 +254,7 @@ text-shadow: 1px 1px 4px#000;
|
||||
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 Duplicate your text
|
||||
|
||||
@ -279,7 +270,7 @@ text-shadow: 0px 20px #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
|
||||
|
||||
@ -288,22 +279,23 @@ Sadly Safari 3 isn't able to render more than one shadow on one element. It just
|
||||
```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;
|
||||
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)
|
||||
[](../media/text-shadow-hack.png)
|
||||
|
||||
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)
|
||||
[](../media/text-shadow-hack.png)
|
||||
|
||||
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.
|
||||
|
||||
@ -324,29 +316,29 @@ But fear not. Rogie King already came up with a solution for this which you can
|
||||
|
||||
## 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
|
||||
- [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
|
||||
- [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)
|
||||
- [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
|
||||
- [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
|
||||
- [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.
|
||||
- [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
|
||||
- [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
|
||||
- [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
|
||||
- [CSS3 preview on css3.info](http://www.css3.info/preview/)
|
||||
"Everything you need to know about CSS3" - get excited before CSS3 becomes final
|
||||
|
||||
@ -5,13 +5,13 @@ 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
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
Just right after [Tiffen and Digital Film Tools announced](http://www.kremalicious.com/2008/04/first-aperture-adjustment-plugins-have-arrived/) their new image editing plugins for Aperture 2.1 Apple has released the Software Development Kit (SDK) for coding Aperture 2.1 plugins. It's available [from Apple's Developer Connection](https://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wa/getSoftware?bundleID=20044) for registered members (registering is free). You can grab the Aperture 2.1 plugin-SDK (3D9) as a 595KB download from there and start coding. If you want to know what exactly you can do with it as a programmer you should [read those lines from Apple](http://developer.apple.com/appleapplications/aperturesdk.html).
|
||||
Just right after [Tiffen and Digital Film Tools announced](http://www.kremalicious.com/2008/04/first-aperture-adjustment-plugins-have-arrived/) their new image editing plugins for Aperture 2.1 Apple has released the Software Development Kit (SDK) for coding Aperture 2.1 plugins. It's available [from Apple's Developer Connection](https://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wa/getSoftware?bundleID=20044) for registered members (registering is free). You can grab the Aperture 2.1 plugin-SDK (3D9) as a 595KB download from there and start coding. If you want to know what exactly you can do with it as a programmer you should [read those lines from Apple](http://developer.apple.com/appleapplications/aperturesdk.html).
|
||||
|
||||
So it should be just a matter of time before we see another bunch of plugins popping out.
|
||||
|
||||
@ -5,7 +5,7 @@ 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
|
||||
|
||||
@ -13,7 +13,7 @@ tags:
|
||||
- css
|
||||
---
|
||||
|
||||
They won't stop with their cutting edge love. After having [text-shadow](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/) implemented since many years and having a bunch of other cool stuff implemented like CSS gradients or CSS box-shadow the WebKit team freshly announced a new cool feature: CSS alpha masks.
|
||||
They won't stop with their cutting edge love. After having [text-shadow](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/) implemented since many years and having a bunch of other cool stuff implemented like CSS gradients or CSS box-shadow the WebKit team freshly announced a new cool feature: CSS alpha masks.
|
||||
|
||||
From the Surfin' Safari Blog:
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-04 16:04:48+00:00
|
||||
|
||||
wordpress_id: 45
|
||||
|
||||
category: photography
|
||||
coinhive: true
|
||||
tags:
|
||||
@ -15,7 +15,7 @@ tags:
|
||||
- macos
|
||||
---
|
||||
|
||||
A while ago I [wrote about my problems](http://www.kremalicious.com/2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/) finding a universal scanner driver from Canon for my CanoScan LiDE 500F to use it under Mac OS X. The solution was the Canon Asia website where a universal driver version was available. But since then Apple released Mac OS X 10.5 Leopard in october 2007 and the Canon driver with the version 11.2.4.0X stopped working on this new operating system.
|
||||
A while ago I [wrote about my problems](http://www.kremalicious.com/2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/) finding a universal scanner driver from Canon for my CanoScan LiDE 500F to use it under Mac OS X. The solution was the Canon Asia website where a universal driver version was available. But since then Apple released Mac OS X 10.5 Leopard in october 2007 and the Canon driver with the version 11.2.4.0X stopped working on this new operating system.
|
||||
|
||||
# Finding and downloading the new driver 11.2.5.0X
|
||||
|
||||
@ -28,7 +28,7 @@ The changelog says:
|
||||
|
||||
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.
|
||||
|
||||
[](/media/canondrivercontents.png)You will get a file named lide500fosx11250en.dmg in your downloads folder. Just mount it and double click the package installer inside of the image. If you have a previous version of the driver installed you should remove all parts of it from the system and make a restart to avoid any problems. You can follow my screenshot on the right which shows the contents of the installer package to find all components on your system.
|
||||
[](../media/canondrivercontents.png)You will get a file named lide500fosx11250en.dmg in your downloads folder. Just mount it and double click the package installer inside of the image. If you have a previous version of the driver installed you should remove all parts of it from the system and make a restart to avoid any problems. You can follow my screenshot on the right which shows the contents of the installer package to find all components on your system.
|
||||
|
||||
After the installation is finished you have to restart your Mac (very Mac-unlike) because the package installed a new Kernel extention.
|
||||
|
||||
@ -40,22 +40,22 @@ After a restart you should be able to use the scanner as a TWAIN device all over
|
||||
## 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).
|
||||
[](../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.
|
||||
[](../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/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.
|
||||
[](../media/scangear_color.png)Under the Color Settings tab you should set your preferred color management options.
|
||||
|
||||
Under the Scan tab you should enable 48/16 bit Output to enable scanning your images with a depth of 16 bit just like the RAW images from your dslr or digital camera. Click OK to save your preferences.
|
||||
|
||||
@ -63,6 +63,6 @@ Another task you should do before scanning the first time with this driver is ca
|
||||
|
||||
Now you can set your scanning preferences and start scanning into Photoshop. Don't forget to chose Color(48Bit) in the Color Mode dropdown menu for 16 bit scanning.
|
||||
|
||||
|
||||
|
||||
|
||||
The advantage of this last workflow with Photoshop and ScanGear is more control over the scanner and therefore more control of the way your images will look right after the scan. If you want simplicity do it the OSX way by using Preview/Image Capture and simply automate it with Automator to serve your scanned images to your preferred application.
|
||||
|
||||
@ -5,7 +5,7 @@ title: Scan images directly into Apple Aperture
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-05 04:15:11+00:00
|
||||
wordpress_id: 46
|
||||
|
||||
category: photography
|
||||
coinhive: true
|
||||
tags:
|
||||
@ -15,24 +15,24 @@ tags:
|
||||
- macos
|
||||
---
|
||||
|
||||
Wouldn't that be great? Hook up your scanner, fire up Aperture, click on Import and the images coming directly from your scanner plate? Although my scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. But using Preview/Image Capture and Automator you can bypass this limitation. So here's what you can do to scan directly into Aperture in 3 simple steps.
|
||||
Wouldn't that be great? Hook up your scanner, fire up Aperture, click on Import and the images coming directly from your scanner plate? Although my scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. But using Preview/Image Capture and Automator you can bypass this limitation. So here's what you can do to scan directly into Aperture in 3 simple steps.
|
||||
|
||||
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).
|
||||
|
||||
# 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.
|
||||
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.
|
||||
|
||||
To make it a bit cooler we can assign one or more keywords to our scanned images automatically. Just drag and drop the "Assign keywords to images" action and add a keyword like "Scan" or something like that. Finally we can set some usual IPTC-tags with the "Set IPTC Tags" action. In the end you should have something like this (click to zoom):
|
||||
|
||||
[](/media/apertureimport_automator.png)
|
||||
[](../media/apertureimport_automator.png)
|
||||
|
||||
# 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.
|
||||
[](../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
|
||||
|
||||
[](/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.
|
||||
[](../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.
|
||||
|
||||
Just be creative with Automator. You can set up a lot of workflows for every thinkable scanning task and you can even backup your scanned images before or after importing them to Aperture by copying them into a new burn folder or make an archive from them which also could be automatically saved to a web server and so on...
|
||||
|
||||
@ -3,10 +3,10 @@ layout: post
|
||||
|
||||
title: 'HowTo: Use high-quality watermarks in your images with Aperture 2.1'
|
||||
author: Matthias Kretschmann
|
||||
image: watermark_aperture.jpg
|
||||
image: ../media/watermark_aperture.jpg
|
||||
|
||||
date: 2008-05-07 03:27:25+00:00
|
||||
wordpress_id: 48
|
||||
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
@ -23,42 +23,40 @@ Since version 1.0 Aperture is able to render images on export with a graphic ove
|
||||
|
||||
The steps for this magic involves 4 simple steps:
|
||||
|
||||
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
|
||||
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
|
||||
|
||||
|
||||
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.
|
||||
|
||||
To illustrate the process I will use a picture taken by me. Create a new layer on top of the background layer and call it "watermark" or anything you like.
|
||||
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
|
||||
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):
|
||||
|
||||
|
||||
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
|
||||
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:
|
||||
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:
|
||||
|
||||
|
||||
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
@ -74,37 +72,27 @@ If you want to have full control and the highest quality you should repeat the a
|
||||
|
||||
Now you can close Photoshop or let it open if you have enough RAM.
|
||||
|
||||
|
||||
|
||||
## 3. Define the watermark image inside an export preset
|
||||
|
||||
|
||||
|
||||
Now we're going to make the watermark image part of an export preset inside Aperture. Open up Aperture and chose Aperture > Presets > Image Export from the menubar. In the Export Presets dialogue add a new preset by clicking on the little plus sign at the bottom left of the dialogue and give it a name:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Now adjust your desired values before the "Show Watermark" part at the right. After you've finished click on the checkbox beside "Show Watermark" to activate watermarks for this export preset. For our example we will set the position of the image to Lower Right. Either drag your freshly created watermark.psd onto the drop field or chose it via Aperture's file inspector by clicking on the Choose Image button. The watermark image is automatically copied over to the Library folder of the user under /Application Support/Aperture/WatermarkImages. Just keep that in mind when you want to update your watermark images.
|
||||
|
||||
|
||||
|
||||
As said before you can adjust the opacity of your watermark image but since we have included some different transparencies in our file we have to set it to an opacity of 1,0.
|
||||
|
||||
Finally you can activate the "Scale watermark" checkbox if you want to use your big sized watermark image once and let Aperture scale it down for you. If you have created different sized watermark images you want to leave this deactivated and create a unique export preset for every size you want to export to. In this example we end up with those values:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
If you're done just click OK and select an image you want to export. Select File > Export > Versions from the menubar or press shift + command + e. In the Aperture file dialogue chose your destination and select your freshly created preset from the Export Preset dropdown menu and click OK.
|
||||
|
||||
|
||||
|
||||
|
||||
Your image is rendered in the background and you should end up with something like this. Click on it to zoom to the full sized version or open the link to the full image in a new browser window. (the full view image is scaled down with a 1024x1024px preset):
|
||||
|
||||
|
||||
|
||||
|
||||
You can also have a look at the psd file by downloading it here:
|
||||
|
||||
@ -116,11 +104,11 @@ Here are some quick examples by me:
|
||||
|
||||
You can be a bit more subtle:
|
||||
|
||||
|
||||
|
||||
|
||||
Or use a subtle colorful spectrum:
|
||||
|
||||
|
||||
|
||||
|
||||
## 4. Make even more...
|
||||
|
||||
@ -130,7 +118,7 @@ Just create a watermark image which has exactly the same size as your exported i
|
||||
|
||||
And maybe you end up with something like this grunge old look just done with the watermark feature of Aperture:
|
||||
|
||||
|
||||
|
||||
|
||||
And that's it. Hope this article helped you mastering the watermark feature of Aperture.
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ 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
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
Today [Nik Software](http://www.niksoftware.com) announced the availability of it's U-point-technology based editing plugin for Apple's Aperture 2.1 called [Viveza](http://www.niksoftware.com/viveza).
|
||||
Today [Nik Software](http://www.niksoftware.com) announced the availability of it's U-point-technology based editing plugin for Apple's Aperture 2.1 called [Viveza](http://www.niksoftware.com/viveza).
|
||||
|
||||
With Viveza photographers are able to select areas from their images and adjust them separately from the rest of the picture by defining so called Color Control Points.
|
||||
|
||||
|
||||
@ -3,10 +3,10 @@ layout: post
|
||||
|
||||
title: The 15 best new features of Aperture 2
|
||||
author: Matthias Kretschmann
|
||||
image: aperture15_7.png
|
||||
image: ../media/aperture15_7.png
|
||||
|
||||
date: 2008-05-07 19:22:49+00:00
|
||||
wordpress_id: 50
|
||||
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
@ -19,7 +19,7 @@ There are already some lists like this available on the web and they are always
|
||||
|
||||
# 15. The "New" toolbar icon
|
||||
|
||||
[](/media/aperture15_1.png)
|
||||
[](../media/aperture15_1.png)
|
||||
|
||||
A handy dropdown icon with the most common create tasks you can do in Aperture 2. This causes Aperture 2 to have a delightful clean toolbar by default.
|
||||
|
||||
@ -27,31 +27,31 @@ A handy dropdown icon with the most common create tasks you can do in Aperture 2
|
||||
|
||||
# 14. Skimming through your projects
|
||||
|
||||
[](/media/aperture15_2.png)
|
||||
[](../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
|
||||
|
||||
[](/media/aperture15_3.png)
|
||||
[](../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
|
||||
|
||||
[](/media/aperture15_4.png)
|
||||
[](../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
|
||||
|
||||
[](/media/aperture15_5.png)
|
||||
[](../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
|
||||
|
||||
[](/media/aperture15_6.png)
|
||||
[](../media/aperture15_6.png)
|
||||
|
||||
The photobook layout capabilities of Aperture became much powerful with version 2. Now you can create your own book templates where you have much freedom for lay-outing it. In fact you have a powerful Desktop Publishing Program built right into Aperture. Be sure to listen to the [Inside Aperture Podcast about the book layout tool in Aperture](http://digitalmedia.oreilly.com/2008/05/06/aperture-layout-application-schorr.html).
|
||||
|
||||
@ -59,7 +59,7 @@ The photobook layout capabilities of Aperture became much powerful with version
|
||||
|
||||
# 9. The V- and W-cycle
|
||||
|
||||
[](/media/aperture15_8.png)
|
||||
[](../media/aperture15_8.png)
|
||||
|
||||
By pressing V on your keyboard you can quickly cycle through different viewer modes. In previous versions of Aperture the V-key just showed/hid the big viewer.
|
||||
|
||||
@ -69,49 +69,49 @@ By pressing W on your keyboard you can cycle through the tabbed Inspector on the
|
||||
|
||||
# 8. The tabbed Inspector/HUD
|
||||
|
||||
[](/media/aperture15_7.png)
|
||||
[](../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
|
||||
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
[](/media/aperture15_11.png)
|
||||
[](../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
|
||||
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
[](/media/aperture15_13.png)
|
||||
[](../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
|
||||
|
||||
[](/media/aperture15_14.jpg)
|
||||
[](../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
|
||||
|
||||
[](/media/raw20.png)
|
||||
[](../media/raw20.png)
|
||||
|
||||
The best new feature to me just because the whole purpose of Aperture should be producing the best looking images from your RAW files. While the first RAW 1.0 often rendered terrible pictures, the RAW 1.1 algorithm did it a lot better. But now we have a massive improvement to the RAW 1.1 algorithm with crisp highlights and more details in dark areas with less chromatic aberration by default. To me Aperture is now close and sometimes better than the quality of PhaseOne or CameraRAW. Of course Aperture 2 leaves all your old adjustments made in previous versions of Aperture alone and you can optionally migrate them all at once or separately.
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ title: The Iconfactory presents beautiful Indiana Jones desktop icons
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-08 15:47:48+00:00
|
||||
wordpress_id: 51
|
||||
|
||||
category: design
|
||||
tags:
|
||||
- icon
|
||||
---
|
||||
|
||||
[](http://iconfactory.com/indianajones/)If you enjoyed the Indiana Jones movies than this first of four desktop icon sets is a must have for you. Icon Designer [Anthony Piraino](http://onebuttonmouse.com/) crafted some beautiful items from Indiana Jones and The Raiders of the Lost Ark movie.
|
||||
[](http://iconfactory.com/indianajones/)If you enjoyed the Indiana Jones movies than this first of four desktop icon sets is a must have for you. Icon Designer [Anthony Piraino](http://onebuttonmouse.com/) crafted some beautiful items from Indiana Jones and The Raiders of the Lost Ark movie.
|
||||
|
||||
The icons are available from the [special Iconfactory site](http://iconfactory.com/indianajones/) as an icontainer or mac and windows icon files. If you download the iContainer for use in [Candybar](http://www.panic.com/candybar/) you also get a new Mac OS X dock created by [David Lanham](http://dlanham.com/). All icons are free for your personal use only and there are already some nice placeholders for more icon sets inspired by the other movies. All of them will be released during May.
|
||||
|
||||
[](/media/indianajones_dock.png)
|
||||
[](../media/indianajones_dock.png)
|
||||
|
||||
@ -5,7 +5,7 @@ title: Canon updates photographic software to work with Leopard
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-05-14 10:01:15+00:00
|
||||
wordpress_id: 53
|
||||
|
||||
category: photography
|
||||
---
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ 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
|
||||
tags:
|
||||
@ -14,7 +14,7 @@ tags:
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
# Dfx digital filters plugin from Tiffen
|
||||
|
||||
@ -22,7 +22,7 @@ coinhive: true
|
||||
|
||||
The first one is the [Dfx digital filters plug-in from Tiffen](http://www.tiffen.com/products.html?tablename=dfx) which was already available as an image editing plugin for Photoshop on Windows and Mac. It's an award winning set of [94 individual filters](http://www.tiffen.com/dfx_filter_effects_ig.html) for adjusting and altering your images in Aperture 2.1 and above.
|
||||
|
||||
[](/media/tiffen_aperture.jpg)
|
||||
[](../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.
|
||||
|
||||
@ -34,15 +34,15 @@ Digital Film Tools [released three plugins](http://www.digitalfilmtools.com/aper
|
||||
|
||||
[Power Stroke 1.0](http://www.digitalfilmtools.com/powerstroke/index.htm) is an image editing plugin for making targeted adjustments by intuitive handling with strokes. You can make multiple corrections and effects with one stroke such as color correction, recoloring or desaturation, colorization of black and white images, blur, fill light for dimly lit image areas and Diffusion/Glow.
|
||||
|
||||
[](/media/dft-powerstroke_uis.jpg)
|
||||
[](../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)
|
||||
[](../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)
|
||||
[](../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.
|
||||
@ -53,13 +53,13 @@ Nik Software [announced the availabilty of Viveza](http://www.niksoftware.com/vi
|
||||
|
||||
On May 7, 2008, Nik finally [shipped Viveza as the first availailabe plugin for Aperture 2.1](http://www.kremalicious.com/2008/05/nik-ships-viveza-as-the-first-available-aperture-editing-plugin/). You can grab a [15-day trial version](http://www.niksoftware.com/site/cont_index.php?nav_top=367&cms_child=__demo&productId=257) of the plugin too.
|
||||
|
||||
[](/media/viveza_aperture_ui.jpg)
|
||||
[](../media/viveza_aperture_ui.jpg)
|
||||
|
||||
# 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)
|
||||
[](../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.
|
||||
|
||||
@ -67,15 +67,15 @@ The folks at dvGarage are also working on an Aperture plugin called HDRToner for
|
||||
|
||||
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)
|
||||
[](../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)
|
||||
[](../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)
|
||||
[](../media/imagestrends_shieoff.jpg)
|
||||
|
||||
# Picturecode Noise Ninja
|
||||
|
||||
@ -83,7 +83,7 @@ Well known for it's awesome noise reduction capabilities, Picturecode's [Noise N
|
||||
|
||||
According to Picturecode we can expect the plugin "sometimes next month" (June) and maybe there will be a beta version available before the final release. Definitely there will be a trial version of the plugin available from Picturecode's website.
|
||||
|
||||
[](/media/noiseninja.png)
|
||||
[](../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).
|
||||
|
||||
@ -91,11 +91,11 @@ You can have a first look at an early alpha version of the plugin running in Ape
|
||||
|
||||
[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
|
||||
|
||||
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.
|
||||
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/).
|
||||
|
||||
@ -103,7 +103,7 @@ You can read a first review of the beta plugin for Aperture [over at trick77.com
|
||||
|
||||
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)
|
||||
[](../media/apertureedit_interface.jpg)
|
||||
|
||||
# More information
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ 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
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
[](/media/imagetrends_hemi_10.jpg)Today Image Trends Inc. [announced](http://www.imagetrendsinc.com/news/Aperture%20Fisheye%20Hemi%20%20Final.pdf) the final availability of the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) as an editing plugin for Aperture 2.1. The plugin will remap your hemispheric images taken with a fisheye lens. So if you take pictures with a fisheye lens this plugin is a must have for you.
|
||||
[](../media/imagetrends_hemi_10.jpg)Today Image Trends Inc. [announced](http://www.imagetrendsinc.com/news/Aperture%20Fisheye%20Hemi%20%20Final.pdf) the final availability of the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) as an editing plugin for Aperture 2.1. The plugin will remap your hemispheric images taken with a fisheye lens. So if you take pictures with a fisheye lens this plugin is a must have for you.
|
||||
|
||||
From the press release:
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ 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
|
||||
tags:
|
||||
- css
|
||||
---
|
||||
|
||||
As you may know there's a nice parallax effect implemented on this website. Just resize your browser window and you can see the black polaroids in my header flying on different layers. As I stated in an [earlier post](http://www.kremalicious.com/2008/03/love-the-parallax/) there is already some usage for it around the web while this effect seems to be first used by the guys from [Silverback](http://www.silverbackapp.com/). If you don't know what this effect is about head over to [thinkvitamin](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/trackback/) to get to know what it is and how you can achieve it.
|
||||
As you may know there's a nice parallax effect implemented on this website. Just resize your browser window and you can see the black polaroids in my header flying on different layers. As I stated in an [earlier post](http://www.kremalicious.com/2008/03/love-the-parallax/) there is already some usage for it around the web while this effect seems to be first used by the guys from [Silverback](http://www.silverbackapp.com/). If you don't know what this effect is about head over to [thinkvitamin](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/trackback/) to get to know what it is and how you can achieve it.
|
||||
|
||||
But now Marco Kuiper from [marcofolio.net](http://www.marcofolio.net) adds another usage for it. He created a cool optical illusion with just plain css/html and some pictures. You can see a [demo of this effect](http://demo.marcofolio.net/a_parallax_illusion_with_css/) in action on Marco's website. Head over to the demo and resize your browser window. You should articulate something like "whoooot!" now. Marco has written [some words about it](http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html) too and you can download the demo. He has also [done a nice tutorial](http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html) how to achieve this optical illusion. Very cool!
|
||||
|
||||
|
||||
@ -3,10 +3,10 @@ layout: post
|
||||
|
||||
title: 'Showcasing the CSS Parallax Effect: 12+1 Creative Usages'
|
||||
author: Matthias Kretschmann
|
||||
image: parallax-visualization_big.png
|
||||
image: ../media/parallax-visualization_big.png
|
||||
|
||||
date: 2008-05-22 20:01:12+00:00
|
||||
wordpress_id: 59
|
||||
|
||||
categories:
|
||||
- design
|
||||
|
||||
@ -19,7 +19,7 @@ redirect_from:
|
||||
|
||||
Been so in love with the parallax effect that I have to post another article about it. 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.
|
||||
|
||||
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)).
|
||||
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.
|
||||
|
||||
@ -35,59 +35,49 @@ So here are the examples. Just start clicking, resizing and goggling!
|
||||
|
||||
The undeniable Kings of the Parallax, designed by Paul Annett. The Silverback guys made the effect so popular and inspired me too:
|
||||
|
||||
[](http://www.silverbackapp.com/)
|
||||
|
||||
[](http://www.silverbackapp.com/)
|
||||
|
||||
[Starry Night](http://css-tricks.com/examples/StarryNight/)
|
||||
|
||||
An example by Chris Coyier from css-tricks.com. This one works vertically too and he made a [tutorial out of it](http://css-tricks.com/3d-parralax-background-effect/):
|
||||
|
||||
[](http://css-tricks.com/examples/StarryNight/)
|
||||
|
||||
[](http://css-tricks.com/examples/StarryNight/)
|
||||
|
||||
[Percentage Backgrounds](http://www.sitepoint.com/examples/stretchy/test.php)
|
||||
|
||||
Probably the first css-based usage of this effect by Alex Walker over at Sitepoint. And probably the funniest one:
|
||||
|
||||
[](http://www.sitepoint.com/examples/stretchy/test.php)
|
||||
|
||||
[](http://www.sitepoint.com/examples/stretchy/test.php)
|
||||
|
||||
[The Horse in Motion](http://demo.marcofolio.net/a_parallax_illusion_with_css/)
|
||||
|
||||
Marco Kuiper created a cool optical illusion with just plain css/html and some pictures. Head over to the demo and resize your browser window. You should articulate something like "whoooot!" now. You can read [here how he made it](http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html).
|
||||
|
||||
[](http://demo.marcofolio.net/a_parallax_illusion_with_css/)
|
||||
|
||||
[](http://demo.marcofolio.net/a_parallax_illusion_with_css/)
|
||||
|
||||
[We all hate Quickbooks, Do You?](http://weallhatequickbooks.com/)
|
||||
|
||||
Nice fire parallax on this sort of aggregating website. It displays all Tweets with the word "quickbooks" in it:
|
||||
|
||||
[](http://weallhatequickbooks.com/)
|
||||
|
||||
[](http://weallhatequickbooks.com/)
|
||||
|
||||
[Dumago](http://dumago.net/)
|
||||
|
||||
More mysterious (Oh my god, what is it??) than the Silverback app and with frosty stars instead of jungle leaves:
|
||||
|
||||
[](http://dumago.net/)
|
||||
|
||||
[](http://dumago.net/)
|
||||
|
||||
[Dromaeo](http://dromaeo.com/)
|
||||
|
||||
Another funky name and a nice parallax too. This one uses little dinosaurs. Something like "Oh, so cute" or "How adorable!" should come to your mind:
|
||||
|
||||
[](http://dromaeo.com/)
|
||||
|
||||
[](http://dromaeo.com/)
|
||||
|
||||
[cdev.ru](http://www.cdev.ru/)
|
||||
|
||||
A russian site with an awesome making-webdesign-in-jungle parallax (thanks [egot](http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-104)!). They even have different parallax headers on every page. Just click through the top menu:
|
||||
|
||||
[](http://www.cdev.ru/)
|
||||
|
||||
|
||||
|
||||
[](http://www.cdev.ru/)
|
||||
|
||||
# More Scripts and Interaction, please
|
||||
|
||||
@ -97,64 +87,55 @@ All the showcased sites above need to be resized in the browser to see the effec
|
||||
|
||||
Very cool cloud effect which becomes visible just by scrolling down the page. I think this is the future and next step of the parallax effect in Web-Design since scrolling is way more common than resizing the browser window:
|
||||
|
||||
[](http://inner.geek.nz/javascript/parallax/)
|
||||
|
||||
[](http://inner.geek.nz/javascript/parallax/)
|
||||
|
||||
[Fly + Parallax Scrolling Effect](http://www.esqsoft.com/examples/fly_parallax/fly_parallax.htm)
|
||||
|
||||
Similar to the Starry Night example from css-tricks. But this example uses JavaScript to achieve this effect without resizing your browser window. It almost looks like it's done with Flash:
|
||||
|
||||
[](http://www.esqsoft.com/examples/fly_parallax/fly_parallax.htm)
|
||||
|
||||
[](http://www.esqsoft.com/examples/fly_parallax/fly_parallax.htm)
|
||||
|
||||
[40 Jaar Sire](http://www.umaghetzeggen.nl/)
|
||||
|
||||
Whatever this site is about (Help me dutch speaking folks! edit: [anna knows it!](http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-102)) it creates a shaky effect controlled by your mouse pointer:
|
||||
|
||||
[](http://www.umaghetzeggen.nl/)
|
||||
|
||||
[](http://www.umaghetzeggen.nl/)
|
||||
|
||||
[CSS combined with Scriptaculous's Morph effect](http://offtheline.net/examples/parallax/)
|
||||
|
||||
Same graphics as on Silverback but with a Morph effect assembled with Scriptaculous. The parallax effect becomes visible by shrinking and unshrinking which is controlled by your mouse clicks:
|
||||
|
||||
[](http://offtheline.net/examples/parallax/)
|
||||
|
||||
[](http://offtheline.net/examples/parallax/)
|
||||
|
||||
[WeblogR demo](http://www.weblogr.fr/demo/09052008/)
|
||||
|
||||
Same graphics as on Silverback too but this Parallax follows your mouse pointer. This is done with jQuery:
|
||||
|
||||
[](http://www.weblogr.fr/demo/09052008/)
|
||||
|
||||
|
||||
|
||||
[](http://www.weblogr.fr/demo/09052008/)
|
||||
|
||||
# How-Tos and Tutorials
|
||||
|
||||
* [How to recreate Silverback's Parallax Effect](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax)
|
||||
- [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/)
|
||||
- [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/)
|
||||
- [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)
|
||||
- [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/)
|
||||
- [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:
|
||||
|
||||
[](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/)
|
||||
[](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/)
|
||||
|
||||
And he has found another Parallax effect on the [website of the Rissington Podcast](http://therissingtonpodcast.co.uk/). Cool!
|
||||
|
||||
[](http://therissingtonpodcast.co.uk/)
|
||||
|
||||
[](http://therissingtonpodcast.co.uk/)
|
||||
|
||||
**Update 2 06/02/2008:** Nice commentators [routine](http://www.weaintplastic.com/) and [Jorge Epuñan](http://www.csslab.cl/) made some more interactive Parallax examples:
|
||||
|
||||
@ -162,11 +143,10 @@ And he has found another Parallax effect on the [website of the Rissington Podca
|
||||
|
||||
A star parallax which follows your mouse pointer. Done with jQuery and with heavy CPU load.
|
||||
|
||||
[](http://www.sonus-game.com/)
|
||||
|
||||
[](http://www.sonus-game.com/)
|
||||
|
||||
[Parallax con Mootools](http://www.csslab.cl/ejemplos/parallax_mootools/)
|
||||
|
||||
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/)
|
||||
[](http://www.csslab.cl/ejemplos/parallax_mootools/)
|
||||
|
||||
@ -5,7 +5,7 @@ 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
|
||||
tags:
|
||||
@ -14,7 +14,7 @@ tags:
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
Today [Human Software](http://www.humansoftware.com) released an exciting image editing plug-in for Apple's Aperture. It's called [ApertureEdit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) and according to Human Software it offers more than 4000 professional effects which you can achieve right within Aperture.
|
||||
Today [Human Software](http://www.humansoftware.com) released an exciting image editing plug-in for Apple's Aperture. It's called [ApertureEdit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) and according to Human Software it offers more than 4000 professional effects which you can achieve right within Aperture.
|
||||
|
||||
The ApertureEdit plug-in is a bundle of 11 different modules for 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.
|
||||
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
layout: post
|
||||
|
||||
title: Chives
|
||||
image: Teaser-Chives.jpg
|
||||
download: chives_by_kremalicious.zip
|
||||
image: ../media/Teaser-Chives.jpg
|
||||
download: ../media/chives_by_kremalicious.zip
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-06-01 18:43:40+00:00
|
||||
wordpress_id: 64
|
||||
|
||||
categories:
|
||||
- goodies
|
||||
tags:
|
||||
|
||||
@ -5,14 +5,14 @@ title: Tweet! I'm on Twitter now.
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-06-02 18:26:37+00:00
|
||||
wordpress_id: 65
|
||||
|
||||
categories:
|
||||
- personal
|
||||
tags:
|
||||
- twitter
|
||||
---
|
||||
|
||||
In a heavy venturesome step of unreasonable Web 2.0 love I've decided to get me on Twitter and [opened up an account](https://twitter.com/kremalicious).
|
||||
In a heavy venturesome step of unreasonable Web 2.0 love I've decided to get me on Twitter and [opened up an account](https://twitter.com/kremalicious).
|
||||
|
||||
If you like, you can follow me now on Twitter while I try to find some advantages of this curious Twitter thing. The plan for now is to post about background updates of this website and about whatever I will throw into the Cloud on other places. But damn, just 140 characters. Feels like writing like it's 1999.
|
||||
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
layout: post
|
||||
|
||||
title: Niépce's Camera Obscura And The History Of The First Photograph
|
||||
image: Teaser-Camera-Obscura-Icons.jpg
|
||||
download: niepces_camera_obscura_by_kremalicious.zip
|
||||
image: ../media/Teaser-Camera-Obscura-Icons.jpg
|
||||
download: ../media/niepces_camera_obscura_by_kremalicious.zip
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-06-03 14:34:03+00:00
|
||||
wordpress_id: 67
|
||||
|
||||
|
||||
categories:
|
||||
- goodies
|
||||
@ -36,8 +36,7 @@ There's a fascinating story behind these icons which is nothing more than the st
|
||||
|
||||
## Nicéphore Niépce and The First Photograph
|
||||
|
||||
|
||||
 Nicéphore Niépce, ca. 1795
|
||||
 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.
|
||||
|
||||
@ -106,7 +105,7 @@ In addition to these icons you can download the [associated wallpapers for your
|
||||
|
||||
# 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.
|
||||
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.
|
||||
|
||||
The easiest way to change and apply icons in Mac OS X involves the awesome application [Candybar](http://www.panic.com/candybar) from [Panic Software](http://www.panic.com/). In case you don't have it you can change your icons by following these steps:
|
||||
|
||||
@ -118,6 +117,6 @@ These desktop icons are free for you personal and non-commercial use. All other
|
||||
|
||||
# Final Words
|
||||
|
||||
<a href="http://krlc.us/givecoffee"></a>
|
||||
<a href="http://krlc.us/givecoffee"></a>
|
||||
|
||||
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-](https://kremalicious.com/feed/) or <a href="http://krlc.us/givecoffee">buy me my next coffee</a>.
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
layout: post
|
||||
|
||||
title: Niépce's Camera Obscura Wallpaper Pack
|
||||
image: Teaser-Camera-Obscura-Walls.jpg
|
||||
download: niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip
|
||||
image: ../media/Teaser-Camera-Obscura-Walls.jpg
|
||||
download: ../media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-06-03 13:32:24+00:00
|
||||
wordpress_id: 66
|
||||
|
||||
categories:
|
||||
- goodies
|
||||
tags:
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
---
|
||||
layout: photo
|
||||
|
||||
slug: helvetica-typewriter-keys
|
||||
title: Helvetica Typewriter Keys
|
||||
image: MG_1735-Version-2.jpg
|
||||
image: ../media/MG_1735-Version-2.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-06-04 11:41:01+00:00
|
||||
wordpress_id: 1976
|
||||
|
||||
categories:
|
||||
- photos
|
||||
tags: typography
|
||||
tags:
|
||||
- typography
|
||||
---
|
||||
|
||||
[Photo on 500px](http://500px.com/photo/5630073) [Photo on flickr](http://www.flickr.com/photos/krema/6965165687)
|
||||
|
||||
@ -5,7 +5,7 @@ title: 'Safari 4 Developer Preview - Better Performance, Overhauled Web Inspecto
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-06-11 10:37:07+00:00
|
||||
wordpress_id: 70
|
||||
|
||||
category: design
|
||||
tags:
|
||||
- osx
|
||||
@ -13,21 +13,21 @@ tags:
|
||||
- css
|
||||
---
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
The Navigation inside the Web Inspector is now moved from left to the top and there's a new "Databases" section and something like a browsing benchmarking "Profiles" section. All navigation tabs got new icons too.
|
||||
|
||||
|
||||
|
||||
|
||||
The "Resources" section got a slight overhaul too. With it you can see in which time the elements on your website were loaded with a nice graphical timeline.
|
||||
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
@ -37,7 +37,7 @@ Finally there seem to be a new css version implemented since Safari 4 now render
|
||||
|
||||
Another new feature is the new full page zoom for zooming on web pages which was already implemented in the WebKit nightlies but [had to be manually activated](http://www.macosxhints.com/article.php?story=20080606045109546). In old Safari versions pressing Command + or - increased or decreased just the text size, sometimes destroying the whole layout of the page. The Safari 4 Developer Preview behaves just like the recent Firefox 3 RC1 and zooms out or zooms in the whole page layout and not just the text.
|
||||
|
||||
[](/media/safari4_zoom.png)
|
||||
[](../media/safari4_zoom.png)
|
||||
|
||||
And while Apple just [states in their press release](http://www.apple.com/pr/library/2008/06/09snowleopard.html) that Safari 4 delivers "the fastest implementation of JavaScript ever, increasing performance by 53 percent", other sources like [MacRumors](http://www.macrumors.com/2008/06/10/apple-seeds-safari-4-to-developers/) or [Macworld UK](http://www.macworld.co.uk/macsoftware/news/index.cfm?newsid=21625&pagtype=allchandate) expect this increased JavaScript performance to be based on the implementation of the freshly new [SquirrelFish JavaScript engine](http://webkit.org/blog/189/announcing-squirrelfish/).
|
||||
|
||||
|
||||
@ -5,19 +5,19 @@ 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
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
Have you ever looked for a way to quickly add text to your images [without photoshopping a watermark image](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/) first?
|
||||
Have you ever looked for a way to quickly add text to your images [without photoshopping a watermark image](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/) first?
|
||||
|
||||
There's a simple editing plug-in available for this task called [Borders & Titles](http://developer.apple.com/samplecode/BordersAndTitles/index.html) and as the name says you can add simple borders and text to your images within Aperture 2.1. It's a sample plug-in provided by Apple and it's fully functional. You can download it from Apple's Developer Connection website without registration:
|
||||
|
||||
[Aperture Edit Plugin - Borders & Titles](http://developer.apple.com/samplecode/BordersAndTitles/index.html)
|
||||
|
||||
[](/media/aperture_bt.png)
|
||||
[](../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.
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
---
|
||||
layout: post
|
||||
|
||||
slug: ubuntu-as-mac-file-server-and-time-machine-volume
|
||||
title: 'HowTo: Make Ubuntu A Perfect Mac File Server And Time Machine Volume'
|
||||
author: Matthias Kretschmann
|
||||
image: ubuntu_mac_feature.jpg
|
||||
image: ../media/ubuntu_mac_feature.jpg
|
||||
|
||||
date: 2008-06-19 03:08:11+00:00
|
||||
updated: 2016-06-12 14:29:11+00:00
|
||||
|
||||
wordpress_id: 75
|
||||
|
||||
category: design
|
||||
tags:
|
||||
- tutorial
|
||||
@ -41,23 +40,23 @@ Personally I use a fresh installation of Ubuntu 8.04 Hardy Heron Desktop version
|
||||
|
||||
Here are the steps involved in setting up your Ubuntu box as a Mac file server:
|
||||
|
||||
1. Modify and install Netatalk (Open Source AFP implementation)
|
||||
2. Configure Netatalk
|
||||
3. Configure shared volumes (and Time Machine volume)
|
||||
4. Install Avahi (Open Source Bonjour implementation)
|
||||
5. Configure Avahi and advertise services
|
||||
6. Configure TimeMachine
|
||||
7. Conclusion, Problems and more informations
|
||||
8. Downloading and using the Server Display Icons
|
||||
9. Translations Of This Article
|
||||
1. Modify and install Netatalk (Open Source AFP implementation)
|
||||
2. Configure Netatalk
|
||||
3. Configure shared volumes (and Time Machine volume)
|
||||
4. Install Avahi (Open Source Bonjour implementation)
|
||||
5. Configure Avahi and advertise services
|
||||
6. Configure TimeMachine
|
||||
7. Conclusion, Problems and more informations
|
||||
8. Downloading and using the Server Display Icons
|
||||
9. Translations Of This Article
|
||||
|
||||
# 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.
|
||||
[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.
|
||||
|
||||
First you have to enable the Source Code repositories via System > Administration > Software Sources under the Ubuntu Software tab. Check the Source Code Box, click Close and choose Reload in the next dialogue.
|
||||
|
||||
|
||||
|
||||
|
||||
Alessandro has built [a nice .deb package for i386 machines](http://dl.getdropbox.com/u/187424/netatalk_2.0.3-brando0_i386.deb). Although written in italian you can follow the necessary code snippets for installing this package [in his blog post.](http://gpz500.wordpress.com/2008/09/27/lairone-al-servizio-del-leopardo/) If the install package works for you just skip the following self compiling process and head over to the [Configure Netatalk section.](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#netatalk2)
|
||||
|
||||
@ -68,7 +67,7 @@ sudo apt-get build-dep netatalk
|
||||
sudo apt-get install cracklib2-dev fakeroot libssl-dev
|
||||
sudo apt-get source netatalk
|
||||
cd netatalk-2*
|
||||
````
|
||||
```
|
||||
|
||||
Now you have downloaded the source code of Netatalk to your home folder, installed some required packages for building Netatalk and changed the directory to the downloaded folder.
|
||||
|
||||
@ -80,11 +79,10 @@ sudo DEB_BUILD_OPTIONS=ssl dpkg-buildpackage -rfakeroot
|
||||
|
||||
Depending on your hardware this may take a while but you can enjoy the geeky build output in your Terminal:
|
||||
|
||||
|
||||
|
||||
|
||||
If everything went through without errors (except the signing warnings, can be ignored) you can install the recently created package:
|
||||
|
||||
|
||||
```shell
|
||||
sudo dpkg -i ~/netatalk_2*.deb
|
||||
```
|
||||
@ -99,7 +97,7 @@ Now you have successfully build and installed your custom Netatalk package which
|
||||
|
||||
# 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 vi for stopping unneeded services:
|
||||
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 vi for stopping unneeded services:
|
||||
|
||||
```shell
|
||||
sudo vi /etc/default/netatalk
|
||||
@ -134,7 +132,7 @@ Press Ctrl + S to save the document or choose File > Save.
|
||||
|
||||
# 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 vim with superuser privileges (required for saving) where we can define our 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 vim with superuser privileges (required for saving) where we can define our shared volumes:
|
||||
|
||||
```shell
|
||||
sudo vi /etc/netatalk/AppleVolumes.default
|
||||
@ -173,7 +171,7 @@ Although we now have a fully configured AFP file server it will not show up in t
|
||||
|
||||
# 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:
|
||||
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:
|
||||
|
||||
```shell
|
||||
sudo apt-get install avahi-daemon
|
||||
@ -196,7 +194,7 @@ Press Ctrl + S to save the document or choose File > Save.
|
||||
|
||||
# 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:
|
||||
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:
|
||||
|
||||
```shell
|
||||
sudo vi /etc/avahi/services/afpd.service
|
||||
@ -233,19 +231,19 @@ Now you have configured the Avahi daemon to advertise AFP sharing across your ne
|
||||
|
||||
Now you're done with setting up AFP file sharing on your Ubuntu box and advertising it across the network for Finder's sidebar. Check if everything works as intended by clicking on your Ubuntu server in Finder and clicking on the "Connect As" button. Enter your username and password (the ones you're using on your Ubuntu machine) and you should see the Volumes we defined earlier with the AppleVolumes.default file:
|
||||
|
||||
|
||||
|
||||
|
||||
Another side effect of using AFP is that your Ubuntu box will show up as a nice Apple Cinema Display icon instead of the BSOD windows icon. Here you see my Ubuntu server showing up in Finder as [Rockhopper](http://en.wikipedia.org/wiki/Southern_Rockhopper_Penguin):
|
||||
|
||||
|
||||
|
||||
|
||||
update: If you've followed the revised version of this article your Linux box should now be represented by a Xserve icon in Finder:
|
||||
|
||||
|
||||
|
||||
|
||||
# 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):
|
||||
**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):
|
||||
|
||||
```shell
|
||||
defaults write com.apple.systempreferences TMShowUnsupportedNetworkVolumes 1
|
||||
@ -257,7 +255,7 @@ Now just mount the "TimeMachine" Volume first and choose it as a backup disk in
|
||||
|
||||
When your first Time Machine backup is done you can remove all Volumes and the next time Time Machine starts it will automagically mount the disk image from your TimeMachine volume on your Ubuntu box without mounting the whole TimeMachine volume:
|
||||
|
||||
|
||||
|
||||
|
||||
# 7. Conclusion, Problems and more informations
|
||||
|
||||
@ -291,7 +289,7 @@ The secret number Time Machine adds to your computer name is nothing more than t
|
||||
|
||||
In the field volume name write Backup of computername. Now FIRST chose sparse bundle disk image as the image format and THEN adjust the volume size to the size of your internal harddrive (minimum, choose more if you like) afterwards. Remember that Disk Utility won't let you make a bigger image file as you have physical hard drive space available if you don't chose sparse bundle disk image as the image format first. For reference have a look at this screenshot:
|
||||
|
||||
|
||||
|
||||
|
||||
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).
|
||||
|
||||
@ -304,17 +302,17 @@ In short you have to allow communications over port 548 and 5353.
|
||||
## "Connection Failed"
|
||||
|
||||
If you get one of those errors:
|
||||
````
|
||||
|
||||
Connection Failed - There was an error connection to the server. Check the server name or IP address and try again
|
||||
|
||||
```
|
||||
or
|
||||
```
|
||||
|
||||
There was an error connecting to the server. Check the server name or IP address and try again. If you are unable to resolve the problem contact your system administrator.
|
||||
|
||||
````
|
||||
Connection Failed - There was an error connection to the server. Check the server name or IP address and try again
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```
|
||||
There was an error connecting to the server. Check the server name or IP address and try again. If you are unable to resolve the problem contact your system administrator.
|
||||
```
|
||||
|
||||
you should first be sure you have either no firewall on your Ubuntu box in use or have it configured to allow AFP communications as suggested in the above paragraph.
|
||||
|
||||
Remember that this error can be caused by a myriad of problems and just a lot of other configurations on your side. So you should try a minimal way: On my Ubuntu boxes I have no other file sharing protocol like samba or NFS enabled (even not installed) so the samba hostname and the AFP hostname can't interfere with each other. Also I've left the Workgroup field blank under System > Administration > Network > General tab.
|
||||
@ -323,7 +321,7 @@ If you still can't connect to your Ubuntu box you can edit your /etc/hosts file
|
||||
|
||||
```shell
|
||||
sudo vi /etc/hosts
|
||||
```
|
||||
````
|
||||
|
||||
Add the following two lines at the very top of the file.
|
||||
|
||||
@ -374,22 +372,21 @@ In the forum you'll also find some links to various patches to avoid problems wi
|
||||
|
||||
## 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/)
|
||||
* [All possible AppleVolumes.default options (part of the Netatalk manual)](http://netatalk.sourceforge.net/2.0/htmldocs/AppleVolumes.default.5.html)
|
||||
* [Overview and templates about services Avahi can advertise](http://holyarmy.org/2008/01/27/advertising-linux-services-via-avahibonjour)
|
||||
* [In-depth article about Sparse Bundle disk images](http://db.tidbits.com/article/9673)
|
||||
* [How-to: Get files off a Time Machine backup without using your Mac](http://carsonbaker.org/2008/06/23/time-machine-restore/): In case you have to access Time Machine backups from Ubuntu or any other Linux system
|
||||
* [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.
|
||||
|
||||
- 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/)
|
||||
- [All possible AppleVolumes.default options (part of the Netatalk manual)](http://netatalk.sourceforge.net/2.0/htmldocs/AppleVolumes.default.5.html)
|
||||
- [Overview and templates about services Avahi can advertise](http://holyarmy.org/2008/01/27/advertising-linux-services-via-avahibonjour)
|
||||
- [In-depth article about Sparse Bundle disk images](http://db.tidbits.com/article/9673)
|
||||
- [How-to: Get files off a Time Machine backup without using your Mac](http://carsonbaker.org/2008/06/23/time-machine-restore/): In case you have to access Time Machine backups from Ubuntu or any other Linux system
|
||||
- [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
|
||||
|
||||
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).
|
||||
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).
|
||||
|
||||
Here you can see the icons included in the Server Displays icon pack:
|
||||
|
||||
|
||||
|
||||
|
||||
Because I've just modified Apple's standard icons these icons are just available via this blog post and they will not show up in my Goodies section. Just download the whole package directly via this link:
|
||||
|
||||
@ -413,13 +410,13 @@ As for the Windows Vista server icon: Just rename the Windows Server.icns file t
|
||||
|
||||
```
|
||||
/System/Library/CoreServices/CoreTypes.bundle/Contents/Resources
|
||||
````
|
||||
```
|
||||
|
||||
Now drag & drop the renamed file into this path and replace the generic icon (making a backup before doing that is a good idea) and after a logout all your Windows servers should be displayed with the new icon.
|
||||
|
||||
update: A solution for the icon problem is here: [Simon Wheatley figured out](http://www.simonwheatley.co.uk/2008/04/06/avahi-finder-icons/trackback/) how to assign a different icon to your avahi advertised Linux box. All you have to do is assigning a device info part at the end of the avahi service file for AFP. I've updated this article to include this part. Please head back to the Configure Avahi and advertise services part in this article and edit your afpd.service file again if you've followed the first revision of this article.
|
||||
|
||||
<a href="http://krlc.us/givecoffee"></a>
|
||||
<a href="http://krlc.us/givecoffee"></a>
|
||||
|
||||
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>.
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ 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
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
The All-in-one Aperture adjustment plugin bundle from [Human Software](http://www.humansoftware.com) is now called Edit for Aperture or just [Edit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html). The new version 1.2 can now apply multiple layers of curves correction at once and the interface gets a new split image view. Also "different compatibility issues for PowerPC users" were fixed according to the release notes.
|
||||
The All-in-one Aperture adjustment plugin bundle from [Human Software](http://www.humansoftware.com) is now called Edit for Aperture or just [Edit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html). The new version 1.2 can now apply multiple layers of curves correction at once and the interface gets a new split image view. Also "different compatibility issues for PowerPC users" were fixed according to the release notes.
|
||||
|
||||
The ApertureEdit plug-in is a bundle of 12 different modules for 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 and according to Human Software Edit offers more than 4000 professional effects. 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.
|
||||
|
||||
|
||||
@ -6,13 +6,13 @@ title: 'New Canon stuff: Digital Rebel XS/EOS 1000D/Kiss F And Speedlite 430EX I
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-06-25 16:41:59+00:00
|
||||
wordpress_id: 78
|
||||
|
||||
categories:
|
||||
- photography
|
||||
---
|
||||
|
||||
After the latest Digital Photo Professional update (DPP 3.4.1.1) [revealed some evidence about an upcoming Canon EOS Rebel XS/1000D](http://www.bobatkins.com/photography/digital/canon_xs_1000D_dpp34.html), Canon finally introduced this new entry-level DSLR this month. The [EOS Digital Rebel XS/1000D/Kiss F](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp) ([full product specifications](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp?specs=1)) is technically a hybrid between hardware and features found in Canon's entry-level cameras from the past: the 7-point autofocus system comes from the XT/350D, the Digic III processor is the same as in the XSi/450D and the Live View feature is implemented with the same features as found in the XSi/450D.
|
||||
After the latest Digital Photo Professional update (DPP 3.4.1.1) [revealed some evidence about an upcoming Canon EOS Rebel XS/1000D](http://www.bobatkins.com/photography/digital/canon_xs_1000D_dpp34.html), Canon finally introduced this new entry-level DSLR this month. The [EOS Digital Rebel XS/1000D/Kiss F](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp) ([full product specifications](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp?specs=1)) is technically a hybrid between hardware and features found in Canon's entry-level cameras from the past: the 7-point autofocus system comes from the XT/350D, the Digic III processor is the same as in the XSi/450D and the Live View feature is implemented with the same features as found in the XSi/450D.
|
||||
|
||||
With this DSLR Canon seems to open up a new class in their EOS system which is somehow below the former entry level cameras (XT/350D, XTi/400D) and the latest entry-level XSi/450D. It's priced 200$ below Canons current or former entry-level DSLR XSi/450D and you can find a nice first review of this new DSLR [over at Digital Photography Review](http://www.dpreview.com/previews/Canon_1000D/).
|
||||
|
||||
[](/media/speedlite430exii.jpg)Canon also introduced the new midrange Speedlite 430EX II, replacing the 430EX flash unit. This new Speedlite is now fully configurable with the Camera's LCD menu and it got now a metal shoe. According to [Canon](http://www.canon.co.uk/press_centre/press_releases/cameras_accessories/speedlite_430ex_ii_press_release.asp) the 430EX II also boasts 20% faster recycling times and is more silent while doing this. In Europe and in the USA the Speedlite should be available from the end of July.
|
||||
[](../media/speedlite430exii.jpg)Canon also introduced the new midrange Speedlite 430EX II, replacing the 430EX flash unit. This new Speedlite is now fully configurable with the Camera's LCD menu and it got now a metal shoe. According to [Canon](http://www.canon.co.uk/press_centre/press_releases/cameras_accessories/speedlite_430ex_ii_press_release.asp) the 430EX II also boasts 20% faster recycling times and is more silent while doing this. In Europe and in the USA the Speedlite should be available from the end of July.
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Stone Head
|
||||
image: stonehead.jpg
|
||||
image: ../media/stonehead.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-06-30 11:26:14+00:00
|
||||
wordpress_id: 1961
|
||||
|
||||
categories:
|
||||
- photos
|
||||
---
|
||||
|
||||
@ -5,14 +5,14 @@ title: Everything Back To Normal On Kremalicious.com (Almost)
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-07-01 16:39:02+00:00
|
||||
wordpress_id: 80
|
||||
|
||||
categories:
|
||||
- personal
|
||||
tags:
|
||||
- wordpress
|
||||
---
|
||||
|
||||
As you may have noticed, kremalicious.com was a bit screwed in the last week and some of you have asked me via mail and twitter what exactly was wrong. So to satisfy the curious geek in you I will provide some informations about it.
|
||||
As you may have noticed, kremalicious.com was a bit screwed in the last week and some of you have asked me via mail and twitter what exactly was wrong. So to satisfy the curious geek in you I will provide some informations about it.
|
||||
|
||||
It all started with a move of my whole website to new and shiny servers with PHP 5 running by my host. I didn't heard of any incompatibilities between the latest Wordpress version running on PHP 5 and in fact Wordpress loves to use PHP 5. But somehow I wasn't able to update my site neither over http or ftp. Since I can contact my host admins directly ([thank you jpBerlin/Heinlein-Support!](http://www.jpberlin.de/)) this problem was addressed rather quickly. They just neglected to tell me that the server address for login also changed (I should have think of this too). So all my changes were applied to my Wordpress installation on the old server. Problem solved I thought.
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ title: 'New Aperture Plug-Ins: Jade And PTLens'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-07-08 19:19:54+00:00
|
||||
wordpress_id: 84
|
||||
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
@ -14,19 +14,19 @@ tags:
|
||||
|
||||
Last week two new image editing plug-ins were announced for Aperture 2.1: The PTLens plug-in for correcting barrel distortion, vignetting, chromatic aberration, and perspective and the Jade plug-in for automatic correction of color, levels and exposure.
|
||||
|
||||
|
||||
|
||||
|
||||
The [PTLens plug-in](http://epaperpress.com/ptlens/) from [ePaperPress](http://epaperpress.com/) was available as a Photoshop plug-in in the past and is well known for its lens pincushion, barrel distortion, vignetting, chromatic aberration, and perspective correction abilities based on a lens model database similiar to [Kekus' LensFix CI plug-in](http://www.kekus.com/software/plugin.html).
|
||||
|
||||
While I love the plug-ins ability to correct perspectives the Aperture plug-in doesn't work with RAW files(!), just with tiff and jpeg files which is one more way to compromise the way Aperture works (In my opinion the whole plug-in architecture of Aperture does that). And while I would love to show you the plug-ins user interface in Aperture PTLens refused to open either JPEG or TIFF files. So here's just a screenshot of the standalone application:
|
||||
|
||||
[](/media/ptlens_ui.png)
|
||||
[](../media/ptlens_ui.png)
|
||||
|
||||
So to me the PTLens plug-in for Aperture isn't finished yet. But you can download a [trial version from the plug-ins website](http://epaperpress.com/ptlens/media.html).
|
||||
|
||||
The second plug-in recently released is the [Jade plug-in](http://jade.datamind.biz/) from Datamind. Because of its speed also on consumer Macs, Aperture 2 became popular among amateur photographers too. [Datamind](http://datamind.biz) targets it's first Aperture plug-in [Jade](http://jade.datamind.biz/) at this group. The former standalone application for Mac and Windows is now an Aperture adjustment plug-in for correcting your pictures colors, levels and exposure automatically with Dataminds own algorithm. And its user interface is very clean and uncluttered:
|
||||
|
||||
[](/media/jade_ui.png)
|
||||
[](../media/jade_ui.png)
|
||||
|
||||
While I have to say Jade produces very reasonable results it lacks a lot of controls and fails with complicated pictures where Aperture's adjustment controls wouldn't. So I would say this plug-in would be better as an iPhoto plug-in. Do you really want a blown up photoshop or tiff file for every photo you're going to correct in Aperture?
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ title: Enjoy Kremalicious{iPhone}
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-07-11 00:20:22+00:00
|
||||
wordpress_id: 85
|
||||
|
||||
categories:
|
||||
- personal
|
||||
tags:
|
||||
- wordpress
|
||||
---
|
||||
|
||||
I'm thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets?
|
||||
I'm thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets?
|
||||
|
||||
When the website detects an iPhone or iPod Touch it will automatically switch to another freshly created theme which is absolutely seamless to the user. This detection is done by the wonderful slim iPhone Wordpress plug-in from ContentRobot which was slightly modified by me.
|
||||
|
||||
@ -43,7 +43,7 @@ There's neither an active nor a hover state for links on the iPhone which makes
|
||||
|
||||
# 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:
|
||||
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:
|
||||
|
||||
{% highlight html %}
|
||||
<link rel="apple-touch-icon" href="/i/apple-touch-icon.png" />
|
||||
|
||||
@ -5,15 +5,15 @@ title: 'New Aperture Plug-In: Nik announces Silver Efex Pro'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-07-11 19:13:16+00:00
|
||||
wordpress_id: 86
|
||||
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
Beside a new version of Color Efex Pro for Capture NX, Nik announced a brand new plug-in for Photoshop and Aperture. [Silver Efex Pro](http://www.niksoftware.com/silverefexpro/usa/entry.php) is a tool to create black & white images with the power and simplicity of the U-Point technology. You can easily fine tune portions of your black & white images. It's also capable of emulating film grain and 18 different types of film while also providing 20 one-click preset styles. But Silver Efex Pro is also capable of color toning the image.
|
||||
Beside a new version of Color Efex Pro for Capture NX, Nik announced a brand new plug-in for Photoshop and Aperture. [Silver Efex Pro](http://www.niksoftware.com/silverefexpro/usa/entry.php) is a tool to create black & white images with the power and simplicity of the U-Point technology. You can easily fine tune portions of your black & white images. It's also capable of emulating film grain and 18 different types of film while also providing 20 one-click preset styles. But Silver Efex Pro is also capable of color toning the image.
|
||||
|
||||
[](/media/nik_silverefex.png)
|
||||
[](../media/nik_silverefex.png)
|
||||
|
||||
You can get a [15-day trial from Nik's website](http://www.niksoftware.com/site/cont_index.php?nav_top=367&cms_child=__demo&productId=262). It can be purchased through Nik's online store for US$199.95.
|
||||
|
||||
@ -5,7 +5,7 @@ title: 'Wordpress 2.5+: Get Rid of That Sluggish Dashboard'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-07-15 14:04:46+00:00
|
||||
wordpress_id: 87
|
||||
|
||||
|
||||
categories:
|
||||
- design
|
||||
@ -14,7 +14,7 @@ tags:
|
||||
- wordpress
|
||||
---
|
||||
|
||||
Since Wordpress 2.5 it was nearly impossible for me to log into Wordpress and quickly head over to the write tab. The Dashboard always wants to load a bunch of things in it but this always seemed to fail in my setup and slow things down. And not enough the Dashboard just locks everything up while loading which can take more than one minute.
|
||||
Since Wordpress 2.5 it was nearly impossible for me to log into Wordpress and quickly head over to the write tab. The Dashboard always wants to load a bunch of things in it but this always seemed to fail in my setup and slow things down. And not enough the Dashboard just locks everything up while loading which can take more than one minute.
|
||||
|
||||
I've searched for a simple way of disabling those feeds, plugins etc. stuff the Wordpress Dashboard tries to fill but it seems you can't disable these from the backend. But there's a quick way for doing this which involves editing your /wp-admin/index-extra.php and uncomment some lines there. This will leave your Dashboard intact while it stops Wordpress from connecting to various sources to screw your blog up when you just want to quickly write something.
|
||||
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Leaf Life
|
||||
image: MG_1920.jpg
|
||||
image: ../media/MG_1920.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-07-23 20:38:57+00:00
|
||||
wordpress_id: 1908
|
||||
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
|
||||
@ -5,12 +5,12 @@ title: Tips for Journalists Reporting From China
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-08-03 17:10:25+00:00
|
||||
wordpress_id: 95
|
||||
|
||||
categories:
|
||||
- photography
|
||||
---
|
||||
|
||||
|
||||
|
||||
As you may know there's a huge Internet censorship going on in China. Contrary to promises made by chinese authorities and the International Olympic Committee (IOC) this Internet censorship is active during the Olympic Games [even in the international media centre](http://news.bbc.co.uk/2/hi/asia-pacific/7532338.stm). And the [IOC shares the current ideas of censorship in China](http://www.rsf.org/article.php3?id_article=26461).
|
||||
|
||||
And as in every political system with totalitarian elements there's a good chance you will meet some angry lackeys if you're going to report about topics the chinese authorities don't want you to report. But more important they will threat your sources if their identity gets revealed. So if you want to report about [the water shortage in the villages around Beijing](http://www.voanews.com/english/2008-06-27-voa10.cfm), the [massive air pollution in Beijing](http://english.chosun.com/w21data/html/news/200807/200807300031.html) or about all the forced resettlements going on in China you should consider some security precautions to protect you and your sources.
|
||||
|
||||
@ -5,7 +5,7 @@ title: 'HowTo: Create A Mobile Encrypted Aperture Vault'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-08-22 18:50:31+00:00
|
||||
wordpress_id: 142
|
||||
|
||||
category: photography
|
||||
tags:
|
||||
- aperture
|
||||
@ -16,7 +16,7 @@ tags:
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
When on the road I always take a little mobile hard drive with me where all my referenced Aperture Masters from the past years and my mobile Aperture Vault (backing up the un-referenced Masters from the current year) reside. But being little and mobile also means the external hard drive can easily be lost or stolen exposing all my pictures to the thief. To avoid that you can use encryption so in the case of a lost or theft the data is not accessible by the thief. This can easily be done with [sparse bundle disk images](http://db.tidbits.com/article/9673) so you won't have to encrypt the whole hard drive with additional software.
|
||||
When on the road I always take a little mobile hard drive with me where all my referenced Aperture Masters from the past years and my mobile Aperture Vault (backing up the un-referenced Masters from the current year) reside. But being little and mobile also means the external hard drive can easily be lost or stolen exposing all my pictures to the thief. To avoid that you can use encryption so in the case of a lost or theft the data is not accessible by the thief. This can easily be done with [sparse bundle disk images](http://db.tidbits.com/article/9673) so you won't have to encrypt the whole hard drive with additional software.
|
||||
|
||||
So in this quick tutorial I will show you how to create an encrypted Aperture Vault by using Sparse Bundle Disk Images and by utilizing tools built into Mac OS X. All this can be done in two simple steps.
|
||||
|
||||
@ -26,7 +26,7 @@ First you have to create the encrypted disk image where the Aperture Vault will
|
||||
|
||||
Be sure there is no device or volume selected in the sidebar and click on the New Image icon in the toolbar. Set a file name of the disk image and the Volume Name (the name of the mounted disk image on your desktop). Change all the settings as seen in the following screenshot. Be sure to select sparse bundle disk image as the Image Format before changing the volume size. This way you can set a bigger volume size than your physical disk space available on your hard drive. After creation the disk image won't be as big as you have set it with volume size. It will grow as you write files to it. For maximum security (but slower performance) select 256-bit AES encryption in the Encryption drop down menu:
|
||||
|
||||
|
||||
|
||||
|
||||
Finally set the destination where you want to have the disk image created. To make it all mobile choose your mobile hard drive as destination. After clicking Create you will be asked to provide a password for encrypting the disk image. Be sure to click on the little key icon to use Mac OS X built in password generator. Generate a new extra long password. Type in your new password manually in the Verify field and be sure to check "Remember password in my keychain". This is the only time you have to provide the password since it will be saved in your keychain after clicking OK.
|
||||
|
||||
@ -40,15 +40,15 @@ Now your newly created sparse bundle disk image ahould be mounted on your deskto
|
||||
|
||||
Now go to Aperture, choose the Projects tab and click on the little gear wheel at the bottom of the sidebar and choose "Add Vault" from the opened menu.
|
||||
|
||||
|
||||
|
||||
|
||||
In the opened dialogue select your mounted disk image under the devices section in your sidebar, give it a name and click Add.
|
||||
|
||||
|
||||
|
||||
|
||||
The new Vault will be added to your Vault list and is now to ready to be updated.
|
||||
|
||||
|
||||
|
||||
|
||||
Just click the little iSync-style arrow beside your Vault and the Vault be written to your encrypted disk image. When finished you can eject the disk image. It can now be mounted again just with the correct password which is stored in your keychain so won't even recognize the encryption. Of course, when you try to mount this disk image on another mac you have to type in the password or import the entry from your keychain.
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ title: Noise Ninja finally available for Apple Aperture
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-08-22 14:51:02+00:00
|
||||
wordpress_id: 120
|
||||
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
Earlier this month [PictureCode](http://www.picturecode.com) finally released their noise reduction software [Noise Ninja](http://www.picturecode.com/media.htm) as an Aperture plug-in for Aperture 2.1 and above.
|
||||
Earlier this month [PictureCode](http://www.picturecode.com) finally released their noise reduction software [Noise Ninja](http://www.picturecode.com/media.htm) as an Aperture plug-in for Aperture 2.1 and above.
|
||||
|
||||
The results are just as amazing as they are with the Photoshop plug-in. But the Aperture plug-in uses a streamlined interface which differs from the photoshop version. But the functionality is the same.
|
||||
|
||||
|
||||
@ -5,22 +5,22 @@ title: The Kremalicious MarsEdit Style
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-08-22 17:04:19+00:00
|
||||
wordpress_id: 122
|
||||
|
||||
categories:
|
||||
- goodies
|
||||
---
|
||||
|
||||
Personally I blog everything with RedSweater's awesome application [MarsEdit](http://www.red-sweater.com/marsedit/). MarsEdit has a cool preview window included where you can see your writing live while you type. The formatting of this preview is based on simple HTML and CSS so the style is pretty customizable.
|
||||
Personally I blog everything with RedSweater's awesome application [MarsEdit](http://www.red-sweater.com/marsedit/). MarsEdit has a cool preview window included where you can see your writing live while you type. The formatting of this preview is based on simple HTML and CSS so the style is pretty customizable.
|
||||
|
||||
A while ago I've made a custom style for the blog on kremalicious.com and would like to share this style with you. The style is based on the colors used on kremalicious.com with a black background and light grey text on top of it. The links have the same blueish hover style as on my website:
|
||||
|
||||
[](/media/marsedit_kremalicious_big.png)
|
||||
[](../media/marsedit_kremalicious_big.png)
|
||||
|
||||
Here's how to apply the style for your blog preview in MarsEdit:
|
||||
|
||||
In MarsEdit main window right-click (or ctrl + click) in the sidebar on the blog where you want to have my style applied to and choose Edit Preview Template. The Preview Template editor should open where you can customize the style of the preview with the css instructions in the header.
|
||||
|
||||
Just copy and paste the following HTML and CSS into your Preview Template editor. If something goes wrong with the source formatting, I've also provided [a txt file with the code](/media/marsedit_kremalicious.txt):
|
||||
Just copy and paste the following HTML and CSS into your Preview Template editor. If something goes wrong with the source formatting, I've also provided [a txt file with the code](../media/marsedit_kremalicious.txt):
|
||||
|
||||
|
||||
{% highlight html %}
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
layout: post
|
||||
|
||||
title: Icy Box Icons
|
||||
image: Teaser-Icy-Box.jpg
|
||||
download: icybox_by_kremalicious.zip
|
||||
image: ../media/Teaser-Icy-Box.jpg
|
||||
download: ../media/icybox_by_kremalicious.zip
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-08-26 19:16:38+00:00
|
||||
wordpress_id: 146
|
||||
|
||||
categories:
|
||||
- goodies
|
||||
tags:
|
||||
@ -32,4 +32,4 @@ The whole package includes 7 icons either packed in a nice tagged iContainer for
|
||||
* Leopard ready (512x512)
|
||||
* including 7 icons with 2 Time Machine versions
|
||||
|
||||
[](/media/icybox_teaser2.jpg)
|
||||
[](../media/icybox_teaser2.jpg)
|
||||
|
||||
@ -5,20 +5,20 @@ title: 'Architect and Façade: Theming For Leopard'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-08-28 09:54:06+00:00
|
||||
wordpress_id: 156
|
||||
|
||||
category: design
|
||||
tags:
|
||||
- osx
|
||||
- macos
|
||||
---
|
||||
|
||||
There's good news for all you Mac OS X Leopard GUI Themer out there. While there's Panic's [Candybar](http://www.panic.com/candybar) for icon customization in OS X there is no application to alter all the user interface elements of Leopard. In Tiger there was an application called ShapeShifter but since the whole GUI in Leopard changed it stopped working. Architect and Façade to the rescue.
|
||||
There's good news for all you Mac OS X Leopard GUI Themer out there. While there's Panic's [Candybar](http://www.panic.com/candybar) for icon customization in OS X there is no application to alter all the user interface elements of Leopard. In Tiger there was an application called ShapeShifter but since the whole GUI in Leopard changed it stopped working. Architect and Façade to the rescue.
|
||||
|
||||
[SlightlyPretentious](http://www.slightlypretentious.com/) announced its "Theming made easy"-application Architect is coming as a public beta <strike>next sunday (is it 08/31 or 09/07?)</strike> on Wednesday, September 3rd. Icon Designer Laurent Baumann already posted [a new sweet application icon](http://www.flickr.com/photos/avetenebrae/2669353476/) for this app a while ago and we can expect a nice and good looking solution for theming and customization in Leopard.
|
||||
|
||||
Head over to [the Screencast](http://www.slightlypretentious.com/) and see Architect and its UI in action.
|
||||
|
||||
|
||||
|
||||
|
||||
While Architect will help you customizing Leopards UI and building themes out of your modifications, Façade ([Laurent's icon of it](http://www.flickr.com/photos/avetenebrae/2665823420/in/photostream/)) will help you switch (and manage?) the themes. But currently there's no word on the [SlightlyPretentious](http://www.slightlypretentious.com/) website about this application.
|
||||
|
||||
@ -29,4 +29,4 @@ Still no sight of Façade anywhere except the [note of a Lead Developer change](
|
||||
|
||||
But meanwhile another theme manager was released: [Magnifique](http://magnifique.pcwizcomputer.com/), available as a free download.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -5,12 +5,12 @@ title: Canon EOS 50D And New Lens Officially Announced
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-08-28 11:28:33+00:00
|
||||
wordpress_id: 168
|
||||
|
||||
categories:
|
||||
- photography
|
||||
---
|
||||
|
||||
[](/media/eos_50D_front.png)The successor of the EOS 40D is (almost) here: Canon [officially announced](http://www.usa.canon.com/templatedata/pressrelease/20080826_eos50d.html) the Canon EOS 50D along with the new lens Canon EF-S 18-200/3.5-5.6IS. The EOS 50D and the new lens will be both available in October 2008, Canon says.
|
||||
[](../media/eos_50D_front.png)The successor of the EOS 40D is (almost) here: Canon [officially announced](http://www.usa.canon.com/templatedata/pressrelease/20080826_eos50d.html) the Canon EOS 50D along with the new lens Canon EF-S 18-200/3.5-5.6IS. The EOS 50D and the new lens will be both available in October 2008, Canon says.
|
||||
|
||||
The EOS 50D comes with an CMOS APS-C sized sensor (crop factor 1.6) with 15.1 megapixels. Being Canons first DSLR with the new DIGIC 4 image processor the EOS 50D can burst 6.3 shots per second with improved image quality.
|
||||
|
||||
@ -18,12 +18,12 @@ The EOS 50D comes with an CMOS APS-C sized sensor (crop factor 1.6) with 15.1 me
|
||||
|
||||
The "EOS Integrated Cleaning Systems" gets a new fluorine layer and now works in three steps to clean the sensor. With 35 metering zones and 9 cross type Autofocus zones the Autofocus specifications are the same as found in the EOS 40D.
|
||||
|
||||
[](/media/eos_50D_back.png)The basic ISO range goes from 100 - 3200 while those values can be "boosted" to ISO 6400 and 12800. The integrated noise reduction can be adjusted in four grades. The LCD display is now 3 inches big with 920,000 pixels (VGA) with a Live View Mode.
|
||||
[](../media/eos_50D_back.png)The basic ISO range goes from 100 - 3200 while those values can be "boosted" to ISO 6400 and 12800. The integrated noise reduction can be adjusted in four grades. The LCD display is now 3 inches big with 920,000 pixels (VGA) with a Live View Mode.
|
||||
|
||||
The EOS 50D is prized at US$1399 (1299€) for just the body and it will be available as a kit with the EF 28-135 3.5-5.6 IS USM for US$1599.
|
||||
|
||||
If you're interested in all the details and specifications have a look at [Bob Atkins article about the official announcement of the EOS 50D](http://www.bobatkins.com/photography/digital/canon_eos_50D.html).
|
||||
|
||||
[](/media/efs_18-200.png)Along with the EOS 50D Canon announced the EF-S 18-200 3.5-5.6 IS as a new lens. The lens is intended for use with an APS-C sized sensor and insists of 16 elements (UD-glass and aspherical lenses) arranged in 12 groups. As the name says the EF-S 18-200 3.5-5.6 IS comes with an image stabilizer but somehow misses an USM ring motor which is quite strange for a lens of a prize of US$699 (599€).
|
||||
[](../media/efs_18-200.png)Along with the EOS 50D Canon announced the EF-S 18-200 3.5-5.6 IS as a new lens. The lens is intended for use with an APS-C sized sensor and insists of 16 elements (UD-glass and aspherical lenses) arranged in 12 groups. As the name says the EF-S 18-200 3.5-5.6 IS comes with an image stabilizer but somehow misses an USM ring motor which is quite strange for a lens of a prize of US$699 (599€).
|
||||
|
||||
All the specifications for this new lens are available in [an article by Bob Atkins](http://www.bobatkins.com/photography/reviews/canon_efs_18-200_is.html) too.
|
||||
|
||||
@ -3,10 +3,10 @@ layout: post
|
||||
|
||||
title: 'A New Browser Is Coming: Google Chrome'
|
||||
author: Matthias Kretschmann
|
||||
image: googlechrome.png
|
||||
image: ../media/googlechrome.png
|
||||
|
||||
date: 2008-09-01 20:40:38+00:00
|
||||
wordpress_id: 197
|
||||
|
||||
|
||||
categories:
|
||||
- design
|
||||
@ -30,7 +30,7 @@ Update 2: Google Chrome can now be downloaded for Windows from [google.com/chrom
|
||||
|
||||
Update 3: Google Chrome seems to have problems with some of my transparent PNGs:
|
||||
|
||||
|
||||
|
||||
|
||||
Update 4: There are some nice articles about various aspects of Chrome available in the web:
|
||||
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: A Long Time Ago...
|
||||
image: A-Long-Time-Ago.jpg
|
||||
image: ../media/A-Long-Time-Ago.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-09-23 20:33:48+00:00
|
||||
wordpress_id: 1905
|
||||
|
||||
category: photos
|
||||
tags:
|
||||
- mac
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: post
|
||||
|
||||
title: Futurama Mars University Wallpaper
|
||||
image: Teaser-Mars-U.jpg
|
||||
image: ../media/Teaser-Mars-U.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-09-23 23:22:16+00:00
|
||||
wordpress_id: 256
|
||||
|
||||
category: goodies
|
||||
tags:
|
||||
- wallpaper
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
layout: post
|
||||
|
||||
title: Coffee Cup Icon
|
||||
image: Teaser-Coffee-Cup-Icon.jpg
|
||||
download: coffee_cup_by_kremalicious.zip
|
||||
image: ../media/Teaser-Coffee-Cup-Icon.jpg
|
||||
download: ../media/coffee_cup_by_kremalicious.zip
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-10-23 14:59:23+00:00
|
||||
wordpress_id: 1817
|
||||
|
||||
categories:
|
||||
- goodies
|
||||
tags:
|
||||
|
||||
@ -3,10 +3,10 @@ layout: post
|
||||
|
||||
title: The Finest Coffee Cups - Most Incredible Coffee Icons On The Web
|
||||
author: Matthias Kretschmann
|
||||
image: coffee-cup-icon-kremalicious.png
|
||||
image: ../media/coffee-cup-icon-kremalicious.png
|
||||
|
||||
date: 2008-10-23 02:23:39+00:00
|
||||
wordpress_id: 277
|
||||
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
@ -23,7 +23,7 @@ Please note that these icons are the property of their respective owners and you
|
||||
|
||||
A bunch of colorful cups of coffee.
|
||||
|
||||
[](http://www.mcdodesign.com/?page_id=22)
|
||||
[](http://www.mcdodesign.com/?page_id=22)
|
||||
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ A bunch of colorful cups of coffee.
|
||||
|
||||
A hyperrealistic icon from Vegrafik
|
||||
|
||||
[](http://macthemes2.net/forum/viewtopic.php?id=16789993)
|
||||
[](http://macthemes2.net/forum/viewtopic.php?id=16789993)
|
||||
|
||||
|
||||
|
||||
@ -41,7 +41,7 @@ A hyperrealistic icon from Vegrafik
|
||||
|
||||
In a fit of megalomania I declared my icon as incredible and included it here. Originally I've made the coffee cup for the donations button on kremalicious.com.
|
||||
|
||||
[](/coffee-cup-icon)
|
||||
[](/coffee-cup-icon)
|
||||
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@ In a fit of megalomania I declared my icon as incredible and included it here. O
|
||||
|
||||
The one and only Mac OS X system replacement icon set has some coffee folders too.
|
||||
|
||||
[](http://dlanham.com/art/agua/)
|
||||
[](http://dlanham.com/art/agua/)
|
||||
|
||||
|
||||
|
||||
@ -59,14 +59,14 @@ The one and only Mac OS X system replacement icon set has some coffee folders to
|
||||
|
||||
Coffee in a metal cup. Sadly Dave didn't updated his World of Aqua icon pack with bigger sizes so it's just 128px.
|
||||
|
||||
[](http://iconfactory.com/freeware/preview/woa3)
|
||||
[](http://iconfactory.com/freeware/preview/woa3)
|
||||
|
||||
|
||||
|
||||
## Starbucks coffee icon by Rok Benedik
|
||||
|
||||
|
||||
[](http://benedik.deviantart.com/art/Starbucks-coffee-icons-96173293)
|
||||
[](http://benedik.deviantart.com/art/Starbucks-coffee-icons-96173293)
|
||||
|
||||
|
||||
|
||||
@ -75,7 +75,7 @@ Coffee in a metal cup. Sadly Dave didn't updated his World of Aqua icon pack wit
|
||||
|
||||
Also Jonas used coffee as the metaphor for the work folder (supposedly) and made clear he likes very big coffee cups.
|
||||
|
||||
[](http://www.jonasraskdesign.com/medias/medias.html)
|
||||
[](http://www.jonasraskdesign.com/medias/medias.html)
|
||||
|
||||
|
||||
|
||||
@ -84,14 +84,14 @@ Also Jonas used coffee as the metaphor for the work folder (supposedly) and made
|
||||
|
||||
Does this application need any introduction? Although not released yet the new web-coding application from MacRabbit drew a lot of attention. The icon is one of the reasons for that.
|
||||
|
||||
[](http://macrabbit.com/espresso/)
|
||||
[](http://macrabbit.com/espresso/)
|
||||
|
||||
## Coffee folders from the Pry system sets by Jonas Rask
|
||||
|
||||
|
||||
Another folder-combined-with-coffee icon by Jonas.
|
||||
|
||||
[](http://www.jonasraskdesign.com/medias/medias.html)
|
||||
[](http://www.jonasraskdesign.com/medias/medias.html)
|
||||
|
||||
|
||||
|
||||
@ -100,7 +100,7 @@ Another folder-combined-with-coffee icon by Jonas.
|
||||
|
||||
A glass coffee cup which is [wildly used](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps) on the web. Created for Windows so the icons are just 256px in size.
|
||||
|
||||
[](http://www.visualpharm.com/office_space.html)
|
||||
[](http://www.visualpharm.com/office_space.html)
|
||||
|
||||
|
||||
|
||||
@ -109,14 +109,14 @@ A glass coffee cup which is [wildly used](http://abduzeedo.com/amazing-photoshop
|
||||
|
||||
An icon set made in collaboration between [Alejandro Lopez](http://www.dimensionofdeskmod.net/medias/) & [Sergio Ruiz](http://www.camtessadesign.com/descargas/ver/the_coffee_shop) with icons related to a coffee shop.
|
||||
|
||||
[](http://RuizDesign.deviantart.com/art/The-Coffee-Shop-89457309)
|
||||
[](http://RuizDesign.deviantart.com/art/The-Coffee-Shop-89457309)
|
||||
|
||||
|
||||
|
||||
## Espresso icon by Iiro Jäppinen
|
||||
|
||||
|
||||
[](http://iirojappinen.com/medias.html)
|
||||
[](http://iirojappinen.com/medias.html)
|
||||
|
||||
|
||||
|
||||
@ -125,7 +125,7 @@ An icon set made in collaboration between [Alejandro Lopez](http://www.dimension
|
||||
|
||||
Not an icon but the coffee cup drawn in this wallpaper from Michael Flarup would make a good one. The detail of the cup is stunning.
|
||||
|
||||
[](http://pixelresort.com/wallpapers/)
|
||||
[](http://pixelresort.com/wallpapers/)
|
||||
|
||||
|
||||
|
||||
@ -134,7 +134,7 @@ Not an icon but the coffee cup drawn in this wallpaper from Michael Flarup would
|
||||
|
||||
Bean is a free word processor for Mac OS X and Laurent Baumann included a nice coffee cup in the application icon for it.
|
||||
|
||||
[](http://www.bean-osx.com/Bean.html)
|
||||
[](http://www.bean-osx.com/Bean.html)
|
||||
|
||||
|
||||
|
||||
@ -143,7 +143,7 @@ Bean is a free word processor for Mac OS X and Laurent Baumann included a nice c
|
||||
|
||||
Nice shiny coffee cups with a lot of detail in the reflections. Sadly just in 128px size maximum. Maybe you can [persuade mat-u to update this icon with bigger sizes.](http://www.mat-u.com/)
|
||||
|
||||
[](http://mat-u.deviantart.com/art/Have-A-Break-Icons-54326598)
|
||||
[](http://mat-u.deviantart.com/art/Have-A-Break-Icons-54326598)
|
||||
|
||||
|
||||
|
||||
@ -152,7 +152,7 @@ Nice shiny coffee cups with a lot of detail in the reflections. Sadly just in 12
|
||||
|
||||
Apple uses a nice coffee cup in their Java applications which can be found in the Utilities folder. Thanks to [David](http://dlanham.com/) for pointing this out.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -161,7 +161,7 @@ Apple uses a nice coffee cup in their Java applications which can be found in th
|
||||
|
||||
Trevor Kay made the new icon for Caffeine. This application prevents your Mac from automatically going to sleep. Trevor also made [some additional icons for Caffeine](http://God-X.deviantart.com/art/Caffeine-Replacement-Icons-75619389) although the coffee cup looks pretty much the same as the one from Apple's Java application icons.
|
||||
|
||||
[](http://lightheadsw.com/caffeine/)
|
||||
[](http://lightheadsw.com/caffeine/)
|
||||
|
||||
|
||||
|
||||
@ -170,7 +170,7 @@ Trevor Kay made the new icon for Caffeine. This application prevents your Mac fr
|
||||
|
||||
Some comic style icons which deviate from the realism of all the other coffee icons. Sadly just available in 128px size.
|
||||
|
||||
[](http://iconfactory.com/freeware/preview/cofe)
|
||||
[](http://iconfactory.com/freeware/preview/cofe)
|
||||
|
||||
|
||||
|
||||
@ -179,7 +179,7 @@ Some comic style icons which deviate from the realism of all the other coffee ic
|
||||
|
||||
Dave made an icon set for the Iconfactory inspired by the classic sci-fi television series of the 70's and included a Moon Coffee cup. Also just in 128px size.
|
||||
|
||||
[](http://iconfactory.com/freeware/preview/1999)
|
||||
[](http://iconfactory.com/freeware/preview/1999)
|
||||
|
||||
|
||||
|
||||
@ -188,7 +188,7 @@ Dave made an icon set for the Iconfactory inspired by the classic sci-fi televis
|
||||
|
||||
Acrylic Software's "new type of newsreader for Mac OS X Leopard" called [Times](http://www.acrylicapps.com/times/) uses a gorgeous icon made by Mikio Inose.
|
||||
|
||||
[](http://www.mikworks.com/clientwork/times/)
|
||||
[](http://www.mikworks.com/clientwork/times/)
|
||||
|
||||
|
||||
|
||||
@ -197,7 +197,7 @@ Acrylic Software's "new type of newsreader for Mac OS X Leopard" called [Times](
|
||||
|
||||
One delicious full and one empty cappuccino cup re available in this icon set made by Creative 9 Design. Available just in 256px from their [blog](http://www.c9-d.com/blog/view/63).
|
||||
|
||||
[](http://www.c9-d.com/blog/view/63)
|
||||
[](http://www.c9-d.com/blog/view/63)
|
||||
|
||||
|
||||
|
||||
@ -206,7 +206,7 @@ One delicious full and one empty cappuccino cup re available in this icon set ma
|
||||
|
||||
Not a coffee cup but also very coffee related is this awesome Cappuccino machine icon (although it shows an Espresso machine) made by [Sofa](http://www.madebysofa.com) for the Cappuccino framework.
|
||||
|
||||
[](http://cappuccino.org/)
|
||||
[](http://cappuccino.org/)
|
||||
|
||||
|
||||
|
||||
@ -217,16 +217,16 @@ Not a coffee cup but also very coffee related is this awesome Cappuccino machine
|
||||
|
||||
Finally here're some nice high quality tutorials for you to help you build your own coffee cup.
|
||||
|
||||
* [Using Gradients to Make Light and Shadow - and a Coffee Cup!](http://psdtuts.com/tutorials-effects/using-gradients-to-make-light-and-shadow-and-a-coffee-cup/)
|
||||
* [Using Gradients to Make Light and Shadow - and a Coffee Cup!](http://psdtuts.com/tutorials-effects/using-gradients-to-make-light-and-shadow-and-a-coffee-cup/)
|
||||
Collis from [psdtuts](http://psdtuts.com) made a nice tutorial with a similar perspective as found in [my Coffee Cup Icon](http://www.kremalicious.com/goodies/).
|
||||
|
||||
* [Design A Coffee Mug Icon](http://www.myinkblog.com/2008/08/02/design-a-coffee-mug-icon/)
|
||||
* [Design A Coffee Mug Icon](http://www.myinkblog.com/2008/08/02/design-a-coffee-mug-icon/)
|
||||
Photoshop tutorial by Andrew Houle for creating a coffee cup icon.
|
||||
|
||||
* [Creating a Coffee Cup with Inkscape](http://vectortuts.com/illustration/creating-a-coffee-cup-with-inkscape/)
|
||||
* [Creating a Coffee Cup with Inkscape](http://vectortuts.com/illustration/creating-a-coffee-cup-with-inkscape/)
|
||||
Peter Anglea with a nice vector tutorial using the open source vector app Inkscape.
|
||||
|
||||
* [Amazing Photoshop Light Effect In 10 Steps](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps)
|
||||
* [Amazing Photoshop Light Effect In 10 Steps](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps)
|
||||
Not an icon tutorial but Fabio Sasso achieves some awesome light effects combined with the coffee cup from the [Office Space icon set](http://www.visualpharm.com/office_space.html).
|
||||
|
||||
|
||||
|
||||
@ -3,10 +3,10 @@ layout: post
|
||||
|
||||
title: The Definite Guide To Watermarks In Apple Aperture
|
||||
author: Matthias Kretschmann
|
||||
image: watermark_aperture.jpg
|
||||
image: ../media/watermark_aperture.jpg
|
||||
|
||||
date: 2008-10-26 16:05:58+00:00
|
||||
wordpress_id: 318
|
||||
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
@ -27,7 +27,7 @@ In this article I will lay out every way I've found to add watermarks to your im
|
||||
|
||||
Aperture has built-in support for watermarking your images on export. But you have to create a watermark image in a bitmap graphic editor like [Photoshop](http://www.adobe.com/products/photoshop/photoshop/), [Pixelmator](http://www.pixelmator.com/) or [Acorn](http://flyingmeat.com/acorn/) before you can start adding watermarks. But I've written a detailed article about how to use this feature of Aperture back in May 2008 named [HowTo: Use high-quality watermarks in your images with Aperture 2.1](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/). In short, you have to create your watermark image first and then define it in a new export preset. In the end all images exported with this preset will have your defined watermark image on them. If you want to watermark your images the Aperture way be sure to [check out my tutorial](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/).
|
||||
|
||||
|
||||
|
||||
|
||||
This way is perfect if you want to watermark a lot of images at once or if your copyright info doesn't change often. And this works with Aperture's Web Journal or Web Page feature if you add a watermark image to the export presets for that. Also this works with any other export plug-in in Aperture which utilizes the export presets, like the [FlickrExport](http://connectedflow.com/flickrexport/aperture/) plug-in. You just have to create e.g. a flickr export preset, define your watermark image there and chose it inside of FlickrExport from the export preset dropdown list.
|
||||
|
||||
@ -57,7 +57,7 @@ Because of Aperture's workflow design you're always free to open up your image i
|
||||
|
||||
Now you can just right click or ctrl + click on every image to open the context menu and choose Edit With whereas the first entry will be your external editor set in the preferences. Aperture will automatically render your image creating a new file and opens that up. Just add a new text layer in your external editor, type in your preferred text and save the file from there. Aperture will update with the changes accordingly.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -83,7 +83,7 @@ But since Aperture always creates a psd or tiff file for that you will end up wi
|
||||
|
||||
But it has some powerful features in terms of watermarking: It can read out some IPTC fields to use the text as your copyright text, it is capable of saving presets and you can open several images at once in the plug-in window. So it works similar to Aperture's built-in watermarking feature but gives you full control over the watermark look without leaving Aperture.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -101,7 +101,7 @@ But you can't see your changes made in the plug-in on the images in your library
|
||||
|
||||
With the release of Aperture 2.1 and its Edit Plug-In architecture Apple also released some sample plug-ins which aren't included in Aperture (just the Dodge & Burn plug-in is). But you can easily [download it from Apple’s Developer Connection website without registration](http://developer.apple.com/samplecode/BordersAndTitles/index.html) for free.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -118,7 +118,7 @@ As with every Edit Plug-In every time you fire up an image with this plug-in Ape
|
||||
|
||||
[Impression](http://www.bluecrowbar.com/software/impressionaperture/) is an Aperture Edit Plug-In from [Blue Crowbar Software](http://www.bluecrowbar.com) released in Sept. 2009. The developer claims it's mainly targeted for those people who want to have a copy of their watermarked image within Aperture. Also there's a nice blog post by the developer lining out [why he thinks this plug-in beats Aperture's builtin watermarks.](http://www.bluecrowbar.com/blog/posts/impression-for-aperture.html)
|
||||
|
||||
|
||||
|
||||
|
||||
This plug-in is pretty powerful and probably the best choice for watermarking your images in Aperture through an Edit Plug-In workflow. Watermarking multiple photos at once is also possible and you can use existing PSD or PNG images as a watermark image as well as from a RTF text file. Apart from the functionality it also has a quite beautiful UI with the controls laying over your image.
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ title: 'HowTo: Set A Custom Gravatar Image In Wordpress 2.7+'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-12-11 22:59:06+00:00
|
||||
wordpress_id: 344
|
||||
|
||||
|
||||
categories:
|
||||
- design
|
||||
@ -19,7 +19,7 @@ redirect_from:
|
||||
- /2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/
|
||||
---
|
||||
|
||||
|
||||
|
||||
Sure enough I've upgraded immediately when [Wordpress 2.7 was released](http://wordpress.org/development/2008/12/coltrane/). Among all the other things that changed in this new version the comments functions got a massive overhaul. But the [new comment loop](http://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#The_Comments_Loop) with the [new function `<?php wp_list_comments(); ?>`](http://codex.wordpress.org/Template_Tags/wp_list_comments) lacks the ability to quickly set a custom default gravatar or avatar image. But with some help of the functions.php file we can set the default gravatar image in the Discussion settings in the Wordpress backend.
|
||||
|
||||
Before Wordpress 2.7 I achieved a custom gravatar image on kremalicious.com with this code placed in the comments.php template file:
|
||||
@ -55,7 +55,7 @@ But we can use the functions.php file in your template directory and add some li
|
||||
|
||||
Just set a name for your custom Gravatar image to show up beside the image in the Wordpress back-end. The code above assumes you have your custom default gravatar image inside a folder called images inside your template directory. Change it to your environment if neccessary. After that a new entry in the Wordpress backend under Settings > Discussions will appear with the custom image specified:
|
||||
|
||||
|
||||
|
||||
|
||||
And you can adjust the displayed size of the gravatar image by adding a parameter to `<?php wp_list_comments(); ?>` function in your comments.php file:
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ title: 'HowTo: Styling Author Comments With Wordpress 2.7+'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-12-13 16:47:43+00:00
|
||||
wordpress_id: 360
|
||||
|
||||
|
||||
categories:
|
||||
- design
|
||||
@ -16,7 +16,7 @@ tags:
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
Since my update to Wordpress 2.7 I'm pretty much into all the new comments stuff. As [I've written before](http://www.kremalicious.com/2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/), the comment functionality changed dramatically with Wordpress 2.7. This makes writing a comments template much easier but if you used Worpress prior to 2.7 you have to change some things to work again. Beside other things this includes [Gravatar styling](http://www.kremalicious.com/2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/) and also adding different styling to comments from the author of an article. In this article I will show you how to realize the latter with Wordpress 2.7 and above.
|
||||
|
||||
Let's start by looking at the code to achieve styling of author comments prior to Wordpress 2.7. On kremalicious.com I've used this code:
|
||||
|
||||
@ -5,7 +5,7 @@ title: The Mac in Futurama
|
||||
author: Matthias Kretschmann
|
||||
date: 2009-01-05 03:14:45+00:00
|
||||
|
||||
image: futurama-mac-teaser.png
|
||||
image: ../media/futurama-mac-teaser.png
|
||||
category: design
|
||||
tags:
|
||||
- futurama
|
||||
@ -13,8 +13,7 @@ tags:
|
||||
|
||||
coinhive: true
|
||||
|
||||
slug: the-mac-in-futurama
|
||||
wordpress_id: 440
|
||||
|
||||
---
|
||||
|
||||
Time for some Mac Futurama crossover geekiness! In a fun watching process I've compiled a list of all the references to Apple's Macintosh and other Apple products. In Futurama we mainly see references to the old, classic Macs running [System 6](http://en.wikipedia.org/wiki/Apple_System_Software_6), [System 7](http://en.wikipedia.org/wiki/System_7) or [OS 9](http://en.wikipedia.org/wiki/Mac_OS_9) ending with the colorful iMac G3. This is likely caused by the timeframe in which Matt Groening and David X. Cohen developed the first season of Futurama (1997-1999).
|
||||
@ -25,232 +24,120 @@ For orientation: I've followed the original four season production cycle and not
|
||||
|
||||
_All screens (C) 1999 by Twentieth Century Fox Film Corp._
|
||||
|
||||
|
||||
|
||||
## Season 1
|
||||
|
||||
|
||||
## 1ACV02 - The Series Has Landed
|
||||
|
||||
|
||||
|
||||
The moon farmer introduces his three robot daughters. One of them is named "Daisy May 128k" as a reference to the first [Macintosh 128k](http://en.wikipedia.org/wiki/Macintosh_128K).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 1ACV05 - Fear Of A Bot Planet
|
||||
|
||||
|
||||
|
||||
Indeed the episode with the most Mac references. The Planet Express crew have to deliver a package to a planet settled by separatist robots. And guess what their favorite OS is?
|
||||
|
||||
The sound to start the daily human hunt is the [Mac startup chime](http://musicthing.blogspot.com/2005/05/tiny-music-makers-pt-4-mac-startup.html) composed by [Jim Reekes ](http://en.wikipedia.org/wiki/Jim_Reekes) and first used in 1991 on the [Macintosh Quadra 700](http://en.wikipedia.org/wiki/Macintosh_Quadra_700). Maybe the [Chime of Death](http://en.wikipedia.org/wiki/Chimes_of_Death) would be more suitable for that.
|
||||
|
||||
|
||||
|
||||
The judge is a not so friendly Macintosh 128k with a classic Mac OS Finder face. It uses Mac OS interface elements while judging and freezing at it.
|
||||
|
||||
|
||||
|
||||
But the robots have some cool computer voodoo to get him back judging without the need of a restart.
|
||||
|
||||
|
||||
This one can be just coincidence or no Mac reference at all. The colors of the eyes and the mouths of the robot elders look pretty familiar to the [iMac G3 color flavors](http://www.apple.com/pr/photos/iMac/imaccolors.html) or the [original iBook colors](http://www.theapplecollection.com/iMac/iBook2.html) although there never was a yellow iMac (or iBook). 
|
||||
|
||||
|
||||
|
||||
This one can be just coincidence or no Mac reference at all. The colors of the eyes and the mouths of the robot elders look pretty familiar to the [iMac G3 color flavors](http://www.apple.com/pr/photos/iMac/imaccolors.html) or the [original iBook colors](http://www.theapplecollection.com/iMac/iBook2.html) although there never was a yellow iMac (or iBook). 
|
||||
|
||||
## 1ACV10 A Flight to Remember
|
||||
|
||||
|
||||
|
||||
The robot guy on the bar mixes sad Bender a drink out of Jägermeister and some Pennzoil product. He is named iZac as a reference to the Apple iMac or more generally for the "i"-brand. Beside that iZac is written in kind of the same font (variant of [ITC Garamond](http://new.myfonts.com/fonts/itc/garamond/), thanks [Schoschie](http://www.kremalicious.com/2009/01/the-mac-in-futurama/#comment-48831)) as in [Apple's Think Different tagline and campaigns](http://web.archive.org/web/20010228171255/www.apple.com/thinkdifferent/). Furthermore (but non-Mac related) iZac is also a reference to Isaac the bartender from the TV series love boat from 1977, as ["yeah" pointed out in the comments](http://www.kremalicious.com/2009/01/the-mac-in-futurama/#comment-37416). Thanks yeah!
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 1ACV11 Mars University
|
||||
|
||||
|
||||
|
||||
The Robot House fraternity is spying at a Macintosh 128k in the girls bed rooms. 
|
||||
|
||||
|
||||
The Robot House fraternity is spying at a Macintosh 128k in the girls bed rooms. 
|
||||
|
||||
## 1ACV12 - When Aliens Attack
|
||||
|
||||
|
||||
|
||||
The crew searches the Internet on a Mac OS system for facts about the TV series Single Female Lawyer. 
|
||||
|
||||
|
||||
The crew searches the Internet on a Mac OS system for facts about the TV series Single Female Lawyer. 
|
||||
|
||||
## Season 2
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 2ACV09 A Bicyclops Built For Two
|
||||
|
||||
Bender choses a disguise while being in the Internet. He does this with a Mac style menu. 
|
||||
|
||||
|
||||
Bender choses a disguise while being in the Internet. He does this with a Mac style menu. 
|
||||
|
||||
Alcasar submits Leela a video message which is played on Leelas display in a classic Mac OS styled window. 
|
||||
|
||||
|
||||
Alcasar submits Leela a video message which is played on Leelas display in a classic Mac OS styled window. 
|
||||
|
||||
## 2ACV15 The Problem With Popplers
|
||||
|
||||
|
||||
|
||||
Hermes finds the name Popplers while searching the Internet on an iBook G3 with a weird antenna on top of it. 
|
||||
|
||||
|
||||
Hermes finds the name Popplers while searching the Internet on an iBook G3 with a weird antenna on top of it. 
|
||||
|
||||
## 2ACV17 War Is The H-Word
|
||||
|
||||
|
||||
|
||||
Earth attacks the balls on Spheron 1 and a robot surgeon named iHawk operates the injured earthlings with a Martini in his hands. 
|
||||
|
||||
|
||||
Earth attacks the balls on Spheron 1 and a robot surgeon named iHawk operates the injured earthlings with a Martini in his hands. 
|
||||
|
||||
## Season 3
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 3ACV04 The Luck Of The Fryrish
|
||||
|
||||
|
||||
|
||||
Again the crew searches the Internet with a classic Mac OS interface. 
|
||||
|
||||
|
||||
Again the crew searches the Internet with a classic Mac OS interface. 
|
||||
|
||||
## 3ACV06 Bendless Love
|
||||
|
||||
|
||||
|
||||
The Bending School for robots seems to be running on Mac OS because it uses a Mac OS interface progress bar. 
|
||||
|
||||
|
||||
The Bending School for robots seems to be running on Mac OS because it uses a Mac OS interface progress bar. 
|
||||
|
||||
## 3ACV15 I Dated A Robot
|
||||
|
||||
|
||||
|
||||
Sure enough, Prof. Farnsworth's blank robots are Mac formatted.
|
||||
|
||||
|
||||
Billy starring the propaganda movie "I dated a robot!" downloads his Monroe-Bot with a classic Macintosh 128k. 
|
||||
|
||||
|
||||
|
||||
Billy starring the propaganda movie "I dated a robot!" downloads his Monroe-Bot with a classic Macintosh 128k. 
|
||||
|
||||
## Futurama 3ACV21 Future Stock
|
||||
|
||||
|
||||
|
||||
Planet Express is under new management of "that guy" from the 1980s. He shows the crew a new ad which is a parody of [Apple's legendary 1984 ad](http://www.youtube.com/watch?v=R706isyDrqI). 
|
||||
|
||||
|
||||
Planet Express is under new management of "that guy" from the 1980s. He shows the crew a new ad which is a parody of [Apple's legendary 1984 ad](http://www.youtube.com/watch?v=R706isyDrqI). 
|
||||
|
||||
## Season 4
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 4ACV06 Bender Should Not Be Allowed On TV
|
||||
|
||||
|
||||
|
||||
The president of the TV network (who seems to be just a plain non-Mac laptop), has some sort of QuickTime Player running on him.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 4ACV08 Crimes Of The Hot
|
||||
|
||||
|
||||
|
||||
iZac again. 
|
||||
|
||||
|
||||
iZac again. 
|
||||
|
||||
## Season 5
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5ACV01 Bender's Big Score Part 1
|
||||
|
||||
Bender is infected by the Scammers' obedience virus called iObey. 
|
||||
|
||||
## 5ACV15 Into The Wild Green Yonder Part 4
|
||||
|
||||
Bender is infected by the Scammers' obedience virus called iObey. 
|
||||
|
||||
|
||||
|
||||
## 5ACV15 Into The Wild Green Yonder Part 4
|
||||
|
||||
|
||||
|
||||
The audience in the violet dwarf star blowup or Encyclopod (or so) birth scene consists of many Futurama characters from all the Futurama series. If you look closely you can spot iZac again (upper left). In this screenshot there's also Matt Groening's head in the audience. 
|
||||
|
||||
|
||||
|
||||
The audience in the violet dwarf star blowup or Encyclopod (or so) birth scene consists of many Futurama characters from all the Futurama series. If you look closely you can spot iZac again (upper left). In this screenshot there's also Matt Groening's head in the audience. 
|
||||
|
||||
## Futurama Stuff For Your Mac
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[[Futurama Vol. 1-6](http://iconfactory.com/freeware/preview/fut1)
|
||||
[[Futurama Vol. 1-6](http://iconfactory.com/freeware/preview/fut1)
|
||||
Amazing icons made by Iconfactory's [Gedeon Maheux](http://gedblog.com/). The recent [Volume 6 release](http://iconfactory.com/freeware/preview/fut6) also comes with some nice wallpapers showing silhouettes of the Planet Express crew members. [Vol.2](http://iconfactory.com/freeware/preview/fut2), [Vol.3](http://iconfactory.com/freeware/preview/fut3), [Vol.4](http://iconfactory.com/freeware/preview/fut4), [Vol.5](http://iconfactory.com/freeware/preview/fut5), [Vol.6](http://iconfactory.com/freeware/preview/fut6)
|
||||
Also [a search for Futurama in the freeware section on Iconfactory.com](http://iconfactory.com/search/freeware/futurama) is always a good idea...
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[What If? Machine Terminal Icon](http://scartissuemark.deviantart.com/art/What-If-Machine-Terminal-Icon-71455726)
|
||||
[What If? Machine Terminal Icon](http://scartissuemark.deviantart.com/art/What-If-Machine-Terminal-Icon-71455726)
|
||||
A nice icon intended as a Terminal replacement icon made by [Mark Hawkins](http://scartissuemark.deviantart.com/).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Futurama: Trash Replacement](http://scartissuemark.deviantart.com/art/Futurama-Trash-Replacement-71612045)
|
||||
[Futurama: Trash Replacement](http://scartissuemark.deviantart.com/art/Futurama-Trash-Replacement-71612045)
|
||||
A nice icon showing a big bucket of Fishy Joe's Popplers. Made by [Mark Hawkins](http://scartissuemark.deviantart.com/) too.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Futurama Random Quote Generator](http://www.apple.com/medias/dashboard/movie_tv/futuramarandomquotegenerator.html)
|
||||
[Futurama Random Quote Generator](http://www.apple.com/medias/dashboard/movie_tv/futuramarandomquotegenerator.html)
|
||||
A Dashboard widget for Mac OS X giving you random quotes from Futurama. Made by [rawpixels](http://www.rawpixels.com/).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Futurama Mars University Wallpaper](http://www.kremalicious.com/2008/09/new-goodie-futurama-mars-university-wallpaper/)
|
||||
[Futurama Mars University Wallpaper](http://www.kremalicious.com/2008/09/new-goodie-futurama-mars-university-wallpaper/)
|
||||
And there's my Futurama Mars University Wallpaper for Desktop and iPhone available in the [Goodies section](http://www.kremalicious.com/goodies) on this website.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Futurama: Out Of Whale Oil Wallpaper Pack](http://www.kremalicious.com/2009/02/out-of-whale-oil/)
|
||||
[Futurama: Out Of Whale Oil Wallpaper Pack](http://www.kremalicious.com/2009/02/out-of-whale-oil/)
|
||||
And finally there's my Futurama: Out Of Whale Oil Wallpaper pack for Desktop and iPhone also available in the [Goodies section](http://www.kremalicious.com/goodies) on this website. Vivid green and pink Feminista versions included.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
And that's it folks. Hope you enjoyed this fun article. If you know of more Mac or Apple references in Futurama or links to nice Futurama icons, wallpapers or application resources feel free to post them in the comments.
|
||||
|
||||
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.
|
||||
|
||||
@ -2,17 +2,17 @@
|
||||
layout: post
|
||||
|
||||
title: 'Portal Thingy: matthiaskretschmann.com'
|
||||
image:
|
||||
image: ../media/
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2009-02-01 06:01:28+00:00
|
||||
wordpress_id: 504
|
||||
|
||||
categories:
|
||||
- personal
|
||||
---
|
||||
|
||||
|
||||
[](http://matthiaskretschmann.com)
|
||||
[](http://matthiaskretschmann.com)
|
||||
Just some self reference here. I've launched a slick new site under [matthiaskretschmann.com](http://matthiaskretschmann.com) today which has an absolute simple concept. It's kind of a digital business card site for being digitally present under my name. Beside that it has Links to my social media stuff so it's easier for you to stalk me. In the 90's we probably would have called it a Portal.
|
||||
|
||||
As you can read in the sliding Colophon at the bottom of the site, it is written in valid XHTML 1.1 and CSS3 code and makes heavy use of jQuery. But, of course, it is fully functional without JavaScript enabled. Even the tab interface remains intact in such a case which is done by some PHP magic. Just the print and text-size buttons in the lower right will be gone without JavaScript. But that's ok because their functionality can be implemented just with JavaScript anyway.
|
||||
@ -39,23 +39,23 @@ If you find a bug or have any additions feel free to [contact me](/contact), pos
|
||||
|
||||
With the concept of this little site I've kinda jumped on the bandwagon which obviously was started by [Tim van Damme's excellent small site under timvandamme.com](http://timvandamme.com/).
|
||||
|
||||
[](http://timvandamme.com)
|
||||
[](http://timvandamme.com)
|
||||
|
||||
I was just blown away by the smart concept when first seeing this site last year and immediately made some rough sketches and drafts for my own implementation of this concept. But sadly time was too short for a new personal side project so everything laid down until last week.
|
||||
|
||||
Another great version based on Tim's concept was crafted by [Mr. Foliage-O-Meter Rogie King](http://www.komodomedia.com/) under [rogieking.com](http://rogieking.com/) and there was also a nice little discussion about inspiration in [Rogie's blog](http://www.komodomedia.com/blog/2009/01/timvandammecom/) after he had launched his site.
|
||||
|
||||
[](http://rogieking.com)
|
||||
[](http://rogieking.com)
|
||||
|
||||
Finally I find it very interesting to compare the jQuery code of the three sites afterwards. We all have some sort of tab interface with fancy stuff going on when the tabs change. But we wrote three completely different versions of code for that purpose but all with the same JavaScript library. Oh mighty flexible jQuery!
|
||||
|
||||
## More Business Card Style Sites
|
||||
|
||||
|
||||
|
||||
[Icon- and UI-Designer Laurent Baumann](http://lbaumann.com/)
|
||||
|
||||
|
||||
|
||||
[Interface-Designer Maximilian Schöning](http://www.maximilianschoening.com/)
|
||||
|
||||
|
||||
|
||||
[Consultant & Blogger Aref Jdey (Design & Code by yours truly)](http://www.arefjdey.com/)
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
layout: post
|
||||
|
||||
title: We Are Out Of Whale Oil
|
||||
image: Teaser-Out-Of-Whale-Oil.jpg
|
||||
download: out-of-whale-oil-wall-by-kremalicious.zip
|
||||
image: ../media/Teaser-Out-Of-Whale-Oil.jpg
|
||||
download: ../media/out-of-whale-oil-wall-by-kremalicious.zip
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2009-02-17 20:11:55+00:00
|
||||
wordpress_id: 533
|
||||
|
||||
|
||||
featured: true
|
||||
category: goodies
|
||||
@ -23,7 +23,7 @@ redirect_from:
|
||||
|
||||
Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest Futurama movie Into The Wild Green Yonder. This pack includes 4 versions of the Planet Express ship whale oil indicator in 2 different sizes for desktop and iPhone use. Vivid pink Feminista versions included too.
|
||||
|
||||
Here're the details for the whole pack:
|
||||
Here're the details for the whole pack:
|
||||
|
||||
* 2 high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600)
|
||||
* 2 iPhone versions with empty and full whale oil indicator (320x480)
|
||||
@ -31,7 +31,7 @@ Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest F
|
||||
* 2 Feminista iPhone versions with empty and full whale oil indicator (320x480)
|
||||
* Icon folder files for this wallpaper release
|
||||
|
||||
[](http://www.kremalicious.com/goodies/#wall)
|
||||
[](http://www.kremalicious.com/goodies/#wall)
|
||||
|
||||
Seriously, the pink versions are burning my eyes but the pink is a good reference to the events in the recent movie.
|
||||
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: post
|
||||
|
||||
title: Ultimate Share Link Bonanza For Coda, Wordpress And Everything Else
|
||||
download: share-link-bonanza-coda-clips.zip
|
||||
download: ../media/share-link-bonanza-coda-clips.zip
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2009-03-29 23:12:15+00:00
|
||||
wordpress_id: 576
|
||||
|
||||
|
||||
categories:
|
||||
- design
|
||||
@ -17,7 +17,7 @@ tags:
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
Ever wanted to include those sharing links to social or bookmarking sites so users can easily submit your content to these sites in a Wordpress site or any other platform? Then you might have experienced a rather time consuming search odyssey to get those links. But fear no more! In this article I've provided a huge collection of all the links to your favorite social sites compiled in two handy Coda Clip files in a plain and a Wordpress version. And the non-Coda users can download an html file with all the links included.
|
||||
|
||||
Additionally you'll find a huge list within this article with the separated links in two versions for each site. And finally I've put together a quick tutorial for using buttons or icons with these links. This way you can easily add content submit/sharing links to your sites in no time.
|
||||
@ -42,7 +42,7 @@ _
|
||||
|
||||
## Bonus: Coda Clips Icon
|
||||
|
||||
There's no special icon for Coda Clips included in the recent Coda version (they use the blank one) so I quickly created one based on the other Coda file type icons. And the nice Panic guys allowed me to distribute this icon here. I've just made the 256px icon a bit sharper than the equivalent other coda file type icons.
|
||||
There's no special icon for Coda Clips included in the recent Coda version (they use the blank one) so I quickly created one based on the other Coda file type icons. And the nice Panic guys allowed me to distribute this icon here. I've just made the 256px icon a bit sharper than the equivalent other coda file type icons.
|
||||
|
||||
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):
|
||||
|
||||
@ -50,11 +50,11 @@ If you download the above Coda Clip files this icon is already applied on the cl
|
||||
|
||||
## 2. Usage
|
||||
|
||||
Just download and double click the Coda clip documents and two new clip groups will be created in your Coda Clips HUD with the various clips inside of them. All you have to do in Coda is inserting the clip by double clicking in the Coda Clips HUD and start typing your link text or type your link text first, select it and double click the clip in order to insert it.
|
||||
Just download and double click the Coda clip documents and two new clip groups will be created in your Coda Clips HUD with the various clips inside of them. All you have to do in Coda is inserting the clip by double clicking in the Coda Clips HUD and start typing your link text or type your link text first, select it and double click the clip in order to insert it.
|
||||
|
||||
That's because both collections have their placeholder selection (the ) located where the link text would be:
|
||||
That's because both collections have their placeholder selection (the ) located where the link text would be:
|
||||
|
||||
{% highlight html %}<a href="" title=""></a>{% endhighlight %}
|
||||
{% highlight html %}<a href="" title=""></a>{% endhighlight %}
|
||||
|
||||
As you can see I've also included the link title value usually with the name of the specific social site. Also I've already encoded all the entities so there shouldn't be any (X)HTML validation errors when using these links in your projects.
|
||||
|
||||
@ -74,7 +74,7 @@ Apart from that some sites allow you to add and submit more informations than ju
|
||||
|
||||
## 2.2 Share Links (Wordpress Edition)
|
||||
|
||||
The Wordpress edition of these share link collection includes some Wordpress php bits for dynamically creating the whole submit URL so there's no need to manually edit most of the links. The Wordpress template tags used are:
|
||||
The Wordpress edition of these share link collection includes some Wordpress php bits for dynamically creating the whole submit URL so there's no need to manually edit most of the links. The Wordpress template tags used are:
|
||||
|
||||
* `<?php the_permalink();?>` to create the URL dynamically depending on the article under which you have included the share and submit links.
|
||||
|
||||
@ -85,7 +85,7 @@ Anyway, as I've said above some sites allow more to submit here and you'll find
|
||||
|
||||
## 3. Quick Tutorial For Using Icons With These Links
|
||||
|
||||
I've also written a quick tutorial in case you want to use little images as icons beside your links. To achieve this these two solution provided here should fit every need for this. You can do this by using one of these two techniques realized with HTML and CSS:
|
||||
I've also written a quick tutorial in case you want to use little images as icons beside your links. To achieve this these two solution provided here should fit every need for this. You can do this by using one of these two techniques realized with HTML and CSS:
|
||||
|
||||
## 3.1 Use The <img /> Tag Element
|
||||
|
||||
@ -675,7 +675,7 @@ Just click the Toggle All Links button to reveal them and click it again to hide
|
||||
|
||||
## 5. Please Jump Around, Then Spread The Word
|
||||
|
||||
|
||||
|
||||
|
||||
If you ever wanted or had to include such sharing links manually in your sites and searched hours for those you should already have recognized the value of this article and if not already happened you can now jump around to express your enjoyment. After this you should immediately bookmark or share this site on your favorite social site. And while you're at it [I could use another coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=krema%40jpberlin%2ede&item_name=kremalicious%2ecom%20%2d%20Buy%20me%20a%20coffee%20or%20two%20or%20three%20or%20more&no_shipping=1&return=http%3a%2f%2fwww%2ekremalicious%2ecom%2fthank%2dyou%2f&tax=0¤cy_code=EUR&lc=US&bn=PP%2dDonationsBF&charset=UTF%2d8).
|
||||
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
layout: post
|
||||
|
||||
title: Twitter Crisp
|
||||
image: Teaser-Twitter-Crisp.jpg
|
||||
download: twitter-crisp-by-kremalicious.zip
|
||||
image: ../media/Teaser-Twitter-Crisp.jpg
|
||||
download: ../media/twitter-crisp-by-kremalicious.zip
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2009-06-04 00:16:40+00:00
|
||||
wordpress_id: 794
|
||||
|
||||
categories:
|
||||
- goodies
|
||||
tags:
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
layout: post
|
||||
|
||||
title: Adiumeetie. Tweetie Style Adium Icon
|
||||
image: Teaser-Adiumeetie.jpg
|
||||
download: adiumeetie-by-kremalicious.zip
|
||||
image: ../media/Teaser-Adiumeetie.jpg
|
||||
download: ../media/adiumeetie-by-kremalicious.zip
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2009-06-24 21:00:38+00:00
|
||||
wordpress_id: 844
|
||||
|
||||
category: goodies
|
||||
tags:
|
||||
- icon
|
||||
@ -17,13 +17,13 @@ tags:
|
||||
|
||||
Here's a new desktop goodie for your pleasure. It's a replacement dock icon for the popular Mac IM client [Adium](http://adium.im/) following the style of atebit's excellent [Tweetie for Mac](http://www.atebits.com/tweetie-mac/) icon.
|
||||
|
||||
|
||||
|
||||
|
||||
While the Tweetie Mac icon (and it's UI) was discussed quite controversial (which caused some very nice Tweetie replacement icons to appear, like [here](http://jonasraskdesign.com/medias/medias.html), [here](http://iconblock.deviantart.com/art/Tweetie-Mix-120360482), [here](http://macthemes2.net/forum/viewtopic.php?id=16795744) or [here](http://www.flickr.com/photos/marcelomarfil/3611311439/)), I grew to like the style of it. But Adium beside Tweetie in the Dock just looked weird... (No offense, [Adam](http://www.artofadambetts.com/weblog/?p=108)) So I redrew the whole icon and used Adium's duck silhouette on it and made some obvious and subtle changes in comparison to the Tweetie icon. And thanks to [Loren](http://blog.atebits.com/) who kind of rubber-stamped this icon release.
|
||||
|
||||
The icon comes in various formats (iContainer, icns, png) in sizes from 512px-16px and as an Adium dock icon package. This icon package uses some more icons (just 128px each) for the different states of Adium (online, offline, alert etc.) and includes the application icon too.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Download
|
||||
@ -36,7 +36,7 @@ Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or cli
|
||||
|
||||
## Adium Icon Usage
|
||||
|
||||
Just double click the Adiumeetie.AdiumIcon file and the dock icon gets installed automatically. Then you can select the icon in Adium's preferences under Appearance > Dock Icon from the drop-down menu. After this the icon should be ready as your new Adium icon both in the Dock and in your Applications folder.
|
||||
Just double click the Adiumeetie.AdiumIcon file and the dock icon gets installed automatically. Then you can select the icon in Adium's preferences under Appearance > Dock Icon from the drop-down menu. After this the icon should be ready as your new Adium icon both in the Dock and in your Applications folder.
|
||||
|
||||
The icon is free for your personal use and I hope you'll enjoy it. If you do, don't forget to [spread the word via Twitter](http://twitter.com/home?status=Adiumeetie%3A%20Tweetie%20Style%20Adium%20Dock%20Icon%20from%20%40kremalicious%20http://kremalicious.com/adiumeetie/) and all your other favorite social media sites.
|
||||
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
layout: post
|
||||
|
||||
title: Delibar Interface Replacement Icons
|
||||
image: Teaser-Delibar-Icons.jpg
|
||||
download: delibar-by-kremalicious.zip
|
||||
image: ../media/Teaser-Delibar-Icons.jpg
|
||||
download: ../media/delibar-by-kremalicious.zip
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2009-09-05 19:07:31+00:00
|
||||
wordpress_id: 936
|
||||
|
||||
categories:
|
||||
- goodies
|
||||
tags:
|
||||
|
||||
@ -5,7 +5,7 @@ title: Using The New Post Thumbnail Feature In WordPress 2.9
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2009-12-17 04:00:21+00:00
|
||||
wordpress_id: 959
|
||||
|
||||
|
||||
categories:
|
||||
- design
|
||||
@ -19,11 +19,11 @@ redirect_from:
|
||||
- /2009/12/wordpress-post-thumbnails/
|
||||
---
|
||||
|
||||
WordPress 2.9 added a new feature which allows you to assign an image to an article to make it the post image like it's often used in magazine style themes. This new feature along with a new template tag makes all the custom field hacks usually used for this functionality in the past obsolete. So here's a quick walkthrough to make use of the new post thumbnail feature and of course how to make it backwards compatible.
|
||||
WordPress 2.9 added a new feature which allows you to assign an image to an article to make it the post image like it's often used in magazine style themes. This new feature along with a new template tag makes all the custom field hacks usually used for this functionality in the past obsolete. So here's a quick walkthrough to make use of the new post thumbnail feature and of course how to make it backwards compatible.
|
||||
|
||||
## 1. Activate The Feature
|
||||
|
||||
For whatever reason you first have to activate the feature with an entry in your theme's _functions.php_ file in order to get the Post Thumbnail box in the Editor.
|
||||
For whatever reason you first have to activate the feature with an entry in your theme's _functions.php_ file in order to get the Post Thumbnail box in the Editor.
|
||||
|
||||
So just open up your theme's _functions.php_ file in your favorite editor or create it if there's no such file in your theme folder. Add this little code snippet to this file:
|
||||
|
||||
@ -47,21 +47,21 @@ This makes sure WordPress installation prior to 2.9 won't get screwed up when us
|
||||
## 2. Add A Post Thumbnail To Your Post
|
||||
|
||||
|
||||
After you've added the above mentioned code into your _functions.php_ file there should be a new Post Thumbnail box in the WordPress editor view on the right side.
|
||||
After you've added the above mentioned code into your _functions.php_ file there should be a new Post Thumbnail box in the WordPress editor view on the right side.
|
||||
|
||||
In this box click on the _Set Thumbnail link_ and the usual Add Media dialogue will pop up where you can choose an image from your Media Library. At the end of the dialogue for the selected image there's a new link beside the Insert into Post button called _Use as thumbnail_.
|
||||
|
||||
Click this and your chosen image will be assigned as the post thumbnail. (Unfortunately the _Use as thumbnail_ link is missing in the dialogue which appears after uploading an image, it's just there if you browse your Media Library.)
|
||||
Click this and your chosen image will be assigned as the post thumbnail. (Unfortunately the _Use as thumbnail_ link is missing in the dialogue which appears after uploading an image, it's just there if you browse your Media Library.)
|
||||
|
||||
You can close the media dialogue now and you will see the image in the Post Thumbnail box:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 3. Display The Post Thumbnail In Your Theme
|
||||
|
||||
|
||||
Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your _index.php_ file:
|
||||
Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your _index.php_ file:
|
||||
{% highlight php %}<?php the_post_thumbnail(); ?>{% endhighlight %}
|
||||
This template tag will display the thumbnail sized post thumbnail by default and is essentially the same as:
|
||||
|
||||
@ -173,7 +173,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>
|
||||
<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.
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
layout: post
|
||||
|
||||
title: iPixelPad - Tongue Twisting But Crisp iPad Icons
|
||||
image: Teaser-iPixelPad.png
|
||||
download: ipixelpad_by_kremalicious.zip
|
||||
image: ../media/Teaser-iPixelPad.png
|
||||
download: ../media/ipixelpad_by_kremalicious.zip
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2010-02-04 15:21:42+00:00
|
||||
wordpress_id: 1092
|
||||
|
||||
categories:
|
||||
- goodies
|
||||
tags:
|
||||
@ -22,7 +22,7 @@ They also come in two different versions for each size: with a matte highlight s
|
||||
|
||||
And drawing the homescreen icons was quite funky and if you know the standard iPhone icons I bet you can guess what icons you can see here and in the icon files, at least in the 48px and 32px versions:
|
||||
|
||||
|
||||
|
||||
|
||||
The homescreen icons pixels in the 16px version needed all more vivid colors to get them distinguishable from the wallpaper background so they're a bit different from the other sizes. These are the times I wish I could modify just half a pixel.
|
||||
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
layout: photo
|
||||
|
||||
title: Office Desk
|
||||
image: Office-Desk.jpg
|
||||
image: ../media/Office-Desk.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2010-03-27 21:31:35+00:00
|
||||
|
||||
wordpress_id: 1901
|
||||
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
layout: post
|
||||
|
||||
title: MomCorp Wallpaper
|
||||
image: Teaser-MomCorp-Wall.png
|
||||
download: momcorp_wall_by_kremalicious.zip
|
||||
image: ../media/Teaser-MomCorp-Wall.png
|
||||
download: ../media/momcorp_wall_by_kremalicious.zip
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2010-07-03 17:12:53+00:00
|
||||
wordpress_id: 1453
|
||||
|
||||
category: goodies
|
||||
tags:
|
||||
- wallpaper
|
||||
@ -20,7 +20,7 @@ The recent Futurama episode [Attack of the Killer App](http://en.wikipedia.org/w
|
||||
|
||||
The wallpaper comes in four versions with two color variations and two text variations with Mom's favorite tagline. Here's an overview:
|
||||
|
||||
|
||||
|
||||
|
||||
## Download
|
||||
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Typeface condoms
|
||||
image: Typeface-condoms.jpg
|
||||
image: ../media/Typeface-condoms.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2010-07-18 20:28:33+00:00
|
||||
wordpress_id: 1898
|
||||
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Bonsai
|
||||
image: Bonsai-5-Version-2.jpg
|
||||
image: ../media/Bonsai-5-Version-2.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2010-08-07 20:23:31+00:00
|
||||
wordpress_id: 1895
|
||||
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: GDR Helvetica
|
||||
image: GDR-Helvetica.jpg
|
||||
image: ../media/GDR-Helvetica.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2010-09-01 20:21:43+00:00
|
||||
wordpress_id: 1892
|
||||
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: iPhone Coasters
|
||||
image: iPhone-Coasters-1-Version-2.jpg
|
||||
image: ../media/iPhone-Coasters-1-Version-2.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2010-12-11 21:19:29+00:00
|
||||
wordpress_id: 1889
|
||||
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Basically, The Monolith Is On My Desk
|
||||
image: Basically-The-Monolith-Is-On-My-Desk.jpg
|
||||
image: ../media/Basically-The-Monolith-Is-On-My-Desk.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2010-12-29 15:47:12+00:00
|
||||
wordpress_id: 1873
|
||||
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Free Monkey Breath, Not Soylent Green
|
||||
image: Free-Monkey-Breath-Not-Soylent-Green.jpg
|
||||
image: ../media/Free-Monkey-Breath-Not-Soylent-Green.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2010-12-29 21:16:55+00:00
|
||||
wordpress_id: 1886
|
||||
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Enjoying Paper
|
||||
image: Enjoying-Paper.jpg
|
||||
image: ../media/Enjoying-Paper.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2011-01-08 15:43:14+00:00
|
||||
wordpress_id: 1867
|
||||
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Glowing Star Inside
|
||||
image: Glowing-Star-Inside.jpg
|
||||
image: ../media/Glowing-Star-Inside.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2011-01-08 15:45:26+00:00
|
||||
wordpress_id: 1870
|
||||
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Historic Flood Levels
|
||||
image: Historic-Flood-Levels.jpg
|
||||
image: ../media/Historic-Flood-Levels.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2011-01-18 15:40:12+00:00
|
||||
wordpress_id: 1864
|
||||
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Broken Nexus S Screen
|
||||
image: Broken-Nexus-S-Screen.jpg
|
||||
image: ../media/Broken-Nexus-S-Screen.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2011-10-11 14:37:06+00:00
|
||||
wordpress_id: 1861
|
||||
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
layout: post
|
||||
|
||||
title: Badged - iOS Style Notification Badges for WordPress
|
||||
image: Badged-Teaser-kremalicious@2x.png
|
||||
image: ../media/Badged-Teaser-kremalicious@2x.png
|
||||
author: Matthias Kretschmann
|
||||
updated: 2014-10-11 07:56:46+00:00
|
||||
|
||||
date: 2011-12-15 07:56:46+00:00
|
||||
wordpress_id: 1468
|
||||
|
||||
|
||||
category: goodies
|
||||
tags:
|
||||
@ -39,7 +39,7 @@ The plugin is hosted on GitHub and will always be mirrored in the WordPress plug
|
||||
3. Enjoy
|
||||
4. (optional) Adjust options under _Settings > Badged_. Upon activation the plugin sets both options by default:
|
||||
|
||||
|
||||
|
||||
|
||||
If you find any problems you can [open an issue on GitHub](https://github.com/kremalicious/Badged/issues) or just drop me a line in the comments or on [Twitter](http://twitter.com/kremalicious).
|
||||
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: post
|
||||
|
||||
title: Personal Site v2
|
||||
image: mkv2.jpg
|
||||
image: ../media/mkv2.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-02-26 21:29:54+00:00
|
||||
wordpress_id: 1506
|
||||
|
||||
categories:
|
||||
- personal
|
||||
---
|
||||
@ -17,13 +17,13 @@ Today I finally launched v2 of my personal site, still following the concept of
|
||||
|
||||
One goal was to use as less images as possible. Yes, it would have been easier to just use images instead of like 10 box-shadows on one element but this wouldn't have been any fun. And no matter what retina/high dpi devices come up next all interface elements will look just as sharp without any additional work.
|
||||
|
||||
|
||||
|
||||
|
||||
Apart from the colored top background, the logo and the subtle background texture there're no background images in use. All the other visuals were created with a lot of CSS3 & pseudo elements. Pseudo elements were the perfect technology so the markup doesn't get cluttered with dozens of empty divs, spans etc. which would only serve a styling purpose.
|
||||
|
||||
All icons on the site are coming from an icon font (the wonderful [IcoMoon](http://keyamoon.com/icomoon)) embedded with @font-face.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Mobile & Modern First
|
||||
@ -31,7 +31,7 @@ All icons on the site are coming from an icon font (the wonderful [IcoMoon](htt
|
||||
|
||||
For the front-end development I've followed a mobile devices & modern browsers first approach. Therefore the site should look great on many different devices & screen sizes. As a starting point I used a combination of the [1140grid](http://cssgrid.net) and [320 and up](http://www.stuffandnonsense.co.uk/projects/320andup/).
|
||||
|
||||
|
||||
|
||||
|
||||
That's of course all done by media queries with breakpoints at 600px, 768px and 992px. During my testing those rather weird values turned out to work best for this simple layout. The layout only changes at 600px & 768px, the 992px is just used for some different css animations. And yes, I'm aware of the irony targeting fixed values here although everything else uses relative values.
|
||||
|
||||
@ -40,19 +40,19 @@ But it's interesting to see how different the rendering of the site is in some m
|
||||
|
||||
|
||||
|
||||
* [iOS - Mobile Safari (iPhone 4S)](/media/mkv2-iphone.png)
|
||||
* [iOS - Mobile Safari (iPhone 4S)](../media/mkv2-iphone.png)
|
||||
|
||||
|
||||
* [iOS - Mobile Safari (iPad)](/media/mkv2-ipad.png)
|
||||
* [iOS - Mobile Safari (iPad)](../media/mkv2-ipad.png)
|
||||
|
||||
|
||||
* [Android - Android Browser (Nexus S)](/media/mkv2-android.png)
|
||||
* [Android - Android Browser (Nexus S)](../media/mkv2-android.png)
|
||||
|
||||
|
||||
* [Android - Chrome beta (Nexus S)](/media/mkv2-android-chrome.png)
|
||||
* [Android - Chrome beta (Nexus S)](../media/mkv2-android-chrome.png)
|
||||
|
||||
|
||||
* [Android - Firefox (Nexus S)](/media/mkv2-android-firefox.png)
|
||||
* [Android - Firefox (Nexus S)](../media/mkv2-android-firefox.png)
|
||||
|
||||
|
||||
Notice the weird banding of the gradients in Firefox. And Android either ignores the min-device-pixel-ratio media query altogether or has just problems with the background-size css property.
|
||||
@ -73,11 +73,11 @@ If you're interested, here're the non-minified versions of the main [css file](
|
||||
## The touch hover problem
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
A common pattern for stuff which can be revealed by hovering over something on desktop devices is to just make everything visible by default on touch devices. But I didn't wanted to clutter the portfolio items by adding buttons/text links or whatever around them.
|
||||
|
||||
 So this led to a problem for touch users because it isn't immediately obvious how to reveal the overlays housing additional actions for each item. Approximately half of my beta testers found out about tapping a portfolio item to reveal the actions which is obviously not enough.
|
||||
 So this led to a problem for touch users because it isn't immediately obvious how to reveal the overlays housing additional actions for each item. Approximately half of my beta testers found out about tapping a portfolio item to reveal the actions which is obviously not enough.
|
||||
|
||||
So I incorporated a visual hint for the other half: If a user on a touch device hasn't tapped on an item yet a subtle touch indicator starts pulsating over each item after 30 seconds.
|
||||
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Relaxing Cat
|
||||
image: 7f9397a265d811e1b9f1123138140926_7.jpg
|
||||
image: ../media/7f9397a265d811e1b9f1123138140926_7.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-03-04 08:00:32+00:00
|
||||
wordpress_id: 1729
|
||||
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: photo
|
||||
|
||||
title: Blaue Türme
|
||||
image: Blaue-Tuerme-1.jpg
|
||||
image: ../media/Blaue-Tuerme-1.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-04-03 12:41:01+00:00
|
||||
wordpress_id: 1753
|
||||
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user