Bootcomp｜Bootstrap × Photoshop CC 2015 エクステンション
�10倍ラクするデザインカンプ制作 Photoshop CC 2019に「Bootcomp」を導入すればWebサイトやアプリのデザインカンプ制作にかける時間を大幅に短縮することが可能です。 ダウンロードする フォーマット作成 Webサイトやアプリのデザインをスタートする際にまずはレイアウトのガイドを作成するなど事前準備に時間がかかっていました。 Bootcompを使えば１クリックでフォーマットが瞬時に作成されるのですぐにデザイン作業をスタートさせることができます。 画像挿入もワンストップ シェイプを作成してクリックするだけで画像挿入〜リサイズをワンストップで行うことができます。画像がまだ未定の場合は画像挿入をキャンセルすれば自動でダミー画像が挿入されます。ぶっこみ機能を使用すれば大量の画像もあっという間に配置することができます。
「Webデザインの現場ですぐに役立つ Photoshop仕事術」本日発売！
共著で執筆させていただきました「Webデザインの現場ですぐに役立つ Photoshop仕事術」が本日発売されました。 『Webデザインの現場ですぐに役立つ Photoshop仕事術』 出版社: ソシム ＜本書の主な内容＞ ・Webデザインをスムーズに行うための設定をガイドライン ・素早く効率的にカンプ作成を行うための準備と各種TIPS ・マルチデバイス向けのデータを簡単に作る実践テックニック 他 ◆Amazon http://www.amazon.co.jp/dp/488337971X ◆Facebookページ https://www.facebook.com/photoshop4web Photoshop初心者からPhotoshopを使いこなしているプロの方まで、どなたが見ても新しい発見があるような、とても内容の濃い１冊となっています。 今回Web業界の第一線でご活躍されている共著の方々
【Webデザイナー向け】ぶっこ抜きスクリプト
レイヤー(レイヤーグループ)を１発で別ファイルにぶっこ抜くスクリプト レイヤー(レイヤーグループ)を１発で別ファイルに抜き出すスクリプトを作成しました。 頻繁に使用するので私はこのスクリプトに( command + B )のショートカットをあてています。 【使用方法】 ダウンロードした“Dearps_bukkonuki.jsx”ファイルをPhotoshopのスクリプトフォルダに入れて、[ファイル] ／ [スクリプト]より実行。 Windows: C:¥Program Files¥Adobe¥Adobe Photoshop CS2¥プリセット¥スクリプト MacOS X: /アプリケーション/Adobe Photoshop CS3/Presets/Scripts もしくはメニューバー内 [ファイル] → [スクリプト] → [参照] から“Dearps_bukkonuki.jsx”を選択する
Photoshopの便利なスクリプトや拡張機能のまとめ
Photoshopにも便利な機能を追加できるスクリプトと拡張機能があります。こちらでも自分が使っているものや便利そうだなと思ったものをまとめました。 スクリプトの場合はファイルをダウンロードしてきて以下に入れます。環境によって違う場所にあるかもしれません。 Windows → C:\Program Files\Adobe\Adobe Photoshop CS5\Presets\Scripts Mac → アプリケーションのAdobe Photoshop CS5\Presets\Scripts 拡張機能はダウンロードしたファイルをクリックすると、Adobe Extension Managerが起動しますのでそちらにインストールすればOKです。 Index… PSDからテキストを抽出 レイヤー名の「コピー」を削除 Fireworks風のスライスレイヤー 選択したフォルダやレイヤーを別ファイルへ
表形式でコピー出来るChrome拡張機能『Table Capture』 - TAKE OFF
『Table Capture』は、閲覧中のページ内にある表形式になっている所を、表としてコピーしてExcelなどにそのまま貼りつけられるChromeの拡張機能です。 例えばこのような一覧表になっているページの表の部分をコピーしたい場合に利用します。 表になっている箇所があると、上部に赤いアイコンが表示されるようになるので、ここをクリックします。 ページ内にある表の数だけ、ここでは7つの表があるので１〜７と表示されているので、該当の表に当たる番号の「Copy to Clipboard」をクリックします。 （カーソルを合わせると、対象となる表が赤枠で囲まれるので判別出来ます） コピーしたら、Excelなどのソフトに貼りつければ、表として貼り付ける事が出来ます。 サンプルでは１列ずれていますが、そのくらいならすぐに調整が出来るので通常よりもずっと楽です。 もう一つ、先ほどコピーした後に隣の「To
これは便利！Googleの画像検索で透過画像を見つけ出す -Alpha Finder
Alpha Finder Alpha Finderのインストール Alpha Finderの使い方 Alpha Finderのインストール Alpha Finderのインストールは簡単で、下記ページにChromeでアクセスし機能拡張をインストールしてください。 Chrome ウェブストア - Alpha Finder インストールが完了したら、Googleの画像検索へアクセス！ Google 画像検索 「.com」にアクセスしてください。 「.co.jp」では利用できません。画像の検索自体はどちらも同じだと思います。 Alpha Finderの使い方 ChromeでGoogle 画像検索にアクセスします。 とりあえず、「alpha」で画像検索。 目的の画像をホバーすると、拡大表示されます。
私が愛用している Chrome拡張機能 おすすめ14選 - ネットの海の渚にて
今回は私が実際に使っていて便利だなぁと日頃思っているおすすめのChrome拡張機能を紹介します。 Google Mail Multi-Account Checker https://chrome.google.com/webstore/detail/google-mail-multi-account/mcpnehokodklgijkcakcfmccgpanipfp メインのアカウントとSNSやブログ関係のアカウントを使い分けているのでこれが無いとめちゃくちゃ不便。これのおかげでメーラーアプリはめったに立ち上げなくてもよくなりました。 HD for YouTube™ HD for YouTube™ - Chrome Web Store YouTubeを開くと強制的に最高画質に変更してくれる優れもの。 ちょっとの手間だけどあったらやっぱり便利。 Speed Dial [FVD] Speed D
タブ単位でユーザーエージェントの切替ができるChrome拡張機能「MobileLayouter」｜男子ハック
Macおすすめアプリタブ単位でユーザーエージェントの切替ができるChrome拡張機能「MobileLayouter」2014年2月14日181 @JUNP_Nです。mbdbさんで紹介されていて導入してみたらもの凄く便利だったChrome拡張機能「MobileLayouter」のご紹介。タブ単位でユーザーエージェントの切替ができて超便利です。 タブ単位でユーザーエージェント切替がもの凄くいい感じ！今回紹介するのは「MobileLayouter」というChrome拡張機能。ユーザーエージェントを切り替えて、iPhoneなどの端末での表示を確認することができる拡張機能です。 今までは別の拡張機能を使ってユーザーエージェントを変更していましたが、ブラウザで開いているタブ全体のユーザーエージェントが変わってしまうのでとても不便でした。 「MobileLayouter」の便利なところは「タブ単位でユー
Fireworksでページのコピペをするコマンド | Yoropan blog
元ネタはHierarchical Layer Copyというレイヤー構造をコピペするコマンド。 これをレイヤー回数分繰り返し処理させています。 使い方） 1.以下ファイルを解凍してコマンドフォルダに入れてください。 runPagePaste.zip 2.コマンドメニューに追加されます。 Page Copy：ページのコピー Page Paste：ページをペースト 3.Page Copyでコピーしたら別のドキュメントに移ってPage Pasteをしてください。 同じドキュメント内ではコピペできません。（その場合は普通にページを複製すればいいはずなので） なおHierarchical Layer Copyがもともとステート（フレーム）のコピーを行わないので今回のコマンドもステートはコピーできません。 win xp cs4で動作確認しています。使用は自己責任でお願いします。 関連する記事: Fir
Fireworksから複数テキストを一瞬で抽出！コーディング効率化コマンドを作ってみました | たねっぱ！
FireworksのデザインデータからHTMLコーディングする際、テキストを一つ一つコピー＆ペーストするのが面倒くさい…。そこで複数のテキストを一瞬でクリップボードにコピーし、テキストエディタに全て書き出しできるコマンドを作成しました。 （一応、誰か作ってないか探したのですが無かったので。既にありましたらすいません） どのようなコマンドかというと、以下のFireworksで作られたデザインがあるとします。 HTMLコーディングするために、デザイン内のテキスト情報を全部テキストエディタ上に写したい。 そこで、このコマンド使用すると、↓のように一瞬（5秒くらい）でテキストだけを上から順に全て書き出せます。 インストール方法 コマンドjsfデータftpa_textmulticopy をダウンロードします。 解凍した ftpa_textmulticopy.jsf ファイルを Windows:【C:
【Fireworks】ワイヤフレーム作成時に覚えておくと便利なアタリ画像＆アタリテキストを簡単に作成する拡張機能 | バシャログ。
3日間、ノロウイルスにやられ寝込んでいました ishida です。 手洗い・うがいはキチンとしておきましょうね。 さてさて今回は、「Fireworks Lover Advent Calendar 2012」 8日目のエントリーとして Fireworksでワイヤフレーム・モック作成時に覚えておくと便利な拡張機能について２つご紹介します。 自分はワイヤーフレーム作成につかうツールは、もっぱらFireworksです。 CS6にバージョンアップされてからワイヤーフレーム用の共有シンボルがめちゃくちゃ増えて、デザインツールとしてだけではなくワイヤフレーム作成ツールとしても便利になりました。 ちなみに共有シンボルの「ワイヤフレーム」内にあるパーツはこんな感じです。 また「jQuery Bootstrap」のパーツもあったりします。 これだけでもかなり便利なのですが、コンテンツ内のアタリ画像とダミーテキ
【Fireworks】画像の傾きを直してくれる「LevelHorizon」 | バシャログ。
以前、画像の傾きを直すカンタンな方法を「画像の傾きを直してくれる「ものさしツール」」でご紹介しましたが、これはあくまで photoshop での方法でした。今回は Fireworks でのご紹介です。 この画像微妙に傾いてやがるでもここだけを直すのに photoshop 起動するのは正直ダリー…いや効率悪い、という私に朗報です。 [1]エクステンション「Level Horizon」をインストールします。 Level Horizon はラインツールだけで傾きを修正してくれるスグレモノです。 [2]画像の傾きにあわせて「ラインツール」で直線パスを書きます。 [3]コマンド→ドキュメント→ Level Horizon を実行します。 [4]画像が直線の傾きにあわせて修正されます。 先ほど引いた直線は、自動的に削除されます。 Level Horizon は1オブジェクトに対してではなく、開いたpn
Zen-Codingの次期バージョン、Emmet について - kojika17
Sergey Chikuyonok氏のGithubを見に行ったら、"Emmet (ex-Zen Coding)" という気になる記述があり、気になったので調べてみました。 Zen-Codingについて Zen-Codingは、IDEやエディタで使えるHTML/CSSのコーディングをパワフルにサポートするプラグインです。多くのアプリケーションで提供されており、3年前ほどから日本でも多くのサイトがZen-Codingを紹介しています。 そのZen-Codingが、「Emmet」と、リネームされてプロジェクトが進められているようです。 Emmet(beta) Emmetは、開発中です。 正式リリースはまだですが、機能は試すことができます。 Emmetは、2013年2月24日に正式リリースされました。 基本的には、今までのZen-Codingと変わりません。 Zen-Codingを使っていた人は、
Chromeを最強化するオススメ拡張機能11
人気ブラウザー『Google Chrome』。拡張機能は数多くあるけれど、まず最初に入れておきたい11の拡張機能を紹介。すべてフリーで導入することができる。快適かつ最強にパワーアップしたChromeを使いこなそう！ ●関連サイト Google Chrome 『Incredible StartPage』 スタートページをカスタマイズ！ シンプルなクロームのスタートページを、機能的な画面にする拡張機能。ブックマークやウェブアプリ、最近閉じたタブが見やすくなる。 ●関連サイト Incredible StartPage バージョン 1.4.3 作者 www.visibotech.com 『Chrome用TooManyTabs』 大量タブを開くときに絶対必要な拡張機能！ 大量のタブをサムネイルで一覧で表示、目的のタブを簡単に選び出せる。並び替えや検索機能もあり、タブを閉じるのがめんどうな人にオススメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Code Adventure | Simplify Workflows for Designers
ウェブページにメモやハイライトをつけて、そのまま保存もできる『Annotary』 | ライフハッカー・ジャパン
知っているとちょっと便利になるChrome拡張機能10個まとめ｜男子ハック
Project Phoenix
Fireworksの拡張まとめ（2012年8月版） | Webデザインのタネ
