『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
![新着記事](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e49774350f458feee21e23066becd6e489d6924/height=288;version=1;width=512/https%3A%2F%2Ff1zxujx2.user.webaccel.jp%2Fwp-content%2Fuploads%2F2014%2F06%2Fdesktop-office.jpg)
CCの魅力を感じつつもCS6製品で様子を見ている、月額支払いがちょっと怖い。そんな九州ライター村上です、みなさんこんにちは。 今人気のフラットデザインはIllustratorが得意とする部分なので、最近Illustratorを使ってWebサイトを作ろうという動きが増えてきました。Illustrator使いとしては非常に嬉しい事です。しかし、DTPを得意とするIllustratorでWebサイトを作る際には、確認しておかなくてはいけないWeb用のポイントがあります。 今回は、初心者向けのちょっとした用語の説明と共に、Web用コンテンツ作成時に気をつけるべきIllustratorの設定をご紹介していきます。 IllustratorでWeb作業をする時に気をつけたい5つの設定 単位は相対単位のピクセルにする カラーモードはRGBにする ピクセルプレビューで作業する 各パーツはアートボードをわけて
作成:2013/10/21 更新:2014/11/01 無料素材 > フリー素材は沢山あるけれど、どこに何があるか分かりにくい。ロゴやイラストを作るのにまたあのサイトを探さないといけない。そういったことで1回まとめました。今回厳選したつもりですが、それでも量が膨大になったので簡潔にリストアップしてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フリー素材まとめ ダウンロードしておきたいフリー素材一覧 Illustrator のチュートリアル 小技 基本テクニック フリー素材まとめ ダウンロードしておきたいフリー素材一覧 ロゴやイラストを作ったりするときに役に立ちそうなアイコン、ベクター、背景、テクスチャ素材をまとめました。少し変わったモノが多いですが、筆者が何度もアクセスしてしまうブクマ一覧です。 学校や教育関係/アイテム全200種類のアイコン素材 -
今やっている仕事で、Illustratorで作成したカンプを私がコーディングすることになったのですが、いただいたデータがもの凄くきちんと作ってあって、大変参考になったので、設定項目だけメモしておきます。 Illustratorはもともと、印刷用データの作成が目的だったソフトなので、Web用の画像も、ちゃんと作れるのですが、設定を気をつけておかないと、いざ書き出してみると、線がにじんだり、大きさが意図したものにならなかったりします。 Photoshopだと、もともとベクターグラフィック用のソフトなので、そういうことは無いのですけどね。 気をつけている項目は以下の通り。 単位をpx(ピクセルに揃える) とにかくWebの世界の単位はピクセルです! センチメートルとかは使えないです! 印刷用データの仕事が同時にあったりすると、設定をその都度変えなくちゃいけないので、ちょっと面倒ですね。 1pxのガ
2013年11月28日 Illustrator 海外サイトでよく見るPhotoshopやIllustratorのチュートリアル記事って、見ていていろんな発見があります。自分が思っていたよりはるかに楽な方法や、知らないテクニックを教わったり。でも、日本語のサイトでそんなチュートリアルをあまり見かけないので、Illustratorでイラストを描いたのを記事にしてみました。動画も撮っておいたのであわせて見てみてください! ↑私が10年以上利用している会計ソフト! 動画撮ってみました 個人的に、他の人が作っていく過程を見るのが好きなので撮ってみました。ベジェ曲線での描き方など、参考になるかもしれません。一部撮り忘れたところもありますが気にしないでください。 まずは準備 ラフ画の取り込み ラフ画は別レイヤーにフリーハンドで描く事も多いのですが、今回は紙に描いたものを使いました。通常スキャナーなどで取
Illustrator を使い始めるにあたっての、予備知識や基本操作をまとめてみました。Illustrator って簡単ではないと思うんですけど、Webデザイナーなら使いこなしたいソフトウェアのひとつですよね。これからWebデザインで Illustrator を使ってみようという人が、少しでも Illustrator に親しんでくれればいいなーと思って書きました。 私はいつも Web制作の時には、Photoshop と Illustrator を使っています。ずっと前、Webデザインを勉強しはじめた頃、私は Illustrator より先に、まず Photoshop から使い始めました。そしてそのあと初めて Illustrator に触ったとき、Photoshop よりもとっても難しく感じて、基本操作もなかなか覚えられなかった想い出があります。 もちろん ベジェ曲線 や パス など、Ill
2017年の追記(CC2017向け) 次の点に留意して作業すればOK。基本的にイラレのピクセル周りの扱いはモリモリ改善されているのでだいぶ楽になった。 次セクション「2016年の追記」との違いだけを列挙する。 変形パネルの「ピクセルグリッドに整合」と「新規オブジェクトをピクセルグリッドに整合」が廃止され、あらたに「コントロール」バーの一番右に「ピクセルのスナップオプション」が追加された。これをオンにする。またその中の詳細項目にも全部チェックをつけておく。 それでも作業中に何かのはずみであるオブジェクトが整数ピクセルじゃない状態になったら、「ピクセルのスナップオプション」の隣にある「選択したアートをピクセルグリッドに整合」ボタンをポチして位置調整する。私は今までコントロールバーは邪魔なので非表示にしていたが今はこのボタンのためだけに表示している(スクリプトでなんとかなりそうな気もするが調べて
Web制作の現場では、ドキュメントグリッドの単位を「ピクセル」に統一するのがセオリー。しかし、紙のデザインに慣れているとピクセルを意識せず、自由にオブジェクトを作成し、配置してしまう。そのままAdobe FlashやAdobe Dreamweaverで開くとエッジ部分が不鮮明になり、データを作り直した経験のある人も多いだろう。ピクセルグリッドはピクセルプレビューモードで600%以上拡大しないと表示されないこともあり、常時視認しながら作業することが難しいこともトラブルの要因のひとつと言える。 Adobe Illustrator CS5では、「ピクセル整合」機能が搭載され、ラスタライズ出力する際に鮮明なパスを生成できるようになった。新規ドキュメントを作成する際に「Webドキュメントプロファイル」を選択した場合は、デフォルトで「新規オブジェクトをピクセルグリッドに統合」にチェックが入っている。も
HTML5ではビットマップ画像を手軽に扱える「Canvas」が話題ですが、「SVG」も画像関連で注目したい新技術です。HTML5ではInline SVG(インラインSVG)がサポートされ、HTML内にSVGを直接記述できるようになるのです。 今回のJavaScriptラボは、Firefox 4、Google Chrome 7、Internet Explorer 9を対象に、インラインSVGの使い方とJavaScriptによる制御方法について解説します。全部で3回に分けて、最終的には簡単なシューティングゲームを作成します。 SVGとは? SVG(Scalable Vector Graphics)は、名前のとおりベクター形式の画像フォーマットです。ベクター形式とは、点と点で結ばれた線で図形を表す方法で、アプリケーションでいえばIllustratorがベクター形式を採用しています(Photosh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く