デザインを開発するという視点でお伝えするクリエイティブBLOG
デザイナーにとってPhotoshopは写真加工に限らず、様々なシーンで活用出来る優れたツールです。多くの機能が備わっていますが、なかなか使いこなせない。といった苦手意識を持っている方も多いかもしれません。そんな中今回は、写真の合成からエフェクト効果までデザイン制作に役立つPhotoshopチュートリアルのまとめ「40 Best free Photoshop tutorials from 2018」の紹介です。
How to Create a High-Contrast Skateboard Flyer in Adobe Photoshop
40もの参考になるチュートリアルが紹介されたサイトです。気になった方はぜひチェックしてみてください。
詳しくは以下
WEBデザインならではのエフェクトは、私たちの目を楽しませてくれたり、あっと驚かせてくれたりします。今回ご紹介する「WebGL Distortion Hover Effects | Codrops」は、WEBの中でもよく目にするホバーアクションのエフェクト集になります。
歪みの効果を与え、滑らかに動くスタイリッシュなホバーアクションです。
詳しくは以下
写真は色や明るさの調性を行うだけでも雰囲気をガラッと変えることができます。処理を加えることで全く違った印象を与えることができるので、いくつか手軽に加工できるアイテムをストックしておきたいものです。そんな中今回は、どんな写真も簡単にレトロな印象に変えることのできる光素材「Retro Light Leaks Set」を紹介したいと思います。
色や表現の異なる光の素材がセットになったアイテムです。気になった方はチェックしてみてください。
詳しくは以下
毎日コーディングでさまざまなコードを書くデベロッパーにとって非常に便利なスニペット。知っているだけで作業効率が格段にアップするもの。そんな方におすすめできる「30 Seconds of CSS」をご紹介していきたいと思います。
先進的な知識を多く取り込むためにも、基礎的な業務内容をいかに短縮して行っていけるかは非常に重要なポイント。デベロッパーの方はぜひ下記よりチェックしてみてください。
詳しくは以下
モダンな雰囲気からスタイリッシュな雰囲気まで、幅広い演出をしてくれるハーフトーン。今まで画像としてWebサイトに取り込むことが多かったのではないでしょうか。今回ご紹介する「Pure CSS Halftone Effect」ではWebならではの動きを楽しむことができるエフェクトを通したハーフトーンになります。
美しい動きで視線を惹き付ける、ぜひ取り入れてみたいエフェクトとなっています。
詳しくは以下
Webデザインの中でもユーザーの目を簡単に引くことを可能にするエフェクト。動きがつくだけでサイト内がぱっと華やかになります。今や様々なエフェクトをつけることが可能ですが、ついついワンパターン化してしまいがち。そんな方におすすめできる、水のような動きに焦点をあてた「Liquid Distortion Effects」を今回はご紹介致します。
水のような動きは優雅さと洗練された雰囲気を与えてくれます。下記にデモをいくつかピックアップ致しましたので、ご覧ください。
詳しくは以下
Designdevelopでは「ディテールまでこだわって背景画像が作れるジェネレーター「Tiled backgrounds designer」/a>」や「商用可！パターン背景素材集「DINPATTERN」」など背景素材がダウンロードできるサイトをいくつか紹介してきましたが、今日紹介するのは個性的な背景素材を配布しているWEBサイト「Shizoo – einfach mal Design haben」です。
シンプルでキレイ目な背景画像も用意されていますが、どちらかと言うと、カラフルなストライプやイラストレーション、柄物などなど少し個性的な背景素材を手に入れる事ができます。全部で25種類の背景画像が収録されている内容の一部を下記に貼付けておきます。
詳しくは以下
写真やグラフィックだけでは与えられない、個性やインパクトを添えてくれるフォント。多くの形が存在していますが、今回は独創的な形状を持つフォントに焦点をあてた「20 Best Free Fonts on Behance」を紹介したいと思います。
BUFFALO – FREE SCRIPT FONT on Behance
手描きからクラシカル、ユニークな雰囲気など、独特さを兼ね備えたフォントデザインが20種類まとめられています。気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
LINEなどでお馴染みのチャットのユーザーインターフェイス。メールに代わるコミュニケーションツールとして台頭し、多くのサービスで取り入れられているチャット。今回ご紹介するのは、そんなチャットのユーザーインターフェイスを実現できる「BotUI」です。
動作のイメージや動きなどについては、BotUI – A JavaScript framework to build conversational UIs.
からご覧いただくことが可能です。
詳しくは以下
(さらに…)
デザイン制作をする際によく利用する写真は、自身で撮影したものだけではイメージ素材として足りないことも多く、ストックフォトサイトを活用する場合が多いと思います。今回はそんなストックフォトサイトをまとめた「Awesome Stock Images for FREE !! Even for Commercial use」を紹介したいと思います。
是非ブックマークしておきたい、フリーで利用できるストックフォトサイトがまとめられています。
詳しくは以下
デザインをする際に欠かせない素材の一つにもなっているフォント。使い勝手の良いシンプルなタイプ、フォントだけで個性を演出できるものなどいろいろなタイプが存在していますが、今回はデザイン性の高い最新のフリーフォント集「New Free Fonts for 2016」を紹介したいと思います。
デザインに使用するだけで、クオリティを高めることができるフォントが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインにアナログの質感を感じさせるために、手書きの文字を利用することも多いと思いますが、フォントで対応することで、デザイン制作時間を大幅に短縮させられるかもしれません。そんな中今回紹介するのが、表現力がアップする手書きフォントをまとめた「25 Best Hand Written Fonts」です。
CRAPTACULAR font | UrbanFonts.com
リアルな手書き感が表現できるフォントばかりが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
Photoshopでさまざまなグラフィック表現ができるブラシ。フリーでダウンロードできるものも多数あり、活用されている方も多いのではないでしょうか？そんな中今回紹介するのは、輝く光の動きが表現できるフリーPhotoshopブラシをまとめた「13 Free Photoshop Brush Packs For Complex Fractals」です。
Abstract Brush Pack Vol. 11 – Fractal Photoshop Brushes | BrushLovers.com
暗闇に走る鋭い・柔らかい・幻想的な光表現を簡単に実現できるブラシが紹介されています。気になったものをピックアップしましたので、下記より御覧ください。
詳しくは以下
写真加工をする際に使用するPhotoshop。非常にいろいろな機能が搭載されていますが、より使いやすい仕様にカスタマイズするためにプラグインを取り入れている方も多いのではないでしょうか？今回はそんな時に参考にしたい「9 Free Amazing Photoshop Plugins For Designers」を紹介したいと思います。
Photoshopの機能性を今よりもっと高められるプラグインが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
一般的なサイトを制作するよりもPHPや独自タグなど様々な知識が必要となるWordpressテーマの制作。普段から利用している方であればそこまで難しくない事かもしれませんが、HTMLタグの範疇からまだ出ていない技術者にとっては敷居が高いと作業だと思います。今日紹介するのはブラウザで確認しながらベーステーマが制作できるWPテーマジェネレーター「Wordpress Theme Generator」です。
上記のようなWPで完成されたサイトを見ながら右のメニューでカスタマイズする事が可能です。
詳しくは以下
フリーで配布されているUIテンプレートを利用することで、デザインの質を手軽にアップさせられると同時に、制作時間の短縮・コストカットにも繋げることができます。今回はそんなシーンで参考にしたい、洗練されたデザインテイストが魅力的なフリーUIキットまとめ「A Roundup of Free & Beautifully Designed UI Kits」を紹介したいと思います。
55+ Elements FREE UI KIT | Clean white [DOWNLOAD] on Behance
非常にデザイン性の高い、いろいろな種類のパーツが揃ったUIキットが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
