HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイントCodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Slicing Images for Your Website with Photoshop
2014年8月17日 Photoshop, Webサイト制作 印刷物のデザインではそのまま印刷すればいいのですが、Webサイトの場合は出来上がったデザインをパーツごとに画像をスライス（分割）し、HTMLとCSSで組立ててWebサイト上に表示します。「実践で学ぶWebサイト制作ガイド」5回目ではそのスライス作業に注目！私は普段Fireworksを使ってスライスしていますが、ここでは前回と同様Photoshopを使ったスライス方法を紹介します。実践に入る前に、いくつかのポイントもおさえておきましょう。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その5 目標：コーディングしやすいパーツ画像を用意できる 必要なもの：Adobe Photoshop 対象レベル：Photoshopの基本的なツールの使い方がわかる 目次 誰のため？何のため？Webサイトを作り始める前に
Slicyはあっと驚くほど便利だった。 - colopixie
Slicyは、PSDをD&Dするだけで、Photoshopでレイヤーやフォルダに指定した方法で名前をつければ書きだしてくれるアプリです。 これがめっちゃ便利！驚いたたまげた。 App Storeで買いました。 今回は、Slicyの公式のデモファイルを使って、解説していきます！ちょうべんり！ 公式のデモファイルは、下記からダウンロードできます（いきなりZIPダウンロードになります） 通常 (Basic Tagging) 「Basic Tagging」のフォルダーを開き、PSDを開いてみましょう。 PSDを開くと、フォルダーやレイヤーに”.png”や”.jpg”など追加します。 そうすると・・・？ そのPSDを”Slicy”にドラッグアンドドロップすると、ぽこん！と先ほどの”.png”のついたフォルダーやファイルが出てきます。 これを上の”Copy”を押して全て保存するか、個別のファイルをドラ
「Slicy」Photoshopからのスライス作業が死ぬほど楽になるツールが便利だ！
Photoshopでデザインカンプを作成して、いざコーディング！となると面倒くさいのが画像のスライス作業。 その画像のスライスを超絶楽にしてくれるツール「Slicy」を今さらながら導入しましたので使い方をご紹介。 レイヤー・グループに名前を付けて保存 アプリはMac App StoreでDLでも良し、公式サイトから体験版をダウンロードするも良し。 試しにこんなカンプを作成してみました。世界中のイケメンを紹介する、IKEMEN.comです。第一回目のモデルから頓挫しております。 データができましたら、切り出したいパーツのレイヤーorグループに名前（○○.jpgや○○.png）を付けて保存します。 あとはその保存したPSDデータをSlicyにぶち込むだけ。 見事、名前を付けた通りに画像がスライスされました:) あとはドラッグアンドドロップか、画像を選択して上のSaveボタンをクリックして任意の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
