グラフィックの基となる写真を用意 - MdN Design Interactive
グラフィックの基となる写真を用意 1-1 1-2 まず、最初にPhotoshopで新規ファイルを作成し、基となる白い花の写真を開いたら、コピー＆ペーストで作業ファイル上に配置した1-1。続けて、レイヤーメニュー→“レイヤーマスク”→“すべての領域を表示”を実行して、レイヤーマスクを追加。続けて、レイヤーマスクサムネールをクリックしてアクティブにしたら、ブラシツールで描画色を黒として、不要な部分を塗りつぶし、必要な部分のみ表示させておく1-2。 グラデーションを適用して花を着色する 2-1 2-2 2-3 次に、花のレイヤーを選択したまま、レイヤーメニュー→“レイヤースタイル”→“グラデーションオーバーレイ...”を選択。続けて表示されたダイアログで2-1のように設定し、花に黄緑から赤に変化する円形のグラデーションを施した2-2。ここで、花のレイヤーを2回複製したら、編集メニュー→“自由変形
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──デザインに使えるツール（1） [technique 07] 写真に含まれる色のカラーパレットを生成する 文＝山田岳史（ROSTRATA） Tool Pictaculous Tool PunyPNG URL http://pictaculous.com/ Pictaculousはアップロードした画像に含まれる色を抽出してカラーパレットを出力してくれるWebサービスの一種だ。決め手となる写真素材がある場合、カラースキームを統一することで、写真の雰囲気をサイト全体で表現することができる。カラーパレットは.aco形式のスウォッチファイルとしてダウンロードできるほか、 KULERなどの配色提案サービスとも連携して、共通の色を使ったそのほかの配色パターンも表示され、アイデアのきっかけをつくってくれる。 好みの写真から
[technique 13]自由な文字レイアウトをCSSジェネレータで実現する - MdN Design Interactive
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──デザインに使えるツール（2） [technique 13] 自由な文字レイアウトをCSSジェネレータで実現する 文＝小山勝正（Chameleon Graphics） Tool CSS Text Wrapper URL http://www.csstextwrap.com/ Webサイトをレイアウトする際、文字組みをより有機的に行いたいと思ったことはないだろうか。誌面レイアウトのように自由な文字の配置を行いたい場合に便利なオンラインサービスが「CSS Text Wrapper」である。 このツールを使用する際、サイト内のポイントと呼ばれる緑色の丸を配置し、それらを線で結ぶことで文字レイアウトのラインを組むことができる。つまり、自分で好きな図形を描き、それに合わせてテキストを配置することができるのだ。 さらに
![[technique 13]自由な文字レイアウトをCSSジェネレータで実現する - MdN Design Interactive](https://cdn-ak-scissors.b.st-hatena.com/image/square/800574e0ac3f44133aa2776c7c255fb83f19c305/height=288;version=1;width=512/https%3A%2F%2Fwww.mdn.co.jp%2Fdi%2Fimage.php%3Fasid%3D414%26type%3Ds)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MdN Design｜総合情報サイト
