Photoshop - AGN Web!

男性の顔を女性に変えてみる（2/2）

どうもKazです。
先回までは「美肌」を中心に加工してきましたが
今回は、もっと女子力を上げるために「メイク」まで行っていきます!!では続きをどうぞ!!
続きを読む

どうもKazです。
イロイロとバタバタしておりまして、しばらくコチラに記事が書けない状態だったのですが
やっと準備が整いましたので久々に書いていこうと思います。私が記事を書けずにいた頃、Twitterでは「Photoshopを使って男性を女性に加工する」と言ったツイートを多く見かけました。
早速、見に行くと確かに女性っぽくなってはいましたが、ベースの男性の顔が若干女顔に感じられました。
そこで…
「そんな事思うんだったらメッチャおじさまの画像から女性の顔にしてみろ!!」
と約1名…ワタクシから言われましたので加工をしてみました。

少し長くなりそうなので、数回に分かれるかと思いますが
お付き合いください。

続きを読む男性の顔を女性に変えてみる（1/2）

見やすい&作りやすい Photoshopのレイヤー管理

いよいよ明日から4月!
始まりの季節は、なんだかいつもそわそわしてしまうsakaiです。

新年度ということで、環境の変化が多い時期ですが、
そんな中、新たにWebデザイン制作業務に携わることになった方もいらっしゃるのではないでしょうか。

「Photoshopは使ったことがあるけど、Webデザインには利用したことがない」
そんな方向けに、Web制作においての初歩的なPhotoshop操作のポイントをまとめてみました。

今回ご紹介するのは、作業しやすい、他の人が見てもわかりやすい構造にするためのレイヤー管理方法です。

※以下の記事は、PhotoshopCS6の環境をもとにしています。

・レイヤーの自動選択にチェックを入れる
・バウンディングボックスにチェックを入れる

こちらにチェックを入れると、直接カンバスからレイヤーが選択できるようになります。

拡大･縮小･回転も、バウンディングボックスで変形可能!

・レイヤーコピー時に「〜のコピー」がつかないようにする

レイヤーコピーを繰り返すとレイヤー名のうしろに「〜のコピー」がずらり…
これだとちょっとわかりづらいですね。

レイヤーパネルのオプションを開き「コピーしたレイヤーとグループに「コピー」を追加」のチェックを外します。

これで、コピーを繰り返しても「〜のコピー」はつきません。
すっきりとしたレイヤーパネルになりました。

・レイヤーに名前をつける
・グループ化を活用する

たとえば、ボタンパーツは1つのグループに。ヘッダーは1つのグループに。
最初はざっくりとでもかまわないので、こまめにまとめながら制作を進めましょう。

スライスで書き出すときや、あとから変更を加えるとき…
整理されていないところから目的のレイヤーを見つけ出すのは至難の業。

たとえばコーダーさんなど、データ作成者以外の方にデザインデータを渡す場合は特に気をつけたいものです。

・「⌘＋shift」でグループ全てを折り畳む

フォルダが増えてくると、開かれたグループを一つ一つ折り畳むのは手間になってきます。
「⌘＋shift」でフォルダ脇の三角アイコンを押すと、1度に収納することができます。

・レイヤーのフィルタリングを活用する

「テキストレイヤーだけを編集したい」「背景画像だけを編集したい」
そんなときに便利な機能です。

左から「ピクセルレイヤー」「調整レイヤー」「テキストレイヤー」「シェイプレイヤー」「スマートオブジェクトレイヤー」のフィルタリングです。

これらを選択すると、対象の属性レイヤーのみを表示することができます。
ちなみに複数選択することもできます。

選択しているとき、一時的にグループ表示ではなくなりますので、
あらかじめグループを色分けしておいた方が、よりわかりやすくなるかもしれません。

いかがでしたでしょうか。
レイヤー整理の参考に、少しでもなれたら幸いです!

新潟グラム x CSS Nite「Webで使うIllustrator」に参加してきました

先日11月6日に、新潟グラム x CSS Niteに参加してきました。

テーマは「Webで使うIllustrator」

「WebデザインといえばまずはPhotoshop!」って入口からきて、今までPhotoshopメインでデザインしてきました。
が、もとはIllustratorを使う方が多かった自分（パスいじっているのが好き…）。
できたら、IllustratorでもWebデザインするのに、もっと活用できたらいいなってことで、今回初めて参加してみました。

気になったこと・使っていきたい機能などを、忘れない内にメモします。

新潟グラム／CSS Niteについて

【新潟グラムとは】
新潟でデザイン業務に関わる方に向けたセミナーを主催されています。

【CSS Niteとは】
株式会社スイッチの鷹野雅弘さんが主催するセミナー。CSSに限らずweb制作に関する知識を発信するセミナーです。
今回は鷹野さんが講師もされていました。

Web制作の動向

いままでビットマップベースで行っていたパーツの作成を
SVGやWebフォント、アイコンフォントなどのベクター表現や、CSS3を活用することで
マルチデバイスに対応したWebデザインをしていく。

↓

ベクター表現が得意なIllustratorでWeb制作

Illustratorの便利な機能

時間をかけずに、編集しやすいデータをつくれるIllustratorの機能をいくつか紹介されてましたので、その中でも特に気になったものをいくつかピックアップしました。

1 ライブカラーで再配色

ハーモニーカラーをリンク。あとはホイールをぐるぐるまわすだけで簡単にカラーバリエーションができます。
別々に配色する必要のあった「塗り」と「線」も、これで一度に変更が可能に!
配色に悩んでいるときも、これで気軽に別の雰囲気の色が試せますね。

2 文字タッチツール

文字のアウトライン化をすることなく、一文字単位で文字の移動･回転ができます。
今まで文字パレットの数値でいじっていたのを、感覚的にできるのでいいですね!
しかも下位バージョンでデータを開くこともできるそう。
でも残念ながら、こちらはCCのみ対応の機能となっています。

3 段組み設定を使ったgrid対応のワイヤーフレーム作成

段組み設定でグリッド分割し、さらにその分割したオブジェクトを段組み設定で結合。
結合したオブジェクトに、ダミーの画像やテキストをアピアランスで適応
…と、ものの数分でサクサクとワイヤーフレームができあがっていく様は圧巻でした…!
段組み設定にこんな使い方があったんだなーと、一番印象に残った項目でした。

6 Layer Exporterや画像アセット（Photoshop）を使ったPNG/SVG/JPEGの書き出し

スライスを使用せず、レイヤーやフォルダ単位で画像を書き出すことができます。
しかも、レイヤー名（フォルダ名）を対応する名前に変えると、それにあわせた形式や解像度で書き出してくれるそうです!
面倒だったスライス作業がなくなると、相当な時間短縮になるのではないでしょうか。

しかしこちら、CCから対応の機能です…。本当に残念です…。

参加してみての雑感

・Illustratorのこと以外にも、「Webデザイン」制作の動向も知れて、大変ためになりました。

・鷹野さんのスライドの構成・デザインもわかりやすく、かつ遊びがあって素敵でした。
・視点誘導に使用されていたスポットライト機能(Mouseposéというそうです)も、わかりやすかったです。

Mouseposé
人前でデモしたりするときにやっておくといいこと（Mac OS編） – DTP Transit（Mac OS X, セミナー, イベント, 展示会, プレゼンテーション, ユーティリティ）

・CCの機能っていろいろあるんだなーと、新機能を試すのが今から楽しみです。

・使い慣れているつもりになっているソフトでも、知らない機能･活用方法がたくさん。まだまだ勉強しないとですね。

・次回開催されるときには、またぜひとも参加したいです。

『暗い奴』を『明るい奴』にする

初めまして Kaz.A と申します。
仕事としてはWebサイトの構築をメインで行っていますが、その前が画像関係のフィニッシュをしていました。
ですので、画像関係とWebの便利な物を紹介する記事を書いて行こうかと思っています。

今回は、画像関係で効果的で簡単な調整をココだけの話的にお教え致します。

今回は…
　　

『暗い奴』を『明るい奴』になるまで調整・加工します!!

続きを読む『暗い奴』を『明るい奴』にする

・レイヤーの自動選択にチェックを入れる ・バウンディングボックスにチェックを入れる