skillup

技術ブログ

デザイン

GIMPでの薄膜レイヤー&縁取り

投稿日:2015年10月24日 更新日:

えー本業はプログラマなんですが、ガチンコ塾のブログの画像なんかもたまに作ってます。

まーほとんど素人なんですけどね(笑)

一応昔にPhotoshopとIllustratorは使ってました。今では忘却の彼方ですが・・・

復習もかねてちょこっとした画像とかを作れると便利なので少しずつ画像処理ツールをいじってます。

画像処理系で使っているのはGIMP2.8です。

作品なんぞを。

blog_database01 blog_thanks

えーまだやり始めたばっかりなんですが、とりあえずよく使う技術を。

薄い膜の作り方

「あなたもハッカーに!?」のところで使っている技術なんですが、

  1. 新規レイヤー作成
  2. 透明度を下げる
  3. 文字に該当する部分を選択
  4. 選択範囲の反転
  5. 削除キー

とやるとちょうど上記のようなうすい膜ができます。

縁取り

THANKS!の猫のやつですね。

うすーく灰色の淵があります。これ自体はなくてもよかったかも(汗)

フォントのレイヤーを複製

右クリックで「不透明部分を選択範囲に」を実行

テキストが選択されるので選択範囲を拡大(2px以上)

色を付ける

複製レイヤーをフォントのレイヤーの下に持っていく

参考リンク

GIMP入門 文字を黒色にフチどる

参考書のやつがversionが2.6で違ってて焦った・・・

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

共通CSSに必要な要素

簡単な業務アプリだとBootstrapなどのCSSフレームワークを使うことが多かったのですが、不必要な機能があることもあり、自作で非常に手軽なCSSを集めてこれを共通のCSSとして使うことが多いです。 …

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …

no image

data- HTML5のカスタムデータについて

HTML5のカスタムデータ属性について。 HTML5ではタグにdata-*とすることで任意の値を持たせることができます。 いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ 例として下記 …

アーカイブ