第1弾:デザイン画像を稼働中のWebページに組み入れる方法

仕入れたデザイン画像を稼働中のウェブページに適用するのに苦労することはありませんか?ウェブ開発のすべり出しが順調であるにも関わらず、デザイン設計のある部分でつまづくことは? wireframes はあなたにとってコーディングによる設計よりも簡単?ローディング速度が遅くメンテの難しいwebの開発に満足できますか? 多くのデザイナーたちが自分のデザイン画像を稼働中のHTML/CSS web ページに上手く変換できません( 中にはコーディングすら全くしない人もいます)。大抵の場合、その理由はデザイン設計のアプローチと、1つの命令行を書き込む前のプロセスに対する考え方に問題があるからです。 噂とは裏腹にCSSは難しい言語ではありませんし、web ページやweb サイトの開発も難しくある必要はありません。多くの場合、問題は基礎構造の開発前に細かい部分を気にして混乱してしまうところにあります。またデザインのうち、コードを複雑化するような軽微で些細な部分の処理に捕われてしまうことも問題要因の一つです。 この記事は、http://www.onextrapixel.com/の許可を得て、翻訳しています。一部変更して翻訳している場合もあります。オリジナルの記事はここよりご覧いただけます。 デモにリンク オリジナルの記事 この投稿では、皆様に自由にダウンロードできる試供デザインを閲覧し、そのデザインを稼働中のweb ページに組み入れる方法を見ていただきます。この投稿では私は簡潔なコードを用いますが、デザイン・テンプレートに付いたオリジナルコード同様、ページを立ち上げるために私が使用したコードをダウンロードしていただけます。この投稿自体は、主にデザイン設計のための思考過程に重点をおいて進めていきます。 ダウンロード The Artificial Casting テンプレート 下のデザインをご覧ください。これらはSmashing Magazinesから無料でダウンロードできます(当ページの3つ目のテンプレート)。 テンプレートクリエーターによる設計デモをご覧になり、上にある私のデモと比較していただくことも出来ます。 私がこのテンプレートを選んだのは、見た目がオシャレで私がチェスが好きだという理由もありますが、何より典型的な3カラム・レイアウトで、開発にあたり2つ3つの難関と選択肢が用意されているからです。また最終ページに入れるか否かを決定する詳細な箇所が数個含まれています。 デザインから開発までの過程に対する一般的考え Artificial Casting テンプレートの説明に入る前に、開発にあたってwebサイト全てに共通する2つ3つの事柄を考えてみましょう。 好むと好まざるとに関わらず、web ページは全てボックスを使って開発されます。HTMLの全要素はボックスを持ち、ボックスは CSSボックス・モデルをもとに形づけられます。隣同士や上下に並ぶボックスもあれば、他のボックスに包含されているものもあります。デザインが箱形でなければならないということではなく、開発時に作られるボックスについて考える必要があるということです。 最も上級なレベルでは、2つ3つの大ボックスで大枠のレイアウトが構成されて、デザインの詳細はその大ボックス中の小ボックスに入ります。これらの長方形ボックスを頭で思い描くことは、デザインのどの部分がボックスに上手くフィットして、どの部分をボックスから外すべきかを見定めるのに役立ちます。まずは、これらの大レイアウト・ボックスについて考えましょう。細かい部分を見て内側から外側へコーディングせず、外側からのコーディングを行います。 画像とHTTPリクエストは、webページのローディングを遅くする大きな要因の一つです。デザインを考えるにあたって本当に画像化するべきもの、またコードを用いて簡単に再現できるものは何かについて思案することは賢明です。一つ画像を少なくすることで、ファイルサイズもサーバー上のリクエスト数も縮小するため、 画像を最適化することができます。 私はただの大きな色の集合体に過ぎない、webページ上の画像を見かけることがよくあります。そもそも色の集合体が画像化されなければならない理由はないのです。私たちは画像を眺めて、どうやって必要とする画像全体のファイルサイズを縮めるかについて考えながら、使用する画像の数を減らしています。 レイアウト テンプレートに関してまず考えたいことは、レイアウト全体の概観についてです。デザインを大ブロックに分けようとしていますが、この場合、まず上下方向に行うのが最も簡単でしょう。デザインを見ると3つの帯がページを横切っているのが分かります。この帯がヘッダーやコンテンツ、そしてフッターに当たるものです。 フッター 最下部に3つの情報ボックスとテキストを含んだ分かりやすいフッターがあります。とりあえずフッターの中味は気にせず、先ず上部からフッターを切り離すためにどこで線引きするかを決めます。 この端の部分を画像化しますが、それをフッターもしくは上のボックスのどちらに入れるかを選択できます。どちらでもOKですが、私はイメージをフッターに入れることにしました。 この記事で触れませんが、最終的にはサイトにわたって繰り返されるページのある部分を別のファイルで管理するために、PHPを含有したファイルの類いを使用するのが妥当でしょう。この画像は当サイトの全ページ上に登場するため、私にとっては最終的にfooter.phpファイルになるフッターに置くほうが合理的なのです。 フッター内にある他すべての詳細については、基礎レイアウトの作成中はそれについて考える必要はありません。 コンテンツ 本文を3つのカラムと2つのサイドバー、そしてその間にあるメイン・セクションに分けてフッターの真上に置きます。3つのカラムについては後ほどもう少し詳しく触れます。今は内側を3つのカラムまたは3つの小ボックスに分割される、一つの大コンテンツ・ボックスについて考えるだけで十分です。 フッターの場合と同じく、コンテンツ・ボックスの初めと終わりをどこにするかを決めなければなりません。ここに開発上の問題のタネとなる2つの要素があります。複数のカラムおよびコンテンツ全体をそれぞれまたいでいるログイン・ボックスとチェスの駒の画像はヘッダーに属します。 オリジナルのテンプレート開発にあたって、両者はヘッダーの一部として設定されましたが、私はそれらをコンテンツエリアに置くことにしました。フッターの場合と同じく、この2つがサイトの全ページに登場させるべきかを考えました。確かにテンプレートのデザイン時に設定すればそうなっていたでしょう。しかし、2つがページ毎に変わるような柔軟性を持たせるのも良いだろうと考えました。 おそらく、サイト内の別のセクションでは別のチェス駒画像が登場し、ログイン・ボックスは一部のページあるいはセクションにのみ登場するでしょう。 コンテンツエリアにインクルード・ファイルは使いません。ページ毎に変わるセクションはここだけなので、サイトにわたって変化させたいデザイン素材は、このボックスに入れるのが妥当なのです。しかしここからチェス駒の画像をコンテンツとヘッダーの両方に置くため、どのようにコーディングするかを把握しておく必要があります。 ヘッダー ここではヘッダーについて紹介します。消去法からするとヘッダーにはロゴやナビゲーション・バー、そしてその背後に勾配の背景が入ります。ヘッダーとコンテンツエリアの間を、ページを横切る細いラインで仕切ります。このラインもページ毎に変化しないため私はヘッダーに入れています。ヘッダーは最終的にサイトの全ページに入る header.phpファイルになります。 レイアウトの作成 HTMLを以下のように組み立てることができます。 先述したメインボックスやビルディング・ボックスは、それぞれ セマンティック id を適用した divになります。 コンテンツエリアの中に3つのカラムが入っているのが分かるとおり、コンテンツ div は3つの追加 divsを持っています。一方がより重要であることを反映させるためによくされることですが、2つのサイドバーをそれぞれ「プライマリー」「セカンダリー」と名付けました。 チェス駒とログイン・ボックスの画像をコンテンツ div の中に追加しますが、 ログイン・ボックスをカラム構造の枠から独立させるために、 3つのカラムdivsの外に置くことにします。 ここからはCSSについて。 CSSでサイトのレイアウトを作る際の鍵は、CSSの不要な場合を見定めること、そしてフロートを要する場所がわずかであるという理解です。HTMLでは、コンテンツ div はそのままヘッダー divの真下に置き、 フッター div はそのままコンテンツdiv の下に置きます。これは div のデフォルト動作で、それが起こるために何もする必要はありません。 このデフォルト動作を変えたいので、コンテンツdiv内の各 divs をフロートします。これら3つのdivs がお互いの下に来ないように、お互いを隣り合わせにして配置し各々左方向にフロートするようにします。 デフォルト動作を変更させたら次はフッター divの調整を行います。 コンテンツ div内の内容全てがフロートした状態にあるので、 フッター divは自動的にその下に来ることはありません。 clear: both を追加することで(ここでは  clear: leftを使っていますが)フッター div を強制的にコンテンツ div下に持っていきます。 必然的により多くのCSSが最終的には必要となります。上記のコードを試すと、どの divs にも幅や高さ指定、またそれらを設定するコンテンツがないため内容が乏しいのが分かります。そこにはこれから中味を埋めていく空っぽの構造体があるだけです。 フロートされた3つの divs の合計幅がページ全体の幅を越えないようにしなければいけないため、それら3つの幅設定には特に注意する必要があります。レイアウトに際してのもう一つの決定事項である全体の幅について、まだ詳しく述べていないことにお気づきでしょう。 固定もしくはリキッドのレイアウト デザイン・イメージを一見しただけでは、デザインが 固定されているのか流動的なのかが分かりません。事実どちらも可能なのです。テンプレートに付いているコードを見ると、3つの水平の帯(ヘッダー、コンテンツ。フッター)がウィンドウの端まで伸びながら、帯内のコンテンツ全部がページの中央に来るように設計されています。同じように私たちもしてみましょう。 全てを固定して中央に持っていきたい時は、div でその周辺を包んで幅を確保し、その div  で包んだ部分を中央に据えます。おそらくCSSでページを中央に置く方法が皆さんには馴染み深いでしょう。 ページ全体を中央に置く方が簡単と言えば簡単なのですが、ここではそれを行いません。3つの水平帯の背景をブラウザの端まで伸ばしながら、帯内の内容全てをウィンドウの中央に置きます。私たちが目指すのは リキッドな背景と固定したコンテンツですが、幸いにもSoh Tanaka氏がすばらしいとても簡単な解決方法を提供してくれました。 ただCSSで一つのクラスを作り、それをHTML構造内にある選択可能なdivsに適用するだけでよいのです。 センタリングに精通している人なら、上のコードが通常 wrapper divに加えるものであることにお気付きになるでしょう。クラスとしてCSSを設定すれば、それが適用される箇所での柔軟さとコントロールが確実になります。新しいHTMLはこのようになります。 […]

フォトショップ上達10のコツ:基礎知識を広げよう

この記事は、http://www.onextrapixel.com/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 フォトショップは通常、画像修正で使われることが多いですが、時とともにほかの分野、例えばイラストレーションやコンセプシャルアート、グラッフィックデザインまたはウエッブデザイン等でも一般的に使われるようになりました。したがって、フォトショップはクリエイティブな仕事で多用されるソフトということになります。しかし初心者にとって、最初は同じような間違いを起こしやすいし、また使い方を間違っているため時間のかかる方法でもあります。 フォトショップ初心者も、もう何年もフォトショップを使用している人も、この記事からフォトショップの基礎知識の幅を広げられる秘訣とそれをどう使用するかについて学べます。 フォトショップの基礎知識を広げよう 1、まず、レイヤーパレットは見やすいように整理して広げておきます。そうすることによって、プロジェクトに変更を加えるとき一番作業しやすくなります。 2、画像に調整をきかせるときは画像そのものは触らず調整レイヤーの上から作業します。そうすれば後で調整レイヤーを消去することも、その調整レイヤーをほかのレイヤーに使用することも変更することもできます。これを有効に活用します。 3、快適に作業を進めるには、レイヤー達が混乱しない様にします。全てのサンプルレイヤーにチェックを入れ、調整レイヤー、マスク、そして修正ツールを使います。そうする事で、間違えるのを心配せずにすみます。 4、ブラシの使用に関してですが、ブラシオプションよりブラシのサイズや硬さを正確に合わせるには時間がかかりすぎるし、また不可能に近いです。マック使用の場合、CtrlとAltを押し水平にドラッグしながらサイズを合わせ、垂直にドラッグしながらブラシの硬さを合わせます。ウインドウズでは、Altを押しながら右クリックでマックと同じ要領でブラシの調節を行います。実際のサイズとシャープネスのプレヴューは赤色で現されており、もっと簡単に素早く操作できます。 5、切り抜きツールを使用する場合は常に切り抜きピクセル消去の所はチェックマークを入れないでおきます。新しいオプションとして混乱しないで作業すというよりは、囲んだ画像の外枠の画像を消去せずに隠しておく為です。制作終了後にもう一度このオプションををチェックして切り抜き画像の最終サイズを決めれば記録保存スペースの使用を減らすことができます。 6、選択ツールを上手に使用するには、何種類かの違った選択ツールを併用して調整する方法が一番です。まずはじめは投げなわツールかマジックワンドを使用して簡単な選択をしておき、境界線の絞込みを使って縮小します。 7、レイヤーマスクを使う時に、いつも境界線のフェザー効果をかける必要はなく、マスクのプロパティーから素早くシャープネスとソフトネスを調整することができますし、いつでも最初のマスクをかけてない状態に戻るという選択も可能です。 8、他のアーティストから学んでみましょう。素晴らしいアーティスト達を見つけ、彼らの作品集を見たり、チュートリアルや彼らの技を見ていろいろ研究してみましょう。そうすれば、刺激されるだけでなく、探索して学び自分のスタイルを改善することができるでしょう。 9、マウスを使うのはやめて、タブレットを使いましょう。イラストレーター、デザイナー、リタッチャー何であれ絶対タブレットを使って下さい。仕事が早くなるし、もっと感覚的で正確に作業できて、(特にブラシツールを使用する時)圧力、傾斜、回転等をコントロールできるという長所もありますし、なんと言っても手に感謝されることでしょう。 10、スケッチをすることに時間を費やして下さい。まず何を制作するかというはっきりしたアイデアを持ち、下書きのために、時間を浪費しないで下さい。アイデア、色その他を決めたスケッチを描き、そして迷うことなく最終のイメージにたどり着きましょう。 特定の分野の汎用知識 1、イラストレーション、マットペインティング、コンセプトアート。。。まず50%のグレーの背景よりスタートします。その理由は単純です。光と影の関係で言うと、白色の背景で始める時、白色は100%光なので中間の明暗と影を正確に補正するのは難しいです。なので50%グレーの背景ではじめて、基本の色や形を追加し、それにもっと自然に明暗をつけることができます。 2、グラッフィックやウエッブデザインでは、無限の可能性があるスタイル効果を有効活用します。シンプルレイヤー、形、テキストなどは、スタイル効果をかけることで見栄えが良くなるし、このレイヤスタイルを他のレイヤーに使用することもできます。 3、活字体アートには、フォトショップのCS6の3Dテキスト操作オプションが一番です。劇的に改良されたので、想像しているものが何でも、数回の操作で出来上がります。 4、ペインティングでは、ブラシを使いますが、全部のブラシを使う必要はありません。一番良い方法は、 似たような技術を使うことで、作品の見た目に統一感を出すことです。もし、たくさん違った種類のブラシを使うと、例えばイラストレーションでいうと、力強さや一貫性を失うことになります。 結論 フォトショップを使用するうえで一番重要なのは、オプションを最大限に活用し、混乱してしまわずに作業する方法に慣れてしまうことで、そうすれば制作中はいつでも変更可能で、編集の途中で何かを無くしてしまうという事もありません。 もしあなたがフォトショップ初心者でも熟練者でも、これらの知識を自分の作業方法に取り入れることをお勧めします。そうすれば、同じ作業を短い時間で、またもっと素早く編集出来る事でしょう。 フォトショップをどう使用するかが全てではありませんが、正しい使い方を知る事は重要な事です。