読者です 読者をやめる 読者になる 読者になる

Photoshopでカンプデザインをして『スライスツール』で画像を作りAdobe Bracketsでコーディング

Photoshopを起動。

『新規ファイル』で自分の作りたいサイトの幅と高さを指定。

 ↓

画像などを配置していく。コピー用紙などにレイアウト(サイトの設計図)のラフ画を描いて、サイズや空きのpixel数を決めておくと作業がスムーズにいきます、たぶん。

 ↓

『表示』の定規から『ガイドをひく』を選択。画像に沿うようにガイドをひいていきます。使いたい画像はガイドでくまなく周囲を囲みましょう。

 ↓

『スライス』ツールで欲しい画像の範囲を決める。『スライスツール』は『切り抜きツール』の上で左クリックを長押しで切り替えられます。

 ↓

『スライスツール』はクリック&ドラッグで、切り取りたい大きさを決めます。大きさが決まったらドラッグを解除。

 ↓

全てスライスし終わったら、『ファイル』の『Web用に保存』を選択。『Web用に保存』ダイアログボックスが開き、画像が少し薄めに表示されます。

『スライス選択ツール』で画像をダブルクリックで画像の名前の編集などができます。

 ↓

設定し終わったら、『保存』をクリックします。『最適化ファイルを別名で保存』ダイアログボックスが開くので、『名前』はそのままで、『フォーマット』は『画像のみ』、『スライス』は『すべてのユーザー定義スライス』を選び、『保存』をクリックします。

 ↓

[場所]に指定したところにimagesフォルダ(初期設定時)が作成され、先ほど設定したファイル名とスライスに応じた画像が書き出されます。

 (※『最適化ファイルを別名で保存』ダイアログボックスの『設定』で『その他』を選択すると、『出力設定』ダイアログボックスが開き、書き出しについて細かい設定ができます。)

 ↓ 『スライス』について詳しくはこちら

PhotoshopでWebデザインをはじめよう!第六回

Adobe Bracketsを起動。

新規ファイルを別名で保存(拡張子.htmlをファイル名の後につけてhtmlファイルにする。※Bracketsはファイル名の後に拡張子をつける必要があるので気を付けましょう。)

 ↓

!(Shift+1)を入力した後、Tabキーを選択。<!DOCTYPE HTML>~</html>まで表示されます。

 ↓

Photoshopで作ったカンプデザインをもとにコーディングしていきます。画像はスライスでWeb用に保存したものを使っていきます。

下記サイトでAdobe Braketの使い方が紹介されてます。

Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫

 ↓ とりあえず、入れておきたいBracketsの拡張機能

Documents Toolbar

 

  • 上部に現在開いているファイルをタブ表示出来ます

 

 

Brackets File Icons

 

  • ファイル名頭のアイコンを表示出来ます

 

 

Extensions Rating

 

  • 拡張機能一覧画面において、ソート可能にしたり各プラグインの作者のアイコン・DL数・スター数等の情報を表示してくれます

 

 

HTML Hint

 

  • HTMLのコードヒントを出す

 

 

MoreCSSCodeHint

 

  • CSSのコードヒントを出す

 

 

CSSfier

 

  • HTMLの構文をコピーして、sassファイルにペーストしただけでCSS構文にできます

 

 

HTML Wrapper

 

 

 

Inline Gradient Editor

 

CSSタグのGradientを作成時に「Ctrl+E」でグラデーション作成ダイアログが出る

 

 

Emmet

 

 

 

Sidebar Plus

 

  • デフォルトでは閉じるか開くかしか出来ませんが、このプラグインにより「一時的に開く」ということが出来るようになります

 

 

Various improvements

 

  • サブフォルダーの展開をすべて折りたたむ
  • プロジェクト内での検索

など便利機能の追加

 

 

Code Folding

 

  • ソースの折りたたみの機能を追加します

f:id:web-0818:20150124062403p:image

 

 

Brackets Bookmarks

 

  • ソースコード内でCtrl+F4を押すことによりその行にブックマークを設定でき、F4を押すことでいつでもブックマーク箇所へジャンプ出来ます

 

 

Indent Guides

 

  • インデントを表示してくれます

 

 

Overscroll

 

  • ファイルの最終行より更に下方までスクロール出来るようになります

 

 

Paste and Indent

 

  • ペーストしたコードを、自動的に正しくインデントしてくれます

 

 

Show Whitespace

 

  • 半角スペースをSublimeText風に表示してくれます

 

 

String Convert

(右クリックで展開)

 

  • HTMLのエンティティエンコード/デコード
  • シングル・ダブルクオートの切り替え
  • URLエンコード/デコード
  • タブ/スペースの相互変換

 

 

WD Minimap

 

  • SublimeText風のミニマップを追加します

 

 

Whitespace Normalizer

 

  • ファイル保存時に、不要なインデントを削除してくれます

 

 

CSSLint

 

  • CSSLintの結果を保存時にリアルタイムに表示してくれます

 

 

HTML Block Selector

 

  • 開始・終了タグどちらかにフォーカスが当たっている状態でCtrl+Shift+Tを押すと、対応するタグまでの範囲を選択してくれます

 

 

Custom Placehold.it image for Bracket

 

  • Brackets内でダミー画像を作るためのウィンドウが出る

 

 

W3CValidation

 

  • HTMLファイル保存時に、リアルタイムにバリデーションを実行してくれます

 

 

Brackets WordPress Hint

 

  • BracketsでWordpressのコードヒントを出す

 

 

CanIUse

 

  • Brackets内でCan I Useが開けるので、ブラウザ対応確認が簡単
  • Ctrl+Alt+U

 

 

AutoPrefixer

 

  • Can I Useを必要なCSSにはベンダープレフィックスを付与、場合によってはベンダープレフィックスを削除してくれる

 

 

Special Html Characters

 

  • Alt+cでエンティティが必要な特殊文字を一覧表示してくれます

 

 

Beautify

 

  • JavaScript、HTML、CSSを見やすいよう整形してくれます
  • minファイル等を復元・解析する際に重宝します

 

 

Minifier

 

  • CSS/JSをminify出来ます

 

 

JavaScript Globals

 

  • JSコード内のグローバル変数を分かりやすく表示してくれます
  • 変数がグローバルになっている場合、赤文字+下線で表示される

 

 

Interactive Linter

 

  • JSHint/JSLint/CoffeeLintの結果をリアルタイムに表示してくれます

 

 

QuickDocsJS

 

  • クイックドキュメント機能にJSのドキュメントを追加します

 

 

Theseus for Brackets

 

 

 

PHP SmartHints

 

  • PHPのコードヒントを表示してくれます

 

 

QuickDocsPHP

 

  • クイックドキュメント機能にPHPのドキュメントを追加します
  • ショートカットはデフォルトのCtrl+Kのまま

 

 

Brackets Color Palette

 

  • Brackets内で開いている画像から、色を抽出出来ます

 

 

Brackets Color Picker

 

 

 

Swatcher

 

  • スウォッチを下部に表示させます
  • インポートの仕方はLESSから、.acoスウォッチファイルから、画像からと3パターンあり、インポート後はワンクリックで色指定のHEXを呼び出せます

 

 

Brackets Color Palette

 

  • Brackets内で開いている画像から、色を抽出出来ます

 

 

Unused Files

 

  • プロジェクト内で使用していないファイルを検出出来ます

 

 

eqFTP

 

  • 予めFTP設定をしておくと、ローカルのファイルを上書き保存したタイミングで自動的に指定のサーバー上の該当するディレクトリにアップロードしてくれます

 

 

Edge Inspect extension for Brackets and Edge Code

 

 

 

Brackets SASS

 

 

 

SASSHints

 

  • SASSのコードヒントを出す

 

 

Response for Brackets - original

 

 

 

広告を非表示にする