Photoshopの技術向上のために試したい最新チュートリアルまとめ「25 New Photoshop Tutorials to Learn Exciting Photoshop Skills」 デザイン制作のさまざまな場面で活躍するPhotoshop。非常に便利なツールですが、多彩な機能を使いこなせないでいる方も多いのではないでしょうか？そんな中今回紹介するのは、Photoshopの技術向上のために試したい最新チュートリアルまとめ「25 New Photoshop Tutorials to Learn Exciting Photoshop Skills」です。 Photoshop tutorial: Create a retro photo collage illustration in Photoshop – Digital Arts Photoshopの技術を高めると共に、ハイクオリ

お馴染みの freepik.com 提供によるベクター素材をコリス限定で全員にプレゼント！ もちろん個人でも商用でも無料で利用できます。 今回は、テキストを自由に変更できるレトロ風にデザインされたロゴやバッジの高品質なベクター素材です！ freepik.comはウェブやグラフィックデザイナーのためのベクターやイラストやPSD素材の検索エンジンで、日本語環境でももちろん利用できます。アイコンに特化したflaticon.comも運営しており、こちらには現在67,000個以上のアイコンが無料で利用できます。 freepik.comでアイコンの検索する時は、下記のページからが便利です。 freepik.comでアイコンを探す またfreepik.comは、そのブログだけのオリジナルの素材を配布するコラボをしています。日本ではコリスが初！今回でいよいよ第17弾となりました！ 第1弾〜16弾まではこち

ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示するスクリプトを紹介します。 SVGとPNGが混在しているページでも無問題、SVGはベクターなのでそのまま拡大、PNGはそのサイズ用の画像ファイルを表示する賢い仕様になっています。 Rimg -GitHub Rimgの特徴 Rimgのデモ Rimgの使い方 Rimgの特徴 100%フロントエンドのコード（バックエンドは一切無し）。 単独で利用できるスクリプト、jQueryなどは必要ありません。 しかも、超軽量（6.0KB）。 UA判定やクッキーなど、環境に依存して判定するものは使用していません。 画像や背景画像をレスポンシブ対応にし、最適な画像を表示します（Retinaディスプレイ、リサイズ対応）。 スクロールして画像が表示されたらロードするLazy Loadに対応。 ス

制作の効率が劇的にアップする『Avocode』の正式版が、1/29にリリースされました！ Avocodeは簡単に言うと、PSDのプレビューや書き出しをPhotoshop無しで行うもので、書き出しは画像だけでなく、SVGやCSSにも対応しています。画像のスライスやスタイルシートのコーディング作業がググッと楽になるWin/Mac/Linux対応のアプリです。 正式版で、特に大きく変わったのがデザイナー用簡単GitHub。これは無料で単体利用できる機能で、PSDファイルの共有やリビジョン管理が非常に簡単にできます。 ベータ版の時から、そして正式版がリリースされてからみっちりと試したので、Avocodeの使い方や登録方法を紹介します。 Avocode Avocodeには無料と有料のプランがあり、有料プランの優待コードがコリスのビジター限定でもれなく使用できます。無料プランだけを使ってもよし、有料プ

落ち着いたデザインにもあうシックなグラデーション、繊細な幾何学柄を使ったパターン、コピーやロゴを鮮やかに見せる背景など、アイデア満載ときめくようなデザインテクニックを使って作成されたものから定番ものまで、無料の背景素材を紹介します。

TOP  >  Photoshop  >  ハイクオリティなイメージをフリーで 最新のモックアップPSDまとめ「New Free Photoshop PSD Mockups for Designers」 制作したデザインが実際にデバイスやツールに当てはまるとどんな雰囲気になるのか、デザイナーとしてはとても気になるところだと思います。今回はそんな時に活用したい、最新のモックアップPSDまとめ「New Free Photoshop PSD Mockups for Designers」を紹介します。 Dribbble – FREE Photorealistic iPhone 6 Plus PSD Mockup Templates by Tran Mau Tri Tam ハイクオリティなイメージをフリーでダウンロードできるページが紹介されています。気になったものをピックアップしましたので、下記より

TOP  >  Design  >  webデザイナーならチェックしておきたいフリー素材がピックアップされた「50 incredible freebies for web designers」 日々、次々と新しい素材がアップされており、膨大な数の中からどれを選ぼうか迷ってしまうこともあるのではないでしょうか？そんな中今回紹介するのは、webデザイナーならチェックしておきたいフリー素材がピックアップされた「50 incredible freebies for web designers」です。 CSS3/jQuery Panel いろいろな種類のフリー素材が紹介されており、どれも使ってみたくなるクオリティの高いものばかりが揃っています。 詳しくは以下 Flat Text – icon sets フラットテイストのアイコンセット。シンプルかつミニマルなデザインなので、さまざまな種類のサイトで使

TOP  >  Font  >  ボールド系・見た目に印象的なフリーフォントが揃った「40 Free Beefy And Bold Fonts You Should Grab」 フォントは太さや全体のバランスによって、見た目の印象やインパクトがかなり変わってくるもの。目を引きたい、デザインを強調したい時には太めのフォントが有効です。今回はそんな時に使用したい、ボールド系・見た目に印象的なフリーフォントが揃った「40 Free Beefy And Bold Fonts You Should Grab」を紹介したいと思います。 Sail Font · 1001 Fonts 比較的太さがあったり、しっかりとした形をしているなど、デザインを力強く演出してくれそうなフォントが紹介されています。 詳しくは以下 Blogger Sans Font Family · 1001 Fonts しっかりとしたバ

常に最新のデザインが登場し続けるアイコン。定番素材としていろいろな種類をストックされているという方も多いのではないでしょうか？そんな中今回紹介するのは、ラインとカラーで構成された個性派アイコンセット「Swifticons」です。 フラットデザインにマッチするシンプルな形状ながらも、デザイン性のある質感が魅力的なアイコンセットとなっています。 詳しくは以下 種類としては、ビジネスツールやブラウザ、SNSアイコンといった定番から、ドリンクやフルーツなどのフード系、グラフやマネーなどのファイナンス系、カメラやビデオなどの撮影系、太鼓やピアノといった楽器シリーズなど、96種の中にさまざまなテーマが存在しています。ブラックのラインのみ、グレーで塗りが入ったもの、フルカラーといった3パターンが用意されているので、デザインに合わせて使い分けることができそうです。 フルラインナップは有償でのダウンロード、

ペロっとかぶさっているようなかわいいデザインのラベルを画像無し、CSSで実装したテクニックを紹介します。 カード状のコンテンツにも画像に使っても面白そうです。 Label Overlay 実装は、こんな感じ。 HTML ラベルは画像無し、spanを2つ使用して実装しています。 <div class="product"> <div class="product-image"> <span class="onsale-section"><span class="onsale">ラベル</span></span> </div> </div> CSS spanの:before, :afterを使用して、かわいいラベルをスタイルします。 .product { width: 300px; font-family: sans-serif; margin: 2%; } .product-image { b

デザインが楽しくなるような素晴らしい無料の新作フォントを紹介します。 今月は、シンプルで美しいフォントから、かわいいフォント、かっこいいフォント、スクリプト系のフォントなど良フォントが豊作です！

TOP  >  Photoshop  >  Photoshopで作り出すパターンチュートリアルまとめ「A Compilation Of Pattern Tutorials For Photoshop」 デザイン素材の中でも、比較的使用頻度の高いパターン素材。既存のものを手軽に使用するのも良いですが、時にはオリジナル性を高めるために自身で作りたいというシーンもあるのではないでしょうか？今回はそんな時に参考にしたい、Photoshopで作り出すパターンチュートリアルまとめ「A Compilation Of Pattern Tutorials For Photoshop」を紹介したいと思います。 How to Create an Abstract Low-Poly Pattern in Adobe Photoshop and Illustrator – Tuts+ Design & Illust

demo: pie menu アイコンをクリック（タップ）すると、バウンドしながらパイ状に広がります。省スペース用のシェアボタンとかにしてもよさそうです。 wheelnav.jsの使い方 Step 1: 外部ファイル 当スクリプトとRaphaël.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="js/required/raphael.min.js"></script> <script type="text/javascript" src="js/required/raphael.icons.js"></script> <script type="text/javascript" src="js/dist/wheelnav.js"></script> </head> Step 2: HTML ナビゲーションを

さりげなく美しい質感を加えたい、かわいすぎないかわいいデザインにしたい、といった時によさそうなシンプルなピクセルを使ったPhotoshop用のパターン素材を紹介します。

デザイナーやクリエイターの必需品とも言えるPhotoshopが、2015年2月19日に生誕25周年を迎えました。 パチパチパチパチ！ そんなPhotoshopの原点とも言えるバージョン1.0の動画を紹介します。

TOP  >  Design  >  デザインにハイクオリティさを手軽にプラス フリーUIキット集「THE BEST FREE UI KITS, FEBRUARY 2015」 思い通りのwebサイトやスマートフォンサイトをデザインするためには、時間やコストはもちろん、高いデザイン技術が要求されます。しかし時には、なかなかすべての条件がマッチしないことも。今回はそんな時に是非参考にしたい、フリーUIキット集「THE BEST FREE UI KITS, FEBRUARY 2015」を紹介したいと思います。 55+ Elements FREE UI KIT | Clean white [DOWNLOAD] on Behance デザイン性の高いフリーで使用できるUIキットが多数紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 eShop – Ui

iOS, Windows Phone, BlackBerryなど、スマホに最適化されたビジネス用のシンプルなデザインのアイコン素材を紹介します。 フォーマットはすぐ使う用から、Photoshop, Illustrator, Sketch用まで各種揃っているので、非常に便利です。

イラストレーターを使ったグラフィックチュートリアルまとめ「Illustrator Tutorials: 25 New Tutorials for Improve Your Design Skills」 さまざまなデザインシーンで活躍するソフト・イラストレーター。デザイナーの方はほぼ毎日といって良い程使用しているのではないでしょうか？しかし、豊富な機能性ゆえに効果的に使いこなせていない機能もたくさんあるはず。そんな中今回は、イラストレーターをデザインシーンでより実用的に使いこなすためのグラフィックチュートリアルまとめ「Illustrator Tutorials: 25 New Tutorials for Improve Your Design Skills」を紹介したいと思います。 How to Create a Coding Page Illustration in Adobe Illus

昨日、Twitter(@colisscom)でお伝えしたもう一つのプレゼント、高品質なイラストのベクター素材をコリス限定で全員にプレゼントします！ 今回は、ビジネスをテーマにしたアイコン。 レトロな色使いがかわいく、各イラストは非常に丁寧にデザインされています。 Free Vectors ビジネスからホビーまで、アイコンからイラストまで、多彩なベクター素材が揃っています。ベクター素材を探す用にブックマークしておくのがオススメです！ 今回ダウンロードできるアイコン素材のフォーマットは、Illustrator用とPhotoshop用のベクターを完備。 Photoshopで開いたキャプチャ .ai .eps .psd .png（プレビュー用） 素材の利用にあたっては個人でも商用でも無料、ウェブでも紙でも利用してください、とのことです。素材の再配布や販売は禁止です。 TwitterやFaceboo

さっき思いついたアイデアなんだっけ？メモしとけば、、ということはありませんか。 デスクトップでもスマホからでも簡単に作成・編集・閲覧ができる、プロトタイプのモックアップを簡単に作成できるオンラインサービスを紹介します。 基本機能は無料で利用でき、有料だと更に便利機能が利用できます。 下の方に、有料プランが無料で利用できるコリス限定クーポンがあります（先着50名様）。 ※14時すぎにクーポン、50名様分終了しました。 ※15時30分、おかわりクーポンを発行しました。 ※おかわり分も終了しました。 ※3/31までに登録された方にはクーポンが発行されると思うので、そちらをご利用ください。 PLOGLESSで画面遷移を伴うアプリのプロトタイプを作成するのに専用アプリやコーディングの知識は不要、手書きのラフがあれば5分で簡単に作成できてしまいます。 画面遷移を伴うアプリのプロトタイプが簡単に作成でき