2009 2009年 10月 17

PhotoshopファイルからHTML / CSSへのWordPressのシリーズへ

Screen shot 2009-10-17 at 4.59.04 PM 私は使われていたような私の毎日のブログを読む時間を持って、私のお気に入りの一つから、この偉大なシリーズに出会ったミス:その1サイトクリスCoyier、 CSS-Tricksは非常に私を助けています。

シリーズでは彼はスライスとコーディングプロセスに、Webページのレイアウトを作るの設計プロセスからあなたを取る - CSSデザインが生活に来ているケース。 次の彼は、WordPressのようなCMS(コンテンツ管理システム)にそのコードを統合するプロセスを介して表示されます。 このようにすべてが(ポスト、フィード、更新)は、動的およびサイトの幅です。 私は、あなたが、彼のRSSフィードを購読する彼の他のブログをチェックアウトしてシリーズをお楽しみください。

私は、フォトギャラリー、お問い合わせフォーム、ショッピングカートやTwitterのフィードを準備中とエンコードに私たちのプロセスを表示するシリーズの第4回があった期待しているとコメントしています。 我々は、すべて見るためにチェックインする必要があります!

第1部では、クライアントからわずか数用意されているリソースでは、Photoshopでの絶対ゼロから開始します。 我々は、サイトのホームページや皮膚を設計します。

Screen shot 2009-10-17 at 4.47.42 PM

第2部では、PhotoshopからXHTML / CSSにデザインをスライスする方法を示しています。

Screen shot 2009-10-17 at 4.47.28 PM

第3部では、WordPressのテンプレートに変換する方法を示しています。

Screen shot 2009-10-17 at 4.45.57 PM

シェア

2009 2009年 7 8

[OK]を、バックのデザインとPhotoshopのヒントに!

1。 メニューを使用せずにファイルを開く

簡単です。 Photoshopのウィンドウの背景が灰色の領域をダブルクリックし、[ファイル]メニューの[開く]ダイアログボックスが表示されます - マジック!

10 Photoshopの機能-1.JPG

2。 灰色の鈍いである場合は、ブラックは素晴らしく、どの色でも良いです!

灰色から黒にイメージウィンドウ内の灰色(またはお好みの色)、コントロール+画像の周りの領域を右クリックして(コマンド+ Mac上で右クリック)を変更し、色を選択します。

10 Photoshopの機能-2.JPG

3。 サンプルの前景色と背景色

代わりに、画像からサンプリングされたものに色を変更するには、フォアグラウンドまたはバックグラウンドの色見本をクリックしてから、スポイトツールをクリックして、前景の色をサンプリングするためにクリック - 新しい背景色をサンプリングするには、Altキー(MacではOption)を押します。

10 Photoshopの機能-3.JPG

4。 図形または選択を置き、

図形または選択範囲を描画していると形が良いですが、位置が間違っている場合、マウスボタンを押したまま希望の位置に図形または選択範囲を移動すると、スペースバーを押し続ける。 スペースバーを移動して、あなたの形を続けてみましょう。

10 Photoshopの機能 -  4.jpg私

5。 選択を取り戻す

あなたが選択を紛失した場合は、Ctrl + Shift + D(Command + Shiftキー+ D Macの場合)それを取り戻すために。 Ctrl + Dキー(Macではコマンド+ D)の選択を解除します。

10 Photoshopの機能-5.JPG

6。 非表示にしてください

選択マーキーは、あなたの方法で取得されている場合は、Ctrl + Hキー(MacではCommand + H)が選択を隠すが、それでもそれは場所のままになります。 オンに戻すことを忘れてはいけないや物事は、あなたがそれが動作することを期待どおりに動作されていませんなぜあなたは不思議に思うかもしれません。

10 Photoshopの機能-6.JPG

7。 あなたが取り組んでいるものを見る

これは私のすべての時間の最大時間の節約です! あなたが別のドキュメントから大きなレイヤーをドラッグしたとき、あなたはそれを選択してレイヤーのサムネイルをCtrl +クリックでレイヤー全体とそのサイズ変更ハンドル(Macだとコマンド+クリック)を表示することができます。 その後、Ctrl + Tを押す(Macの場合コマンド+ T)サイズ変更ハンドルは、すべて見えるように画像を縮小するために変形ハンドルとCtrl + 0(ゼロ)(またはCommand + 0 Mac上で)表示することができます。

10 Photoshopの機能 -  7.jpg

8。 パレット上のスタックまたは行

同じダイアログ内の側でパレット側をスタックするには、青い線がその周りに表示されるまで、他の上で1つのパレットをドラッグして行きましょう。 画面下の他の上にパレット1をスタックするには、ちょうど別のパレットの名前の上にバーの上に1パレットをドラッグアンドドロップします。

10 Photoshopの機能 -  8a.jpg

10 Photoshopの機能 -  8b.jpg

9。 ダイアログのリセットボタンはありません? はい、あります!

あなたが彼らの元の設定またはAltキー(Macの場合はオプション)ときに、ダイアログボックスの内側を保持することで元の設定のうちの少なくともいくつかのバージョンに最もPhotoshopのダイアログをリセットすることができます - あなたはこれを行う場合は、[キャンセル]ボタンはリセットボタンに変わります。

10 Photoshopの機能 -  9.JPG

10。 すべての省略記号は、円になるかもしれない

図面を始めたと楕円は円になります一度楕円マーキーまたは円のシェイプを使用して円を描画するには、Shiftキーを押します。 あなたは、マウスの右ボタンを離すまで、両方のキーを押し続ける - 中心から描画するには、Altキー(Macの場合はオプション)は楕円を描き始めると、それに輪を作るためには、Shiftキーを追加を押したままにします。

10 Photoshopの機能 - ものの切り身

シェア