TOP  >  オンラインツール

Tag : オンラインツール

2018年06月30日

WebデザインをオンラインでサポートしてくれるCSS作成オンラインツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」

Webデザインを構築するのに欠かせないCSS。基礎からアニメーションなどの特殊な効果まで、様々なことが行なえます。今回ご紹介するのは、そんなCSS構築の作業を手助けしてくれる、便利なWebツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」です。

40-free-web-based-tools
Palettes | Flat UI Colors 280 handpicked colors ready for COPY & PASTE

オンライン上で手軽に様々な効果や設定を試し、導入することができるツールが40種類紹介されています。その中から幾つかおすすめのツールをピックアップしましたのでご覧ください。

詳しくは以下

40-free-web-based-tools3
Clippy — CSS clip-path maker
Clippyは画像を切り抜くフレームの形を自由に調整することができるWebツールです。星や丸などベースとなる図形を27種類の中から選ぶことが出来、自由に編集できます。
 
 
 
40-free-web-based-tools1
CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for your designs
トレンドのグラデーションをCSSで表現できるWebツールです。背景にグラデーションを使いたいときなど、大きい面積でグラデーションを取り入れたいときに。
 
 
 
40-free-web-based-tools2
Trianglify.io · Low Poly Pattern Generator
流行のポリゴングラフィックをCSSで表現するためのツールです。目の細かさや角度、色味などをカスタマイズでき自由度も高いです。
 
 
最適なツールを利用することで、クオリティの高いコーディングを短時間で完結することができます。サイトには他にも活用する機会の多いWebツールが多数紹介されていますので、興味をお持ちになられた方は是非下記リンク先よりご覧になってみてください。

40 Free Web-Based Tools & Apps for Working With CSS

続きを読む
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2011年10月05日

ログインフォームをクリエイティブに演出できるpsdデザイン集「15 Creative Free Login Form with PSD」

ユーザーが自分のページにログインするための玄関・ログインフォーム。シンプルになりがちですが、時にはデザインにもこだわりたいもの。そこで今回紹介するのが、デザイン性の高いログインフォーム素材を集めた「15 Creative Free Login Form with PSD」です。

ログインフォームにクリエイティブ性を持たせた、使いやすいデザイン素材が豊富に紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2009年12月24日

photoshopチュートリアル100選「The 100 Most Popular Photoshop Tutorials 2009」

制作の現場には欠かせないアプリケーションの一つphotoshopですが、今回紹介するのは2009年に公開されたphotoshopのチュートリアルを集めたエントリー「The 100 Most Popular Photoshop Tutorials 2009」です。

psdtutrial01
Computer Arts – Create frozen liquid effects

幻想的な世界観を作るものから、現実のものをより面白く見せるテクニックなどなど様々なphotoshopでのチュートリアルが公開されています。様々なチュートリアルが公開されていますが、いくつかきになったものを下記に紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:40  |  
Category: Design , Photoshop   
2010年05月03日

ロゴデザインのためのデザインチュートリアル&インスピレーション「45+ Beautiful Logo Design Tutorials and Resources for Designers」

デザインの中でも難しい物の一つロゴデザイン。企業や団体のアイデンティティを持たせながらデザインをするという見た目の割に非常に複雑なデザイン。今日紹介するのはロゴデザインをするときに役立つチュートリアルやインスピレーションを得られるサイトをまとめたエントリー「45+ Beautiful Logo Design Tutorials and Resources for Designers」を紹介したいと思います。

mynitelife
Logo Design Project Step By Step Walkthrough

表現から発想の部分まで様々な領域のデザインに役立つ事がまとめられえていました。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:35  |  
Category: Design   
2015年07月30日

デザイン参考事例集としておすすめ さまざまなテーマ別UIを集めた「Calltoidea」

webサイトをデザインする際には、すでに公開されているさまざまな種類のサイトを参考にすることが多いと思いますが、膨大な数のサイトから目的に合ったデザインを探すのはなかなか大変なもの。またある特定部分のデザインだけがほしいという場合もあるのではないでしょうか?そんな中今回紹介するのは、さまざまなテーマ別UIを集めた「Calltoidea」です。

callidea

大きく1つずつのwebサイトというくくりではなく、タブやフッター、ログインなど、参考にしたい場所をカテゴリ別に探すことができる嬉しい事例集となっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 01:46  |  
Category: Design   
2015年12月03日

フリーで使用できる HTML&PSDテンプレートまとめ「20 Fresh and Free HTML and PSD Templates plus GUI Packs December 2015」

テンプレートを使用することで、デザインのクオリティを一気に高めることができると共に、コスト面の削減、制作スピードのアップにもつながります。そんな中今回紹介するのは、フリーで使用できるHTML&PSDテンプレートまとめ「20 Fresh and Free HTML and PSD Templates plus GUI Packs December 2015」です。

template1204_1
Aisha-HTML5 Responsive Template | ShapeBootstrap

最新のデザイン性が活かされた、高いデザイン性のあるテンプレートがまとめられています。気になったものをピックアップしましたので下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:31  |  
Category: Design   
2015年10月12日

デザイン性の高いUIデザインを100日紹介するサイト「100 Days UI」

デザインベースを作り上げるのに必要なUI設計。またその先の設計に基づいたデザイン性のあるクリエイティブも重要となってきます。今回はそんなシーンで参考にしたい、デザイン性の高いUIデザインを100日紹介するサイト「100 Days UI」を紹介したいと思います。

dailyui

いろいろな種類のデザインUIがピックアップされリストギャラリーとなり紹介されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2009年07月21日

ペインティングを実現するphotoshopブラシ集「300+ Excellent Photoshop Brushes for Creating Painted Effects」

photoshopには様々なブラシがリリースされており、ブラシ次第でその表現の幅はかなり広がります。今日紹介するphotoshopブラシ集300+ Excellent Photoshop Brushes for Creating Painted Effects」は絵の具やペンキで描いたような表現を可能にしてくれるブラシセットを集めたエントリーです。

painted_brushes_01
WaterColor Reloaded – 83 brushes

様々な種類のブラシセットがあつめられていますが、今日はその中からいくつか気になったものいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:37  |  
Category: Design , Photoshop   
2008年12月10日

クオリティの高いアイコンセットを集めた「22 (New) Free High Quality Icons Sets」

グラフィカルインターフェイスには欠かせないアイコン。普段見慣れたデスクトップもアイコンの設定次第で大きく様変わりします。今日紹介するのはクオリティの高い、アイコンセットを集めたエントリー「22 (New) Free High Quality Icons Sets」を紹介したいと思います。


Web 2.0 Origami Icons

アプリケーションアイコンから、テーマのあるアイコンまで、様々なアイコンが集められ紹介されています。今日はその中から特に気になったアイコンをいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:06  |  
Category: Design   
tag: Design
2010年04月04日

ハイクオリティなphotoshopグラデーションスタイル「25 High Quality Gradient Sets for Photoshop – 750+ Gradients」

デザインに置いて、立体感や深みを出すためにphotoshop上でグラデーション表現をつけるということは多くありますが、きれいなグラデーションを作ることは意外と手間だったりします。そんなときに便利なのが、photoshopグラデーションスタイル。様々なグラデーション表現がワンクリックで表現できるというものです。今日紹介するのはハイクオリティなphotoshopグラデーションスタイルを集めたエントリー「25 High Quality Gradient Sets for Photoshop – 750+ Gradients」です。

modern_photo_01
Modern

様々なテイストのグラデーションスタイルセットが集められていますが、今日はその中から気になったものをいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 01:01  |  
Category: Design , Photoshop   
tag: 
2010年06月30日

商用可!シンプルで汚れ過ぎていないグランジテクスチャ20「20 Simple & Subtle Grunge Textures」

デザインに質感を与えてくれるテクスチャ。紙のデザインでも、WEBのデザインでもうまく利用すれば、今のデザインをもうワンランク高めてくれる、非常に画期的な素材です。今回紹介するのはシンプルで、激しくない適度なグランジのテクスチャセット「20 Simple & Subtle Grunge Textures」です。

4

セットになっているテクスチャの一部を下記にご紹介致します。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:48  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る