フォトショップ上達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、ペインティングでは、ブラシを使いますが、全部のブラシを使う必要はありません。一番良い方法は、 似たような技術を使うことで、作品の見た目に統一感を出すことです。もし、たくさん違った種類のブラシを使うと、例えばイラストレーションでいうと、力強さや一貫性を失うことになります。 結論 フォトショップを使用するうえで一番重要なのは、オプションを最大限に活用し、混乱してしまわずに作業する方法に慣れてしまうことで、そうすれば制作中はいつでも変更可能で、編集の途中で何かを無くしてしまうという事もありません。 もしあなたがフォトショップ初心者でも熟練者でも、これらの知識を自分の作業方法に取り入れることをお勧めします。そうすれば、同じ作業を短い時間で、またもっと素早く編集出来る事でしょう。 フォトショップをどう使用するかが全てではありませんが、正しい使い方を知る事は重要な事です。

ウェブサイトを HTML&CSSに基礎から構築 〜 最終回 〜

デモへリンク 元ファイルダウンロード ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。 ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを4回に分けて説明しています。 今回は、第4回目の最終回です。 そして、この最終回は、チュートリアルをビデオ録画して送りいたします。ビデオチュートリアルは、文書と違い、簡単に見たい所を飛ばすことや、飛ばし読みなどは難しいですが、実際にどんな用に作られたか目で見ながら学ぶことができるので、文書よりもっと簡単に学べるとおもいます。 過去のチュートリアルを見ていない方は、こちらよりどうぞ。 第1回: ウェブサイト作成の準備&ボディーのバックグラウンドイメージの設定 第2回: メニュー&ロゴ、ソーシャルリンクのCSS&HTML 第3回: jQueryを使ってイメージスライダーの設置 第4回: 最新のプロジェクトのCSS ビデオ講座 ビデオチュートリアルパート1 [youtube=http://www.youtube.com/watch?v=9Hye8gLzyWY&rel=0&w=590] ビデオチュートリアルパート2 [youtube=http://www.youtube.com/watch?v=6GU_TPJ4bUI&rel=0&w=590] ビデオチュートリアルパート3 [youtube=http://www.youtube.com/watch?v=rwwyTOLD_lI&rel=0&w=590] ビデオチュートリアルパート4 [youtube=http://www.youtube.com/watch?v=ddBiJFeL1h0&rel=0&w=590] 今回の分のHTML   今回の分のCSS

ウェブサイトを HTML&CSSに基礎から構築 〜 第 3 回 〜

ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。 ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを4回に分けて説明しています。 これが今回のチュートリアルで作って出来上がったウェブサイトです。 完成したサイト 第1回: ウェブサイト作成の準備&ボディーのバックグラウンドイメージの設定 第2回: メニュー&ロゴ、ソーシャルリンクのCSS&HTML 第3回: jQueryを使ってイメージスライダーの設置 第4回: 最新のプロジェクトのCSS ビデオ講座 1.スライダー プラグインをダウンロード 画像を順番に表示させる、スライダー系のプラグイン色々とありますが、今回は、CSS Tricksの運営者Chris Coyierが初めて作って、その後数人のでプログラマーが参加し強化された、AnythingSliderを使いたいと思います。 AnythingSliderは、機能が豊富なのと、自分が好きな様にスタイルができるので、とても重宝すると思います。 それでは、早速ここからダウンロードしてください=>AnythingSlider ダウンロード 2.スラーダー用のファイルの設置 お決まりですが、とりあえずjQueryのスクリプトのリンクとAnythingSliderのスクリプトファイルと自分たちのスクリプットファイルをヘッダー内にリンクを挿入してください。 それと、AnythingSliderのCSSをリンクさせてください。これで、最低限必要なファイルは、全部OKです。 3.スライダー用にのHTMLマークアップ Anythingスライダーは、ul li を使いますので、一個一個のスライダーは必ず li の中に入れてください。今回は、li の中に入るのは、画像だけですので、とても単純に以下の様になります。 画像は、適当に用意いたしました。今回使う画像のサイズは、800×280 です。 4.Javascriptの設定 実際にスライダーを稼動させるには、Jqueryのいつもの $(document).ready(function(){}); のファンクション内にさっき程ulにつけたIDを指定して、anythingSliderのファンクションを付けます。 $(document) は、文字どうりドキュメントが、 .ready() で用意できたらー、となるので、訳すと”このファイルが全部ダウンロード完了したら” になります。 そして、.ready() 内に新しいファンクション function(){} を入れることで、実際にダウンロードが完了するとそのファンクションが稼動されます。いわゆる、callback ですね。 さて、今回のanythingSliderの設定は以下になります。 初心者でも理解出来る様に、上の各ラインが何しているか説明して行きたいと思います。 まず、DOM(簡単に言うとHTMLの各部分のことですが、詳しい説明は、WIKIでご覧ください。) を指定して、 これで、さっき程の ul で指定した ID をターゲット完了です。 そして、それに対して、anythingSlider のファンクションを発動させます。 これで、発動は完了です。 ただ、これでは、すべてのオプションがデフォルトのままになりますので、anythingSlider のファンクション内に、自分たちの好きなオプションを加えます。指定出来るオプションは、各ファンクションによって決まっています。anythingSlider のファンクションが指定できるオプションは、CSS TricksのスライダーのデモのページのDefault Optionのリストをご覧ください。 実際今回必要なのは、左と右の矢印だけなので、必要なオプションは、以下になります。 widthとheightで横幅と縦のサイズを指定して、buildNavigationをfalseで、ナビーゲーションの作成(スライダーの数や現在地の表示)は、なし に指定。 autoPlayLockedをTrueで、右クリックや左矢印を押しても、自動的にローテーションは止めない。enableKeyboardをfalseキーボードでのスライダーのコントロールは OFF にしてしました。 コンマ区切りでオプションを指定して、最後のオプションのコンマはいりません。すべてのオションは、javascriptのobject literalとしてファンクション内に指定しますので、 {} で閉じてください。 なので、最終的に全部をまとめると以下の用になります。 5.CSSの調整 あとは、自分のサイトのデザインに会う様に CSS でマークアップをしていきます。anythingslider.css 内のcssを変更してもいいのですが、新しいバージョンにアップデートした場合に、簡単に上書きできないので、すべてのCSSは、自分のサイトのメインのstyle.cssに入れていきましょう。 そんなに難しいCSSは入っていなので、説明ははぶいておきます。 なにか、分からないようなことが有れば、いつでもコメントを残してください。 これで、スライダーの完成です。必要があればスライダーのデモご覧になって遊んでみてください。 今回のチュートリアル分のデモ 第1回: ウェブサイト作成の準備&ボディーのバックグラウンドイメージの設定 第2回: メニュー&ロゴ、ソーシャルリンクのCSS&HTML 第3回: jQueryを使ってイメージスライダーの設置 第4回: 最新のプロジェクトのCSS ビデオ講座