Webデザインに欠かせないPhotoshop。Photoshopには便利なプラグインがたくさんあり、作業に応じて使いわけることでWeb制作が爆速化します!プラグインを使えばガイド引き、レイヤー編集、レイアウト作成などを助けてくれるので、作業が通常の何倍も捗るでしょう。 そこで今回は、Web制作を爆速化して作業時間を短縮してくれる、無料のPhotoshopプラグインを16個まとめてご紹介します。使ってみて損があるどころか、使わないと人生の時間を損するレベルのプラグインたちです!
![Web制作が爆速化!Photoshopのおすすめプラグイン16選](https://cdn-ak-scissors.b.st-hatena.com/image/square/d065f425efe3ef280ea8c3ce47623271fa3f366b/height=288;version=1;width=512/https%3A%2F%2Fcreator.levtech.jp%2Ffiles%2Fimg%2Ftips%2F20%2Fmain_image.jpg)
LazyLoader実装ならお任せ!というぐらい高機能なjQueryプラグイン「Lazy Load XT」 2015年02月10日- Demos LazyLoader実装ならお任せ!というぐらい高機能なjQueryプラグイン「Lazy Load XT」 画像、動画、iframeのLazyLoadに対応させるためのjQueryプラグイン。 表示時のエフェクトをフェードインや、スピナー表示する等を選べたり、レスポンシブな出し分けやRetina対応なども。background-imageのLazyLoadにも対応。 スマホファースト、スマホの通信も大分速くなったとはいえ、通信量をまず減らしてページ表示速度を上げるという意味では活用できるプラグインですね 関連エントリ Googleマップを遅延ロードしてページ読込速度を上げてくれるjQueryプラグイン「Lazy-loading」
When upgrading from version 2.x to 3.x it’s important to use version 3 CSS and .png files. Version 3 is backwards compatible but it’s also a huge overhaul. One significant change is that you don’t need to call the update method manually (the script does it automatically). For more info see changelog. Version 2 is still maintained and updated here. Get started Configuration Methods Styling Callback
Wordperssでいくつもサイトを構築する際に、面倒なのはいつも必ず使うプラグインをインストールすること。必ず使うものを覚えておくのも面倒ですし、ひとつひとつインストールしていくのも億劫になります。 そんなときに便利なのが、今回ご紹介するサービスとプラグインのセットです。 1人で頑張っているウェブ担当者さま必見!業界トップに教えてもらえるチャンス 10枚とじタイプもある針のいらないホッチキス コクヨ ハリナックス 毎回使うプラグインをまとめてインストールできる「WPCore」 「WPCore.com」は、よく使うプラグインをサービスサイト上にまとめておいて、専用のプラグインを使って一括インストールできるオンラインサービス。 まとめたプラグインをコレクションとして公開し、共有することもできるようになっています。 サービスサイト上にプラグインをまとめられる WPCore.comに無料会員登録
Illustratorでウェブデザインをおこなう人が増えてきましたが、やはりPhotoshopをベースにしているデザイナーさんが多いと思います。そんなPhotoshopを更に便利にパワーアップするプラグイン・機能拡張を紹介します。 ここで紹介するものは、当方の日本語環境(Win/Mac, CS6/CC)で利用しています。 面倒なガイド引きをパワーアップする強力な味方 等間隔ではないガイド引きを簡単に設定できる 選択範囲やオブジェクトを元にガイドが引ける さまざまなオブジェクトのカラーを一元管理できる 要素のサイズやエフェクトやフォントなどの情報を書き出す PNG画像をより美しく、より軽量に書き出す 黄金比、黄金螺旋、黄金三角形、1/3ルール、対角線などを簡単に描く Subtle Patternsのテクスチャ素材をPhotoshopから利用できる flat iconのアイコン素材をPhoto
WordPressには便利なプラグインが沢山あり、それらを使うことであまり知識がない方でも様々な機能を実装して自分好みのブログやサイトを作ることができます。 ソーシャルボタンやページネーションを簡単に設置できたり、関連記事や人気記事を手軽に表示できるといったような見栄えを変えたりするユーザー向け(表向き)の機能を実装するタイプのプラグインはよく見かけるのでご存じの方も多いと思いますが、WordPressにはこういったプラグインだけでなく、何かと捗る開発者向けの裏方タイプのプラグインも便利なものが数多くあるので、それらの中から自分が覚えておいて損はないと思うものを紹介します。 全部のプラグインを普段の開発時に使用しているというわけではありませんが、以下で紹介しているものはいずれも個人的に開発時に便利だと思ったプラグインです。 有名なデバッグ系プラグインをはじめ、テンプレートファイルやIDを容
lightGallery A lightweight, modular, JavaScript image and video lightbox gallery plugin. Available for React.js, Vue.js, Angular, and TypeScript. View on GitHub
jQuery.Kerning.js A jquery plugin which adjust text kerning in HTML. Get Source Demo うつくし明朝 - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 うつくし明朝 - kerned ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場 あのイーハトーヴォ
マイ AdSense ページにはお客様のアカウントに特化した情報が表示されます。AdSense での成果向上にぜひご活用ください。 WordPress ユーザーが AdSense でサイトを収益化する場合、WordPress サイトに AdSense 広告コードを配置するにはいくつかの方法があります。 WordPress サイトを紐づける AdSense を初めてお使いになる場合は、まず、お客様のサイトを AdSense に紐づけていただきます。その際には、Google の WordPress 用 Site Kitを使用することを強くおすすめします。Site Kit を使用すると、WordPress サイトを AdSense アカウントに紐づけ、AdSense コードをすべてのページに自動で配置できます。そのため、サイト全体に自動で広告を表示できます。 Site Kit とは Site K
Demo ? jQuery Feeds 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 クロスドメインのRSSもサポートしていて、サーバサイドスクリプトは一切不要。 複数のRSSを時系列にサクッとまとめて表示したい場合に便利そうです 次のようにJSONでURLを定義してあげればまとめて表示してくれるみたい 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 おしゃれで軽量なシェアボタンを実装できるjQueryプラグイン Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 フラットデザインがクールなカレンダー実装jQueryプラグイン「kalendar」 ダイナミックなタイル状レイアウトを実現できるjQueryプラグ
div要素の背景画像としてSVGを使用します。 SVGMagicの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="SVGMagic.min.js"></script> </head> SVG画像をPNG画像に変換するのには、PHPを使用しています。 converter.php(ダウンロードファイル一式に含まれています) SVGMagic.min.js内では、配布元のサーバーのファイルを参照してい
divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
2013年12月17日 Photoshop, 便利ツール デザイナーにはかかせないツール、Adobe Photoshop。Creative Cloudになってどんどん便利になってきましたね!そんなPhotoshopをさらに使いやすくしてくれる無料プラグインが多数配布されています。私はPhotoshop CC ver. 14を使用しており、そのバージョンで使えるプラグインを中心に紹介していきます! ↑私が10年以上利用している会計ソフト! Photoshopプラグインの使い方 最新版のAdobe Extension Managerをダウンロード&インストール ダウンロードしたPhotoshopプラグイン(.zxpファイル)をダブルクリック 自動的にAdobe Extension Managerが起動するので、そのままプラグインをインストール。自動的に起動しない場合はAdobe Extensi
stickUp - a free jQuery Plugin スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 最初からposition:fixedではなく、一定以上スクロールした段階でfixedにしてくれるプラグインです。 シームレスにナビが固定されるあたりがクールだったりしますが、これを簡単に実装できます。 関連エントリ レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 クールな円形ナビゲーションを作るチュートリアル
こんにちわ段田です。 今回もWordPressプラグインにスポットをあてたいと思います。 今回は管理画面の投稿画面で役立つプラグインをテーマに紹介します。 1.Parent Category Togglerプラグイン 通常、投稿画面ではカテゴリ項目で子のカテゴリにチェックした場合、画像のように親のカテゴリには自動的にチェックが入りません。 Parent Category Togglerプラグインは自動で親のカテゴリにチェックしてくれます。プラグインインストール後、子カテゴリにチェックすると、自動的に親のカテゴリにもチェックを入れてくれます。 便利! Parent Category Toggler 2.Save Editor Scroll Positionプラグイン 投稿を保存した時、エディタのスクロールは一番上に移動してしまいます。このスクロールの位置をそのまま動かさないようにするプラグイ
Reference To install include jquery.sticky-kit.js after including jQuery. Usage: $("#sticky_item").stick_in_parent(); // or $("#sticky_item").stick_in_parent(options); You can pass a hash of options to configure how Sticky Kit works. The following options are accepted, each one is optional: parent — The element will be the parent of the sticky item. The dimensions of the parent control when the st
Simple Example Given this html: <div class="container"><img src="myawesomeimage" /></div> Do this: $('.container').imagefill(); // image stretches to fill container Grid Example Given a grid like this: <div class="grid-whole"> <div class="grid-quarter"> <img src="myawesomeimage.jpg"> </div> <div class="grid-quarter"> <img src="myawesomeimage.jpg"> </div> <div class="grid-quarter"> <img src="myawes
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く