Inkscape で「画像」や「グループ化したオブジェクト」を自由な形でトリミングする - 「クリップ」機能の利用

1. パスの「交差」ではトリミングできない

Inkscape を用いて、取り込んだ画像を指定した範囲でトリミングしたい。

例えば、ウェブサイトのデザインを Inkscape でするとき。サイト全体の背景画像として、テクスチャを使いたいとする。

• テクスチャ フリー - Google 検索

フリーテクスチャ素材館 にある モザイクタイル（白）のパターン を利用する。

ダウンロードした画像を Inkscape にドラッグ・アンド・ドロップ。

もし、Inkscape で描いたオブジェクトをトリミングしたいなら、「パスの交差」を利用する。手順は、

1. 切り取りたい範囲をパスで囲む。
2. オブジェクトとパスの双方を選択する。
3. メニューより、「パス > 交差」を選ぶ。

しかし、この方法を取り込んだ画像に適用することはできない。

 

2. 「クリップ」機能を利用する

トリムではなくクリップ

画像をトリミングしたい場合、Inkscape では「クリップ」機能を利用する。

Scratchpad clippingtutorial - Inkscape Wiki によると、

The clip function in inkscape allows an object or a group of objects to be clipped (cropped) so that only parts of the elements are visible. Clipping can be applied to any object (including groups, layers, bitmaps, etc.)

クリップすることにより、設定した範囲以外は見えなくなる。画像だけではなく、グループ化したオブジェクトも対象にできるところが「パスの交差」とは違う。

clipの意味 - 英和辞典 Weblio辞書 を調べると、

〈毛・小枝などを〉(はさみなどで)切る，刈る; 〈生け垣・庭木などを〉刈り込む; 〈羊の〉毛を刈る[刈り込む] 〈off，away〉.

動詞には「トリム」と同じような意味がある。

 

クリップ

最初に、画像を配置したい場所へ移動する。

次に、切り取りたい範囲を囲む。ここでは矩形を描くツールを利用し、赤い枠を描いた。

重要な点は、「切り取りたい範囲を描いたオブジェクト」の方が、画像よりも前面にあること。

「画像」と「矩形オブジェクト」を選択した後、メニューより、

• オブジェクト > クリップ > 設定

を選択する。これにより、画像がトリミングされる。

クリップした範囲は解除することにより、元に戻せる。メニューより、

• オブジェクト > クリップ > 解除

を選択することにより、クリップをする前の状態になる。

「鉛筆ツール」「ペンツール」を使えば、自由な形に画像を切り取ることができる。

 

関連記事

• Inkscape のマスク機能で半透明に画像を切り抜く

参考サイト

• Inkscapeで画像をトリミングする方法

瞬時に目標を見分けるためのデザイン - 印（アイコン）をつけて判別しやすくする

1. 見分けにくい製品のデザイン

ちょっとした工夫で、使い勝手が良くなるものがある。

1. USB の接続部分
2. モニターのボタン
3. ゴム手袋

共通する問題は、見分けにくいこと。

 

2. シールを貼って、USB の裏表を一瞥で分かるようにする

USB は、挿す向きが決まっている。そのため、表と裏を見分けなければならない。

PC の背面にある USB ポートに接続するとき、どちら向きにすればいいのか悩む。挿し間違えたら、反対向きにするだけなのだけれど、この手間がどうしよもなくイライラする。(+_+)

ファイル:USB types 2.jpg - Wikipedia via kwout

できるだけ背面にある USB ポートには直接挿さず、ハブや延長コードを利用している。ハブの場合、挿す方向を間違えることはあまりない。たいてい、USB のマークを上にして挿す。USB の先端部分を見て、上下を判断することはない。

USB の延長コード

問題は USB の延長コード。延長コードとは、無線子機に付属していたケーブルのこと。壊れた無線子機に付属していたものを再利用している。

このケーブルの先端にも USB マークは付いている。しかし、表と裏を見分けにくい。

IEEE802.11g USB2.0対応KEY型アダプタ | WLI-U2-KG54L via kwout

これを解消するために、延長コードの先端に、アルファベットのシールを貼った。シールは、文具店で売っているもの。

これにより、どちらを上にして挿せば良いかすぐに分かるようになった。また、わざわざ目で確認しなくても、手触りで判別できる。

ぷくぷく アルファベット（小）	エポキシ アルファベット銀（小）	エポキシ アルファベット金（小）
ドット アルファベット（小）	アルファベットA（小）	エポキシ アルファベットA（小）-2

 

ユニバーサルデザイン

ところで、シャンプーとリンスは、手触りで見分けることができる。

ユニバーサルデザインを探して自由研究！ [ボランティア] All About によると、

ユニバーサルデザインを
探して自由研究！All About
via kwout

お風呂場へ行ってみましょう。シャンプーとリンスのボトルがありますよね。よく見ると、シャンプーボトルの側面に細いギザギザがついています。商品によっては、ポンプの頭に線がついている物もあるでしょう。

同じギザギザはリンスにはついていますか？ ついていませんよね？
ギザギザのある方が、シャンプーの印なんです。それを知っていれば、洗髪中に目をつぶったままでも、シャンプーとリンスを間違えることはありません。

USB も手触りで判別でき、なおかつ、視認性を高くして欲しい。

そのためには、以下の点を改善してほしい。

1. USB のマークを手触りでハッキリとわかるようにする。
2. USB のマーク部分を、周りの色と分けて目立たせる。

 

方向を選ばない USB ハブ

ちなみに、どちらの向きでも挿すことのできる USB ハブもある。

USB2.0ハブ 4ポートタイプ（どっちもハブ） | バッファロー によると、

世界初（※）、コネクターの向きを気にせず挿せる"どっちもハブ"。
USBポートにケーブルを挿そうとしたときに、コネクターの向きが逆で挿し直したという経験は誰もがお持ちのはず。このどっちもハブなら、コネクターは上下どちら向きでも接続できるポートを搭載しているので、挿しなおす必要はありません。

BSH4U17WH

BSH4U17BK

BSH4U17BL

BSH4U17PK

今度、買うならこれかな。

 

3. シールを貼って、操作ボタンを目立たせる

PC のモニタは BenQ の G2400WD を使っている。このモニタの調整ボタンは、分かりづらい。

価格.com - G2400WD [24インチ] の製品画像 via kwout

USB のマークと同じように、調整ボタンを示す文字に色が付いてない。そのため、どのボタンを押せば、何の調整ができるのか分かりづらい。

• cf. 親父のディスプレイのスイッチが壊れた - BenQ G2400WD より

そこで、モニタのボタンにもシールを貼って見やすくした。

ボタンの機能と、シールの意味が合うようにした。

• ? ： メニューを起動する。
• L : 左方向へ動かす操作
• R : 右方向へ動かす操作
• ! : 決定

これにより、モニタの調整が楽になった。

 

4. ゴム手袋の片方に印を付ける

食事の支度や、食器を洗うとき、必ずゴム手袋をしている。

使い終わったら、手袋の左右をまとめて洗濯バサミで止めて吊るす。そのため、手袋をはめるとき、見た目ですぐにどちらが左か右かわからない。一々、手袋全体の形を見て、左右を判断するのは面倒。

手袋には、シールを貼ることはできないので、左の目印として、左手用にマジックで線を引いた。

• cf. 手肌が弱いなら、エステーのうす手 指先強化 手袋が良さげ

これにより、一瞬で左右を判別できる。吊るしてある手袋を見た次の瞬間に、手袋をはめる動作に移れる。

どれも些細なことなんだけれど、快適になる。 ^^

Drupal で Zen のサブテーマを作成 - デザインをカスタマイズする準備

Zen | drupal.org via kwout

Drupal のテーマ (デザイン) をカスタマイズしたい。そういうとき、テーマ Zen はドキュメントが充実していて、

Zen is the ultimate starting theme for Drupal.

(Zen | drupal.org より)

これを元にテーマを作成するのがいいらしい。

以下、上記ドキュメントの中の「How to build your own sub-theme (6.x)」に従った作業記録。

 

STARTERKIT を元に新しいテーマ用のディレクトリを作成

予め sites/all/theme/ ディレクトリ に zen テーマを置く。「管理セクション › サイトの構築 > テーマ」を見ると、3 つのテーマが追加されたことがわかる。

ここから Zen Themer’s starter Kit を元にテーマをカスタマイズしていく (サブテーマ) 。 zen テーマのディレクトリ中にある zen/STARTERKIT を sites/all/theme/ 以下に名前を変えて置く。zen ディレクトリの外に置くのがポイント。ここでは `testzen’ と名付けた。この時点では、上記のテーマ一覧を見ても testzen というテーマは表示されない。

theme/testzen/ 以下にある STARTERKIT.info をディレクトリの名前と同じに変更。(theme/testzen/testzen.info)

 

.info の編集

testze.info を開き次のように一部内容を変更。

• STARTERKIT.css → testzen.css
• name = Zen Themer's Starter Kit" → name = testzen
• description = Read... → A Zen sub-theme

これで「管理セクション › サイトの構築 > テーマ」を見ると、testzen が表示されるようになる。

ただし、この時点で、testzen を有効にしても、サイドバーの部分がコンテンツの下に来てしまう。

.info ファイルについて詳しくは Structure of the .info file を参照。

 

layout.css

今回は、ウィンドウの幅に応じてコンテンツの幅が変化するようにしたいので、theme/zen/zen/layout-liquid.css を theme/testzen/ 以下にコピーし、ファイルの名称を layout.css に変更した。(固定幅にしたい場合は、 layout-fixed.css) これにより、先ほど下にあったサイドバーに相当する部分が左側に来るようになる。

プリント用の CSS である theme/zen/zen/print.css を theme/testzen/ 以下にコピー。testzen.info に print.css が書かれていることを確認する。

 

testzen.css

theme/zen/zen/zen.css を theme/testzen/ にコピーし、名前を testzen.css に変更。これは最初に testzen.info で変更したもの。

 

template.php, theme_setting.php

theme/testzen/template.php, theme_setting.php 内の `STARTERKIT’ を `testzen’ に置換した。

(cf. Using open source software to design, develop, and deploy a collaborative Web site, Part 5: Getting started with Drupal)

 

スタイルシートやテンプレートファイルを変更したいとき

1. zen/ 以下にあるものをサブテーマのディレクトリに移動
2. 「管理セクション > サイトの環境設定 > パフォーマンス」 の キャッシュデータのクリア

スタイルシートの場合は、.info ファイルに対象のファイルが指定されていることを確認。

 

ちなみに、キャッシュデータのクリアをしたら、Breadcrumb separator が文字化けしてしまった。「管理セクション > サイトの構築 > テーマ の 設定 > テーマ固有の設定 > Breadcrumb separator」 を ` > ‘ に変更した。

 

テーマが作成できたら

また、画面上部には以下のようなメッセージが表示された。

The theme registry has been rebuilt. Turn off this feature on production websites.

テーマの作成が終わったら、同ページにて、Theme development settings の `Rebuild theme registry on every page.’ のチェックをはず。

上記の文字化けの原因は、どうやら zen を解凍するときに、.info ファイルが SJIS として解凍されてしまったことによるみたいだった。エディタで UTF-8 にして開いたら文字化けが直った。(cf. サクラエディタで文字コードの変更) ただし、同じことをローカル環境 (Windows) で編集しているときは文字化けが起こらなかった。

Inkscape でストライプのメニューを描く

「背景 ジェネレータ」で検索すると、いくつかのタイプが見つかる。例えば、Stripe Generator や Background Image Maker ではストライプの模様を生成することができる。これらと同じような模様を Inkscape を使って手動で描いてみることにした。

 

方法

まず、 長方形を描くツールでメニューの背景を描く。(RGBA: ffd5d5ff)

ベジェ曲線を描くツールで縦線を 1px の幅で描く。(e5eaf8e5)

上から光があたっていると仮定。ピンクの縦半分の大きさになるように白の長方形を重ね、上から下へと徐々に薄くなるようにグラデーションをかける。

薄い青色 (e3e8f6ff) の斜め線を で一つ描き複数コピー。上記の白のグラデーションの下の位置くるように配置する。(PageDown)

上記の薄い青色の斜めの線を選択しておき、Fill (Object > Fill and Stroke…) の Blur と Opacity を調整して、ぼかして半透明に。

追記 (2009.1.16) : 別の方法として、パターンを使うと楽。

一番上に で 1 px の太さで下のピンク色と同じ色の線を引く。

文字を入れて完成。

 

参考サイト

• photoshop- 1ピクセルラインで質感を高めるテクニック - WEBデザイン BLOG

Windows Live Writer でサイドバーを閉じるとき

使っている PC の画面は小さい。そのため、Windows Live Writer でブログを書くとき、ウィンドウを小さくすることがある。その際、WLW のサイドバーを閉じる。

このとき、サイドバー上部にある

>>

の部分をクリックしていた。ここは、小さいのでクリックしずらい。 (+_+)

… と思っていたのだけれど、以下の丸で囲った部分であれば、クリックすればサイドバーが閉じた。 (@_@;)

インターフェイスのデザインにより、思わぬ誤解を招くことってあるんだなぁ。

追記(2008.8.25) : ショートカットキーである F9 を使ってサイドバーを開閉するのができる。

PyScripter の Run コマンドと同じキーと覚えておこう。

Blogger に標準で用意されているテンプレート以外のデザインに変更する

1. テンプレートを変更したい

Blogger の外観を変えたい場合、

• ダッシュボードより、「テンプレート > 新しいテンプレートを選択」

で簡単に変更することができる。

予め用意されているテンプレートは限られている。標準で用意されているデザインのテンプレートを利用したい。

 

2. テンプレートを配布しているサイト

Blogger 用のテンプレートを配布しているサイトがある。。

• 50 More Beautiful Blogger Templates
• Blogger Templates
• Blogger Templates
• Free BlogSpot Templates
• Blogger Template

上記のサイトより、気に入ったテンプレートをダウンロードして、テンプレートを適用する

 

3. Drupal で使われているテンプレートに変更する

Garland Theme via kwout

例えば、50 More Beautiful Blogger Templates で紹介されていた

「Drupal のデフォルトのテーマ」

と同じデザインにテンプレートを変更してみる。

 

テンプレートを手に入れる

 Garland Theme Download から

• GarlandBloggerTemplate

をダウンロードし、解凍する。

 

Blogger の設定

• ダッシュボードより、テンプレート > ページ要素

を選択する。

テンプレートを変更すると、既に追加されている要素が削除される可能性がある。そのため、予めこれまでにカスタマイズした内容を控えておくのが良い。

• テンプレート > HTMLの編集

を選択する。

現在のテンプレートをバックアップするために、

• 「テンプレートをすべてダウンロード」

のリンクをクリックし、XXXXXX.xml という名称のファイルを保存する。

参照ボタンを押して、先ほど解凍した GarlandBloggerTemplate.xml を選択し、「アップロード」ボタンを押す。

これまでに作成したウィジェットがある場合、ウィジェットが削除される旨が表示されるので警告に気をつける。

 

テンプレートを適用した結果

テンプレートを変更した結果、以下のようなデザインになった。

この後、細かな調整をする必要がありそう。

Blogger のテンプレートをカスタマイズ - GarlandBloggerTemplateを使って につづく