Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ | Stocker.jp / diary
Webデザイン Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ Thursday, September 27th, 2018 Webデザイン制作で使用するアプリは多様化しており、これからWeb制作をはじめたい方にはどれを選べば良いか分かりにくいかもしれません。 それぞれのアプリケーションには一長一短あり、用途によってどのアプリケーションが適切かは変わります。 この記事では、Photoshop、Illustrator、XD、Sketchに絞り、それらのアプリケーションの特徴についてまとめています。 なお、この記事の内容は 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 という書籍のLesson 01の内容を一部抜粋し、この記事用にリライトしたものです。 Photoshop向きのデ
「いらすとや」はベジェで描いてる？1日10枚更新できる理由
無料イラスト素材サイト「いらすとや」が大人気です。 webサイトはもちろん、自治体のポスターやチラシなど街のあちらこちらでも見かけるようになりました。 人気の理由は使いやすさと品質の高さです。 さらに種類も豊富で今でも毎日10枚（！）ほど追加されています。 一体なぜここまでハイペースにイラストを描くことができるのでしょうか？ 今回は「いらすとやの中の人」ことみふねたかしさんの制作技術に迫っていきます。 Tweet 汎用性の高いすぐれたフォーマット みふねさんのイラストはとてもシンプルです。 シンプルですが特徴があり、知っている人が見れば「『いらすとや』だ！」とわかります。 こういった理由から数多くのファンアートも描かれています。 なかよし三人組のイラスト pic.twitter.com/AxVJOfX4NV — 村上 ヒサシ (@M_hisashi) 2016年9月29日 人数が減ってしま
Illustratorでのイマドキな画像書き出し方法【アセットの書き出し】
2016年12月7日 Illustrator 昔からIllustratorラブ！な私ですが、いつの間にやらWebデザインをする上での便利な機能が増えてきて、ますます嬉しい次第です。その中で今回は画像アセットを使った書き出し方法を紹介します。昔はスライスツールを使っていましたが、そんな面倒なことをしなくてもオブジェクトをドラッグ＆ドロップで簡単に書き出せちゃいますよ。 ↑私が10年以上利用している会計ソフト！ アセットの書き出しって何？ 2016年6月にアップデートされたIllustrator CCでは、従来のスライスとは違う、新感覚の画像書き出し方法である「アセットの書き出し」という機能が追加されました。オブジェクトをパネルにドラッグして追加すると、サイズや解像度、デバイスに合わせたフォーマットに書き出せます。Webやアプリ用のアイコンや、画面全体のデザインを行う上でも欠かせない、便利な機
君はもう体験したか！Adobe Illustrator CCでついに画像アセットができるようになったぞ！ | unitopi - ユニトピ -
こんにちは。ナガタです。 ナガタは非常に興奮しています。 それはタイトルの通り、「Adobe Illustrator CCでついに画像アセットができる」ようになったからにほかなりません。Photoshopが画像アセット対応してからというもの、スライス作業が楽になったこと楽になったこと。 画像アセット…Photoshopで標準機能とされる書き出し機能。レイヤーにxxx.png等つけることで一括で書き出すことが可能。詳しくはこちらの記事を参照ください。 データはフォトショですか？イラレですか？イラレは２倍料金ください。 画像アセットになれてからの日々、画像アセットができないイラレファイルでデザインが来るのを非常に嫌がっていました。懇意にしてくださる制作会社さんから「案件のお願いがあるんだけど〜」と言われた日には即「データフォトショですか？イラレですか？」と確認をし、イラレだった場合には非常に嫌
こんなやり方があったとは！IllustratorやSketchでWebデザインをはじめる前に必ず読んでおきたい -ベクターデータの教科書
最近のWebデザインに、ベクターデータの存在は欠かせないものになってきました。 アイコンやロゴなどをSVGで使用したり、Webページやアプリのデザイン・UI設計といった制作のワークフローをベクターで作業している人も増えてきました。 今までPhotoshopでデザインをしていた人には、IllustratorやSketchを使うとそんな事もできるのか！ と目からウロコかもしれません。 IllustratorのWebデザインならではの使い方、Sketchの詳しい使い方を知りたい、SVGの効果的な使い方をマスターしたい、そんなWeb制作者に絶対オススメの一冊を紹介します。 IllustratorやSketchで扱うベクターデータには、マルチデバイス対応のWebデザイン・実装にとって大きなメリットがたくさんあります。
illustratorでUIデザイン：設定編 - Two hats
Fireworksのヘビーユーザーだったので、ディスコンになってからUI作成のツールをどれにしたらいいかが悩みでした。 Fireworksの前はPhotoshopでデザインを行っていたのですが、Fireworksの効率良さに慣れてしまうとPhotoshopには戻りたくなくなりました。他に良いツールがないものか・・・と思いつつ、とりあえずまだ使えるのでFireworksを使っていました。 ですが、ディスコンになる以上別のツールを探さないといけないので、改めてPhotoshopとillustratorについて調べてみたところ、illustratorの設定を適切に行えばFireworksチックに操作できることがわかりました。 今回はillustratorでUIデザインカンプを作る際の設定について書こうと思います。Webデザインでもほぼ同じ設定で大丈夫ではないかと思っています。ちなみに自分のill
自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろ
2014年3月19日 Illustrator, Webサイト制作 これまでは「WebデザインといえばPhotoshop」というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします！今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 ↑私が10年以上利用している会計ソフト！ Illustrator初心者さんへ Illustratorはベクター形式の画像を作成できるAdobe社のアプリです。ロゴやイラストを作る時にはかかせません。Adobeの公式チュートリアルサイト、Adobe TVではIllustratorの概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustratorは
ダウンロードしておきたい！フリーのデザインフォントのまとめ -2014年2月
最近リリースされたものを中心に、高品質なフリーのデザインフォント・タイプフェイスを紹介します。 Glober 個人・商用利用無料。thin, boldの2書体。 ※現在プロモーション中で、全18書体が
Illustratorでスライスを作成する方法
イラレでスライスする方法について、自分なりの方法を紹介している記事です。 イラレでのスライス作業は、ファイヤーワークスやフォトショップに比べて面倒くさがる人が多いみたいなので書いてみます。 そもそもスライスとは ウェブ制作に使用する目的に限らず（SNS用の画像とか色々）、 作ったデザインや写真の一部分を切り抜いて任意の形式で保存できる状態にすることです。 それぞれのスライスの画像のタイトル、保存形式（jpg,png,gif…etc）、画質等々の設定も行えます。 まず、イラレでメニューをデザインする イラレで作ったメニュー。一般的なメニューですね。 色がすでに無理！！！って人が多そうですけど、気にしません。このボタンをスライスしたいと思います。 デザインしたナビゲーションをスライスする（オブジェクト→スライス→作成） メニューからスライスツールを選んでーってやり方もありますけど、今回紹介する
最適な画像書き出しの基本
はじめに こんにちは、クラスメソッド株式会社の野中です。 前回の『Webサイト高速化に必要な画像形式の基礎知識』から3回に渡って、画像の最適化に必要な知識とテクニックについて紹介しています。今回は前回の基礎知識を使い、一般的に利用頻度の高い画像タイプの最適な書き出し方法について紹介します。 対象者 この記事では、前回と同じくWebデザイナーを対象としています。 フロントエンドエンジニアの方は、Webデザイナーから受け取ったPSD（Adobe Photoshop Data）ファイルや、AI（Adobe Illustrator Data）ファイルから画像を書き出すこともあると思うので、その際の参考にしてください。 Webデザイナー フロントエンドエンジニア Webディレクター Web担当者 前回と同様にビギナーも含めた広い層に向けて解説しているので、当たり前と思われる説明も多く含まれます。また
最近話題になった「10個」のイケてるWebサービス・アプリ（2013年4月編）
こんにちは。 もうすぐ4月も終わりということで、 4月中に話題になったwebサービスやアプリを集めてみました。 nisshi（にっし） まずは、ソーシャル日誌サービスです。 特徴としておもしろいのが、「いいね！」や「コメント」のような、読者の反応を気にしなければいけない機能が「一切ついていないこと。誰かが自分の日誌をみると「read（既読機能）」となり、日誌が読まれたことがわかるシンプルなサービスです。 TABROOM（タブルーム） リクルートが運営する家具情報サイトです。 名称のTABROOMとは「Comfortable：快適な」と「Room：部屋」を足してつくった造語。各種家具の「カタログ」を、色、素材、サイズ別にデータ化し、手軽に検索できるようにしています。 iconbench（アイコンベンチ） PhotoshopやIllustratorなどの技術がなくても、自分好みのアイコンを簡単
イラレでWebデザインをされる方にお願いしたい7つのこと。
普段はDTPをメインにやっていて、たまにWebのデザインもするというデザイナーさんは、 IllustratorでWeb用のデザインカンプを作ることが多いと思います。 別にIllustratorからでもコーディングはできるのですが、後工程の人を困らせないために、 ちょっとだけ気に留めておいて欲しいことがあります。 １．色モードはRGBで。 普段DTPをやっているとついCMYKモードのままで作ってしまうことがあるかもしれません。 でもWebはRGBの世界です。変換すると意図した色にならなかったりしますので、 最初からRGBで作ってください。埋め込む画像も同じです。 ２．どこがデバイスフォントなのか分かるように指示を。 紙の世界では文字は文字でしかありませんが、Webの世界では「テキストデータ」にするのか 「画像」にするのか決めなければなりません。本文は原則「テキストデータ」ですが、 判断に困る
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog