いやー夜景とかこういうきれいなものは癒されますよね。
昔からよく見るやつですがいまいちどうやって撮影しているのかわからなかったので納得です。
photoshopとかでつくればいいじゃんて方も多いかもですが、いつかはやってみたい。

出来上がったものはかっこいいけど・・・
撮影している最中は何かおもしろいですね。

前からやりたかったけど、やってなくて、
そして今回もやらずにブログに書くだけ。。。ｚｚZ

それはさておき、今回も前回に引き続き、photoshopネタです。
ガイドが、ルーラのピクセルとピクセルの間にきてイラッってするときありませんか？

つまりはこういうこと・・・

ガイドが中途半端なところにひかれていると、ガイドに沿って作ったシェイプがぼやける・・・
これはなんだか気持ち悪い・・・

これを解決するには、ガイドをピクセル単位でひけるように設定する必要があります。
つまり、1px × 1pxのグリッドをひいて、ガイドがそれにに沿うようにすれば良い。

フォトショのグリッドとは、方眼紙のようにな均等なマス目を表示させる機能です。

①まず、[編集]→[環境設定]→ガイド・グリッド・スライス・カウントを選択します
そして、以下のように設定。
【カラー＝ちょっと分かりやすい色　スタイル＝点線　グリッド線5px　分割線5】
項目ごとに説明すると・・・
カラー：グリッドのカラー
スタイル：グリッドの表示スタイルです。
　　　　　　(実線だと作業するときにすこしうっとおしいので点線がおすすめ！)
グリッド線：何単位ごとにグリッドをひくのかということです。
分割線：グリッドとグリッドの間をいくつに分割するのかということです。

ということで、1px × 1pxのグリッドをひく設定が完了♪

②[ビュー]→[表示]→グリッド
グリッドにチェックを入れて、表示させる。（チェック入ってる場合はそのまま）

③[ビュー]→[スナップ先]→グリッド　
グリッドにガイドが吸着するように設定。（チェックが入ってる場合はそのまま）

すると、いくらテキトーにガイドを引いても、ぴったりとピクセル単位でひけちゃう！

そして、ガイドがピクセルごとにひかれていれば、このとおりぴったり四角のできあがり！

グリッドが邪魔な場合は、
ctrl+@　グリッドの表示・非表示で対応すればＯＫ！

というような感じです。
前々から気になっていたこのズレに対処する方法がわかって、スッキリ！
おためしあれ。

私はこのショートカットを知らなかった頃はいちいちレイヤーを統合してからコピーしてレイヤーを統合を取り消して・・・という面倒なことをしていました・・・

<このショートカットの使用シーンは・・・>
フォトショで作ったページデザインの中から、わざわざスライスを切るほどでもないパーツを切り出したいときなどに。
・選択範囲ツールで選択し、
・[Ctrl]＋[Shift]＋[C]でコピー、
・[Ctrl]＋[N]で新規ファイルを作成、（コピーした内容と同サイズのカンバスが自動でできます）
・[Ctrl]＋[V]で貼り付け
・[Ctrl]＋[Shift]＋[Alt]＋[S]でWEB用保存
てな感じです。

図で説明すると…

◆上図のように選択範囲を作り、[Ctrl]＋[C]でコピーしてペーストしてみると・・・

◆レイヤーパレットで選択中になっている、文字レイヤーの画像しかコピーされていません。
◆今度は[Ctrl]＋[Shift]＋[C]でコピーして貼り付けてみます。と、下図のようになります。
パレットで選択しているレイヤーに関係なく、カンバスに見えている内容がそのままコピーできています。

はじめまして。
４月より入社いたしました、新米へなちょこデザイナーの中山です。
今日は、デザインに繊細なパターンやテクスチャを取り入れたウェブサイトについて書きたいと思います。

サイトの背景や画像が単色では、のっぺりとした印象を受け、相手に『かたい』といったイメージを持たれがちです。
そこで、パターンやテクスチャをうまく取り入れてみてはいかがでしょうか？
質感を与えることでサイトのデザインがやさしくなると思います。
私が気になった繊細なパターンやテクスチャをうまく取り入れたウェブサイトをちょこっとご紹介。

THIS IS TEIXIDÓ

関西のおトクで楽しいおでかけ情報サイト　マイ・フェイバリット関西

パターンやテクスチャを取り入れることで、よりクリエイティブでやわらな印象を受けます。
また、photoshopでデザインされる方におすすめなパターンファイルをご紹介。
ウェブデザイン制作で便利なマクロパターンをまとめた素材セット
54 Micro Patterns
簡単に継ぎ目のない背景をつくることができます。

こんばんは、shinです。

わりと前からだと思うのですが、海外サイトのデザイン集などを見ているとレトロ風なデザインをちょくちょく見かけるようになりました。

デザインパーツの質感に着目しての特集でよく見かけるのですが、ボソッとしたような質感に昔の広告の特徴や、印刷の状態をあえて再現した効果なども相俟って雰囲気に満ちたサイトデザインがなされており、各所を観察していると勉強になることがたくさんでてきます。
私は見るだけで挑戦したことはないのですが、古めかしい雰囲気を出すために粗めの質感を使ったり、色合いも褪せたようなものを多用するのでポイントを浮き立たせるのがけっこう難しいのではと想像します。
サイトによりけりですが、多くのイメージ画像を使用しているものなどは特に配置のリズム感も気持ちよく、遊び心のある演出がされていたりと見た目に飽きさせない工夫が所々盛り込まれています。
そのへんのユーザーにストレスを与えないくらいの、という加減の難しさもあると思います。
それでこそ一つの世界観を持つサイトとして成立しえるのではないかと思います。ものすごいインパクトがあってもユーザーがいてこそ、サイトは在るものなので一度見たきりでなく、また来たくなるサイト作りをしていきたいものだと、いいものを見ているとそんなことを思わされます。

こんばんは、shinです。

デザインのリニューアルなどについてです。
イメージの一新や内容の変更に伴うデザインの変更などの作業がそれにあたるのですが、
インターネットの環境下では様々な変化に合わせたりと、めまぐるしいものがあると思います。
現行のものをより読みやすくなるようにデザインや内容構成を組み替えて、現状よりも魅力的なものを作っていかないといけません。
実際やってみると作り変えるというのはとても難しく、元ネタを参考にするあまり内容をそのままなぞったようなものが出来上がってしまうこともしばしばです。
そのような作業をしていると、作業にかかる前に、もっと注意深くサイトの意義をつかんで、その上でどのようなユーザが見てどのように思うのかも予想するのがとても大切なのだと感じます。
現行サイトも内容を伝えるべく構成された情報の一つの形なので、言いたいことは一通りは言っているはずなのですが、それを鵜呑みにして吐き出すことを求められているわけではないことも肝に銘じておかなくてはとよく思います。
同じ内容でも、それをやり方次第でより魅力的な情報として提供することは不可能なことではないので、
受け取る側の吸収しやすい情報を作るという姿勢がぶれないように、常に客観的な見方を忘れぬよう心がけていきたいです。

今回はホワイトスペース（余白）を活かしたレイアウトについて少し書きたいと思います。

ホワイトスペースとは、画面を構成する際に絵や写真、文章などの周りにある空きスペースのことです。
（白いスペースである必要はありません。）タイポグラフィの間にあるスペースなども含まれます。

強調したい画像や部印象を読みやすく見やすいものにするために周囲に余白を設けるレイアウトテクニックですが、私が一番難しいと思うのが、ホワイトスペースの量です。

ホワイトスペースの量を学ぶ方法は、良いデザインのサイトをたくさん見て、目を養うしかないようですが、全体の構成はデッサンの構図決定に近い感じで決めると良さそうです。

フォーマットについてホワイトスペースを使ってデザインをする時に、頭に叩きこんで置きたい事

■アイキャッチ（主にデザインの中で一番相手の注意をひくもの。効果のあるマークみたいなもの）
デザイン要素を目立たせる目的でホワイトスペースを使う。

■バランス
画面上の左右、または対角線上のスーペースの面積をだいたい同じくらいに設定。
ホワイトスペースによって要素が孤立してしまわないように、なんらかのつながりをもたせる。

■区別
枠線や、背景色の変更なしに、多めに距離を取って余白で画面構成を区別する。
（コンテンツの内容をよく理解し、情報の仕分けをすることで読みやすくなる。）

会話においても、音楽においても、間の使い方がうまい人と下手な人で差が大きくでますよね。
私もプロとしての目を養っていきたいと思います。

こんにちは、shinです。

デザイン業務で、時々を作成する事があります。
ランディングページとは検索エンジン、広告などを経由してやってきたユーザが最初に見るウェブページとあります。そこへやってきたユーザの興味を更にかき立て目的のページへと導く役割を持っています。
そう考えたらウェブページのほとんどがそういう目的で作られているとは思うのですが、いろいろなランディングページの構成を参照しているとあからさまに目的に忠実で、手を替え品を替え様々な表現でもって構成されているのが印象的です。
長い長いページ中、それらだらだらと羅列されているわけではなくユーザがページを見ていく時々にどの情報を求めるのか、どの情報を差し込めば更に興味を喚起させられるのかを予測して組み立てられています。

それらだいたいのものがビジュアル面でのインパクトが大きく他で頻繁に使えるような例ではないのですが情報を扱う上ではとても勉強になります。
最近ではランディングページ集など見ていて以前のものから最近のものまで見比べてみると、更に自由な表現が多くなって縦横の区切りが薄くなっているように感じました。
いくつもの要素が組まれているのですが一通りで雰囲気を演出する働きが強くなっているように感じました。

まるでテレビショッピングでも見ているようにユーザが心地よくスムーズに情報を受け取れるようにとの配慮から生まれた表現のように思います。

ほぼ定番として出来上がった表現で様々なケースに使えるものなのですが、見る側の求めるものも変化していくものでそれに対してどのような表現で応えていくのか、ちょっとずつだとは思うのですが今後どのような変化がでてくるのかも興味深いと思いました。

気づいたら頭でっかちんになったり、足や手の左右のバランスがおかしくなってしまったり。。何度も修正を繰り返しての完成。

感覚だけでイラストを描いているとやはり、どこか不自然さが出てしまうので参考になりそうな画像をネットで探しだし、それを真似るという手法で描いていましたが、基本の人物イラストの描き方はデッサンの時と同じく、体の骨格を考えて肉付けしていく方法が人物を描く一番正確かつ効率的な描き方だと思います。

今後の技術アップに生かせるよう、反省も兼ねて仕事上で先輩方にご指摘を頂いたことを少し備忘録として書き残しておこうと思います。

• 一般に綺麗な肌の色の基本比率はCシアン：0　Yイエロー：2　Mマゼンダ：1　Kブラック：0
  あとはYやMを足したりして微調整する。（WEB上で扱う場合はもちろんRGBに変換）
• 頭の大きさ手足の長さのバランスを考える
• 骨格に肉付けをしていく感じで体のラインを書いていく。
• 曲線でできた人間は、直線でとらえた方が画面がしまり上手く見える。
• 画像を小さくした時に目が潰れてしまわないように気をつける。

人物をロボットのように各パーツごとに分け、どんなポーズも悩むことなくさらさらと描けるようにまずは、基本の骨格を頭に叩き込むことが私の今後の課題のひとつです。

唐突ですが、皆さんあなたはデコメを使う派ですか？使わない派ですか？

個人的には男性の方がデコメを多く使うのは好きではないのですが、全然デコメを使わないメールが来ると何故か寂しい気持ちになります。最近は男性の方も可愛いデコメを使われる方が増えてきたと思うのは私の周りだけでしょうか？

女の子は恋をすると特別可愛いデコメをたくさん使って好きな人にメールを送ったりするの人が多いのでは？男友達に聞いた話、ハートなどのデコメの数や動きの大きさ度合いで自分に気があると確信するそうです。
その時の気分にもよりますが、使いわけをしている身に覚えが確かにありますね（笑）

最近とあるブログに使用するデコ絵文字の作成の楽しいお仕事を頂き、とっても便利なツールを発見！Photoshopだと1pxのずれをいちいち直さなければいけないのが面倒なのですが、そんな手間いらずのソフトがありました！

非常に多機能で使いやすいのでおすすめなフリーウェア（無料）の「EDGE」というソフトです。

ソフトのダウンロードはEDGE（エッジ）オフィシャルサイトへ

主な機能
・最大4000×4000ドットのサイズ、256色に対応
・レイヤ機能（最大128枚）
・右クリックで色の取得(スポイト機能)
・豊富なパレット編集機能
・拡大縮小、ブラシ、線、四角形、円形、ベジェ曲線、ぼかし、文字、スプレー、塗潰しに対応
・ショートカットキーの設定が可能
・グリット表示、非表示に対応
・トーン描画機能
・Susie Plug-inに対応

ダウンロードしたファイルは圧縮されているので解凍してすぐに使用が可能です。

このアイコンをクリックすると起動します。

最近ではiPhone/iPod touchで使えるEDGE touch（エッジタッチ）というものも出ているみたいですネ。
私はどちらも持っていないので欲しくなりました。電車通勤の暇つぶしに遊べますね。