グラフィックデザインのトレース訓練を始めてみました。今回トレースするデザインのテーマは「ツートーン」。単にツートーンでデザインを作ることはそれほど難しくありません。デザイントレースの良いところは、細かな装飾などの作り方も勉強になることです。いろんなデザイナーさんも総合力を身につけるためにトレースの練習をしているようなので、僕も同じように練習をして、記録として載せていこうと思います。 つくるもの 完 […]
女性の髪の毛をきれいにトリミングするの難しいと感じたことはないでしょうか？ 長い髪の毛がなびいていると、それに合わせてパスを作成するのは・・・ なんとも辛い作業となることが目に見えています。（おそらくきれいにトリミングは不可能です・・・） そんな作業を毎回はしたくないので、ここではGIMPのレイヤーマスクを活用して、脱色とトーンカーブで髪の毛をきれいに一本一本まで丁寧にトリミングしていきます。 や […]
シンプルなんだけどどこかおしゃれな画像って目をひきませんか？ 画像検索サイトを利用して、商用利用フリーのものを探す方法でもおしゃれな画像を使うことはできるのですが、実はペン入力ができればおしゃれな画像を自分で作ることもできてしまうのです。 ペン入力というと、iPadとかSurfaceとかのタブレット端末がメジャーですね。 これらの端末でInkscapeのカリグラフィツールを使うとできてしまうので、 […]
モノクロ写真の一部だけに色付けされていると、どことなくメッセージ性を強く感じると思います。 例えば、次の2枚の写真はもともと同じ写真ですが、僕の場合、左の写真に比べて、右の写真の方が「自分らしさ」のようなものが強く表現されているように感じます。 カラー写真は被写体を比較的忠実に表現できるので、バナーなどでもそのまま使われていることが多いですが、「モノクロ化＋一部カラー」にすることで、よりメッセージ […]
以前、問い合わせがあったinkscapeで「フチ文字」を作る方法を紹介します。 文字の周りを縁取るので「フチ文字」と言われています。「囲み文字」とは意味が違うので、調べるときは「フチ文字」で検索をしましょう。 inkscapeでは「フチ文字」の作り方は2つあります。最終的に出来上がるものが違うので、完成図から自分が使いたい方で作成してみてください。では始めていきます。 フィル／ストロークを使った「 […]
WordPressのローカル環境とは、サーバーにあるWordPressの本体ファイルやデータベースを自分のPC上に設置して、動作テストができる環境のことをいいます。 ちょっとしたカスタマイズでも、間違ってページが真っ白になってしまうこともあるので、ローカル環境を用意しておくのは重要です。 そんなローカル環境を、面倒な設定なしで、5分でやってしまおうというのが今回の趣旨です。 普通は、ローカルサーバ […]
多角形や星型をノードツールで変形させることでいろいろな吹き出しを作ることができます。 ちょっとしたデザインのアクセントとしても使える吹き出しを自作してみましょう。
配色用のカラーパレットをInkscapeの内部機能で作る方法を紹介します。 基本的にはカラーホイールの考え方で、明度や彩度をコントロールする方法なのですが、知っていると配色の引き出しも広がると思います。 使用機能は 矩形ツール タイルクローン の２つです。 では進めていきます。 パレット用の矩形をつくる 矩形ツールで適当な大きさの矩形を作ります。矩形オブジェクトのフィルを「アンセット」にしておきま […]
飛び出てくるようなテキストのロゴを作る方法をまとめてみました。 今回紹介するのは単にベベルで浮き上がらせるだけではなく、すどーん！とインパクトのあるテキストロゴを作る方法です。 大きな流れとしては、テキストオブジェクトを2つ作成して、押し出しをパースのように見せることで、文字を飛び出させたように見せるのが今回のロゴ作成チュートリアルの概要です。 では進めていきます。 テキストオブジェクトを2つ作る […]
プログラミングの分野でよく使われているフローチャートですが、最近は業務フローなどの手順書やマニュアル作成にも利用されてきていますね。 というわけで、今回は見やすい・わかりやすいフローチャートをInkscapeで作る方法を解説していきます。 プレゼン資料として活用してもいいですし、社内資料やマニュアルの作成にも応用できる方法です。 わかりやすいフローの描き方 フローを描く目的は作業を可視化して、作業 […]
会話風吹き出しのテンプレートとして使えるCSSを作ってみました。 会話風吹き出しのデザインは一見難しそうに見えるのですが、要点さえ抑えてしまえば誰でも簡単に作ることができます。 例えば・・・ ブログの中で会話してるみたいな吹き出しが作りたいんだよね。 うんうん！LINEみたいな会話調のブログって読みやすいよね。 CSSでできるみたいなんだけど、結構難しそうなんだよね・・・ それが、実はそんなに難し […]
写真付きのパンフレットでよくあるテキストレイアウトには被写体を邪魔しないようなテキストの配置がされていますね。 テキスト部分の輪郭がカーブしてることが特徴的です。 inkscapeでこのテキストレイアウトを実現する方法がテキストの流し込みです。 この記事は2014年9月20日に公開した記事を再編集したものです。
ブログやサイトのロゴを作るときって時間的・金銭的に結構なコストがかかりますよね。 見栄えが良いロゴを作るにはある程度のデザインスキルを必要としますし、プロに依頼して作ってもらうとなると数万円単位で費用もかかってしまいます。 そこで、一つの解決策として「Logaster」というロゴジェネレーターを使う方法が結構おすすめです。 参考までにこんなロゴが一瞬でつくれます。 日本語もいい感じに出来上がります […]
positionを使うとfloatやmarginを駆使してレイアウトを設定するより簡単に設定できてしまうのですが、1つ難しいところがありますね。 そう。 【position: absolute;】で配置を設定するときの基準がわかりにくいのです。 大体は疑似要素（after、before）と一緒に使われていたりするので、結構理解に苦しむ部分です。 今回はそんな【position: absolute […]
ブログのカスタマイズをするとき、必要なアイコンをいちいち画像化して、フォルダにアップロードするのは手間ですね。 そんなときは「Font Awesome」というアイコンを文字（フォント）として利用できるサービスを導入すると便利です。 例えば、箇条書き（リスト）の頭出しに「」を利用するということもできます。 導入の手順：2ステップでサクッと導入 「Font Awesome」からウェブフォントの埋め込み […]