活動報告!Webデザインの職業訓練校を卒業してからの3年間
意外と知らない?IllustratorやPhotoshopを簡単にPDF化する方法:無料ソフト「CubePDF」を使おう!
最近、学校の授業でポートフォリオ作っておりまして「PDFで出力したいけど、やり方がわからない」とよく耳にするので、手順を書いておこうと思います。
ポートフォリオはIllustratorで作っている人が大多数ですが、今回ご紹介する方法はOfficeSoftのEXCELやWORDなどで作ったものでもPDF化できます。
プリンターを選ぶようにPDF化ソフトを選べるようになるので、印刷画面を出せるところなら何でもPDFに出力できます!
意外と知らない?
IllustratorやPhotoshopを簡単にPDF化する方法
今回ご紹介するのは「CubePDF」という無料のソフトです。
CubePDFは、Windowsの印刷機能を利用した「仮想プリンタドライバ」形式のPDF変換ソフトです。
使い方はとてもシンプルで簡単です。それぞれのアプリケーションで印刷ボタンを押す際に、CubePDFプリンタを選択することによって実際に紙へ印刷する代わりにPDFファイルを作成することができます。
「 百聞は一見にしかず」早速、使い方を見ていきましょう!
続きを読む【Illustrator】日章旗のような放射線状オブジェクトをつくる方法。ネットショップバナーを作ろう!
先日『THE ネットショッピングサイト!』みたいなバナーを作って一人で遊んでいました。
その時に、「あれ?放射線状のオブジェクトどうやって作るんだっけ?」となったので、自分のメモ書きも兼ねて作り方をまとめてみることにしました!
放射状オブジェクトをマスターすれば、
ネットショッピングバナーが簡単にできる!
で、そんなこんなで完成したバナーがこんな感じです。
↓ ↓ ↓
学校にいる時に作ったので、フォントは既存のものだし、遊びだからちょっとお手軽感あるけど…まぁ、ネットショップのバナーってこんな雰囲気ですよね?
- 『 赤・黄色系の太文字 × 黒い縁 × ゴシック体 』という感じの主張が強い書体
- お祝いみたいな明るい装飾(紙ふぶき、キラキラ、クラッカーとか)
- 「ババーン」とインパクト感がある、広がりをイメージした背景 ←今回作るのはコレです!
という訳で、放射状のオブジェクトを作ってみましょう!
放射線状オブジェクトの作り方
1.ツールバーから楕円形ツールを選択する
長方形ツールを長押しすると、後ろに隠れている楕円形ツールがクリックできるようになります。
2.塗りナシ・線アリの円を書く
今回は「 幅100px × 高さ100px 」の正円にしました。
one point advice
正円(全方向が同じ直径の円)を書く時は、楕円形ツールを選択した後に「Shiftキー」を押しながらマウスをドラッグすると簡単に書くことができます。
3.線幅を設定する
今回は「 線幅 100px 」にします。
4.破線を設定する
今回は「線分 10px・間隔10px」にします。
線パネルの出し方: ウィンドウタブ → 線
[ 破線 ]にチェックを入れて、線分・間隔をそれぞれ入力します。
以上、たった4ステップで完成です!
拡大・縮小したい!線のアウトラインを作成する方法
オブジェクトの大きさを変えたいときは色々と値をいじればいいのですが、このままの形でオブジェクトを拡大・縮小したいなぁ~ってとき。
そのまま拡大・縮小するとオブジェクトの線が崩れてしまいます…
なので、簡単に拡大・縮小したい人は、線のアウトラインを作ってしまいましょう!
普段文字のアウトラインを作るときに『 右クリック → アウトラインを作成 (Ctrl + Shift + o) 』でアウトラインを作ると思うのですが、線の場合はこの方法だとアウトラインを作成できないので気をつけてください。
線のアウトラインを作成する方法
オブジェクトタブ → パス → パスのアウトライン
これで拡大・縮小だけでなく、塗りの変更もできるようになったので、グラデーションなどの装飾も思いのままですね!
やり方を詳しく書いてきましたが、要は『円を作って、破線にするだけ!』です!
作り方を知らないと難しく感じますが、知ってしまえばお手軽ちょいちょいですね(*^^*)
「ババーン」としたインパクトの強いエフェクトを作りたい時は、ぜひぜひ思い出してください。
デザインで配色に困ったら!参考になるカラーコード・カラーチャートサイト6選
みなさまご存じのとおり、デザインをするうえで『配色』はとーーーっても重要です!配色とは色の組み合わせのことですね。
ついつい自分の好きな色ばかり使ってしまったり、どうしても綺麗な発色の色にならなかったり、逆に蛍光色みたいな明るすぎてチカチカする色合いになってしまったり…なかなか上手くいかない時ってありますよね。
今回はそんな悩みをスパッと解決してくれる、配色のお助けサイトをご紹介します。
配色に困ったらこのサイト!
HTML Color Codes
こちらはここ最近で、1番感動した配色のサイトさんです!!
カラーピッカーで好きな色が選択できるし、そこから派生して合う色をピックアップしてくれる。まさにベテラン執事さながらのサポート具合です!
(一般家庭に生まれ育った私は、執事がどんな感じかわからないけど!)
とにかく、かゆいところに手が届くので1度使ってみてください。絶対に惚れます。
基本の使い方
webサービス上なのに、カラーピッカーで色を選べる便利さったら!!!
好きな色を選んだら、左下の水色枠内のボタンから次のページに行きましょう。
色を保持しておけるパレットに、言葉のイメージからなる再配色、カラーコードもRGB、CMYKの両方で出してくれます。とっても優秀!
他にも…
カラーチャート
カラーネーム表
このサイトさん1つで本当に大助かりです!
自分の貧相な色相バリエーションに苦しめられたら、またアイディアをもらいに来ます。
farbecolore(ファルベコローレ)
リスのマスコットキャラクターが可愛いサイトさん。占いサイトっぽい雰囲気を醸しつつ、解説しっかりな敏腕カラーチャートサイトです。
自分で好きなワードを打ち込むと、そこから連想される色を何パターンも考えてくれます。
『林檎』なら赤っぽい色を中心に、『空』だと青色を中心に…など。必ずしも思った通りにいく訳ではないかもしれませんが、ゆるっと遊び間隔で配色を考えてみるのもいいかもしれません。
配色を連想したい言葉を入力して、[カラーイメージを診断]のボタンを押します。
私の名前だとこんな感じみたい。英語・漢字・ひらがなだとそれぞれまた違った色のイメージで構成されます。
なんと、こんなに詳細な分析もしてくれるんです。見てるだけでも面白いですね!
まだまだある!おすすめカラーコード参考サイト
HUE/360
[ ↓ ] HUE360 開発者のスライド
----
----
悩ましい配色。されど避けては通れない配色。
webデザイン初心者の私は、迷ったら一人で悩まず文明の利器に存分に頼っていこうと思います!!
【RSS】IT系女子のおすすめサイト25選!webデザイン・webサイト制作関連
先日RSSリーダーの『feedly』に関する記事を書きましたが、今回は登録しておくと幸せになれるRSSのおすすめ記事をご紹介したいと思います。
『feedly』についてはこちら
RSSおすすめ記事25選(webデザイン・webサイト制作関連)
----
----
----
VIVID COLORS + BLOG |福岡から東京に出てきたデザイナーのブログ
----
----
----
----
----
----
----
----
----
Webpark - ウェブサイト作成に役立つことをいろいろと
http://weboook.blog22.fc2.com/
----
----
----
----
----
----
----
phpspot開発日誌 - PHP/Ajax/JavaScript/CSS等の最新技術情報をお届け
----
----
----
----
----
いかがでしたか?
webサイト制作初心者の私にとっては、とてもお勉強になるサイトさんばかりで助かっています(*^^*)
個人ブログで素敵な記事を更新している方もいっぱいいるのですが、更新確認をしにいくのは手間がかかりますよね。
RSSリーダーで管理しておけば、新着記事を自動的に拾ってきてくれるので時間も手間もかからずすごく便利なのです!!
まだ導入していない方はぜひぜひRSSリーダーを使ってサクサク情報管理LIFEを楽しんでください!
外国人から見た日本の風景を考える。『ネオ和風』ロゴを作ってみた:webサイト制作
昨日は学校がお休みだったので、学校のみんなで集まって午後からお勉強会をしてました。各々自分で好きなことをやる自由スタイルで。
和風だけど和風すぎない『ネオ和風』ロゴ11個!
- 純和風でなく洋風なサイト
- クリアなイメージ
- 商品が映えるようシンプルに
外国人から見た日本の風景 『ネオ和風』
外国人の視点で捉えた『日本』映像が秀逸すぎる!!
Our Japan
ロゴをデザインするときの8つのルール
画像圧縮・軽量化サイト3選!見た目そのままでファイルサイズ大幅ダウン!
webサイト作成時やバナー納品時、画像サイズが大きいと送るほうもなんか悪いし、受け取るほうも負担になるしで困っちゃいますよね。
1つ言えることは、画像も人間もおデブちゃんよりはダイエットしたほうがカッコイイってことです!
クライアントに納品する前に、やっておきたい画像軽量化!
そんなこんなで、今回は画像の見た目はそのままで、ファイルサイズだけダウンしてくれるwebサービスを3つご紹介します。
どのサイトさんもオンラインで完結!アプリケーションのダウンロードが不要なので、お手軽簡単です!ぜひお試しあれ!
軽量化手順
- 黄色い枠で囲んだエリアに画像をドラッグ&ドロップする
- 各サイト所定のボタンを押してダウンロードする
手順はたったの2ステップ!準備はOKですね?それでは参りましょう!
画像圧縮・軽量化サイト3選
Tiny PNG(タイニーピング)
パンダのマスコットキャラクターが気持ち悪いとか、一周回ってかわいいとか諸説ありますが、とりあえず私が一番お世話になっているサイトさんです。
『png』と名前がついていますが、png形式の画像だけでなく、jpg形式も圧縮してくれます。
画像は同時に20枚までアップロードができます!パンダちゃんなだけあって器がデカい!
圧縮後のファイル名も余計な編集がされないので、とても使い勝手のよいサイトです。
(『sample.png』→『s_sample.png』などにファイル名を変更しない、ということです!)
JPEG mini (ジェイペグ ミニ)
ほとんど画質を落とさずにファイル容量を8割くらいダウンできるお利口さんサイトです。
TOPのサンプル画像を見てもわかるように、圧縮前後の写真を比べてもほとんど遜色ありませんね。素人目には全くわからないくらいです。
ただ、このサイトの欠点は1枚ずつしかアップロードができないこと。
どうやらプロのデザイナーさん方はオンラインではなく、ソフトをDLしてお使いになるもよう。無料版は20枚/日の処理制限つきで、有料版は2,400円(2015年8月17日現在)で制限なし。気になる方は調べてみてください。
軽量化前後の画質について詳しく比較してくださっているサイトさんを見つけたので、よければ併せてご覧ください。
small pdf(スモール ピーディーエフ)
最後に、こちらは画像…と分類してよいのか迷いましたが、『PDF』を軽量化してくれるサイトさんです!
事務職をやっているときなんかは、本当に本当にお世話になりました。そして、サイトがシンプルでかわいいのも個人的にポイント高いです♪
私が使っていたのはこの圧縮機能ですが、サービスは多種多様!!!
- PDF 圧縮
- JPEG PDF 変換
- PDF JPEG 変換
- PDF Office(Excel・Word・Power Point) 変換
- Office(Excel・Word・Power Point) PDF 変換
- PDF 結合
- PDF分割
- PDF パスワード 解除
使い方次第で色々なことができそうですね!
さて、明日からすぐに使える画像の圧縮サイトさん達をご紹介してきました。
『Tiny PNG』さんなんかはサイト名を忘れてしまっても
『パンダ 画像 圧縮』
で調べればすぐに出てくるので、あのパンダちゃんだけでもぜひ覚えて帰ってください(*^^*)