webデザイン初心者|sometimes study

webデザイン初心者の私が一人前になるまでの記録。webデザイン(Illustrator・Photoshop)・webサイト制作(HTML・CSS・JavaScript・jQuery・PHP・WordPress)を中心にお勉強中。

活動報告!Webデザインの職業訓練校を卒業してからの3年間

どうも、お久しぶりです!Webディレクターになったせりなです!

このブログ、3年も放置してたのに未だにちょこちょこ見に来てくださる方がいたり、参考サイトとして引用してくださる方がいたり・・・嬉しい限りです。
本当に本当にありがとうございます!!!

さて、2015年末に職業訓練校を卒業してから色々あったので、Web業界初心者の私がその後なにをしていたのか・・・? 活動報告的な感じでまとめてみようと思います!

 

目次

続きを読む

意外と知らない?IllustratorやPhotoshopを簡単にPDF化する方法:無料ソフト「CubePDF」を使おう!

最近、学校の授業でポートフォリオ作っておりまして「PDFで出力したいけど、やり方がわからない」とよく耳にするので、手順を書いておこうと思います。

 

ポートフォリオIllustratorで作っている人が大多数ですが、今回ご紹介する方法はOfficeSoftのEXCELやWORDなどで作ったものでもPDF化できます。

 

プリンターを選ぶようにPDF化ソフトを選べるようになるので、印刷画面を出せるところなら何でもPDFに出力できます!


意外と知らない?
IllustratorPhotoshopを簡単にPDF化する方法

f:id:serinaishii:20151124115646p:plain

 

今回ご紹介するのは「CubePDF」という無料のソフトです。

 

CubePDFは、Windowsの印刷機能を利用した「仮想プリンタドライバ」形式のPDF変換ソフトです。


使い方はとてもシンプルで簡単です。それぞれのアプリケーションで印刷ボタンを押す際に、CubePDFプリンタを選択することによって実際に紙へ印刷する代わりにPDFファイルを作成することができます。 

 

f:id:serinaishii:20151119194912p:plain

 

「 百聞は一見にしかず」早速、使い方を見ていきましょう!

続きを読む

【Illustrator】日章旗のような放射線状オブジェクトをつくる方法。ネットショップバナーを作ろう!

先日『THE ネットショッピングサイト!』みたいなバナーを作って一人で遊んでいました。

 

その時に、「あれ?放射線状のオブジェクトどうやって作るんだっけ?」となったので、自分のメモ書きも兼ねて作り方をまとめてみることにしました!

 

f:id:serinaishii:20150928133233p:plain


放射状オブジェクトをマスターすれば、
ネットショッピングバナーが簡単にできる!

 で、そんなこんなで完成したバナーがこんな感じです。

      ↓   ↓   ↓

 

f:id:serinaishii:20150928113249p:plain

 

学校にいる時に作ったので、フォントは既存のものだし、遊びだからちょっとお手軽感あるけど…まぁ、ネットショップのバナーってこんな雰囲気ですよね?

 

  • 『 赤・黄色系の太文字 × 黒い縁 × ゴシック体 』という感じの主張が強い書体
  • お祝いみたいな明るい装飾(紙ふぶき、キラキラ、クラッカーとか)
  • 「ババーン」とインパクト感がある、広がりをイメージした背景 ←今回作るのはコレです!

という訳で、放射状のオブジェクトを作ってみましょう!


 放射線状オブジェクトの作り方

f:id:serinaishii:20150928132518p:plain

1.ツールバーから楕円形ツールを選択する

ツールバーの出し方: ウィンドウタブ → ツール

長方形ツールを長押しすると、後ろに隠れている楕円形ツールがクリックできるようになります。


2.塗りナシ・線アリの円を書く

今回は「 幅100px × 高さ100px 」の正円にしました。

 

one point advice

 

正円(全方向が同じ直径の円)を書く時は、楕円形ツールを選択した後に「Shiftキー」を押しながらマウスをドラッグすると簡単に書くことができます。


3.線幅を設定する

今回は「 線幅 100px 」にします。


4.破線を設定する

今回は「線分 10px・間隔10px」にします。

 

線パネルの出し方: ウィンドウタブ → 線

[ 破線 ]にチェックを入れて、線分・間隔をそれぞれ入力します。

 

以上、たった4ステップで完成です!


拡大・縮小したい!線のアウトラインを作成する方法

オブジェクトの大きさを変えたいときは色々と値をいじればいいのですが、このままの形でオブジェクトを拡大・縮小したいなぁ~ってとき。

 

そのまま拡大・縮小するとオブジェクトの線が崩れてしまいます…

なので、簡単に拡大・縮小したい人は、線のアウトラインを作ってしまいましょう!

 

f:id:serinaishii:20150928131901p:plain

 

普段文字のアウトラインを作るときに『 右クリック → アウトラインを作成 (Ctrl + Shift + o) 』でアウトラインを作ると思うのですが、線の場合はこの方法だとアウトラインを作成できないので気をつけてください。

 

線のアウトラインを作成する方法  

オブジェクトタブ → パス → パスのアウトライン

 

これで拡大・縮小だけでなく、塗りの変更もできるようになったので、グラデーションなどの装飾も思いのままですね!


 やり方を詳しく書いてきましたが、要は『円を作って、破線にするだけ!』です!

 

作り方を知らないと難しく感じますが、知ってしまえばお手軽ちょいちょいですね(*^^*)

 

「ババーン」としたインパクトの強いエフェクトを作りたい時は、ぜひぜひ思い出してください。

デザインで配色に困ったら!参考になるカラーコード・カラーチャートサイト6選

 みなさまご存じのとおり、デザインをするうえで『配色』はとーーーっても重要です!配色とは色の組み合わせのことですね。

 

ついつい自分の好きな色ばかり使ってしまったり、どうしても綺麗な発色の色にならなかったり、逆に蛍光色みたいな明るすぎてチカチカする色合いになってしまったり…なかなか上手くいかない時ってありますよね。

 

今回はそんな悩みをスパッと解決してくれる、配色のお助けサイトをご紹介します。


配色に困ったらこのサイト!

 HTML Color Codes

htmlcolorcodes.com

 

こちらはここ最近で、1番感動した配色のサイトさんです!!

 

カラーピッカーで好きな色が選択できるし、そこから派生して合う色をピックアップしてくれる。まさにベテラン執事さながらのサポート具合です!

 

(一般家庭に生まれ育った私は、執事がどんな感じかわからないけど!)

 

とにかく、かゆいところに手が届くので1度使ってみてください。絶対に惚れます。

 

f:id:serinaishii:20150903200032p:plain

 

基本の使い方

 

f:id:serinaishii:20150903200046p:plain

 

webサービス上なのに、カラーピッカーで色を選べる便利さったら!!!

 

好きな色を選んだら、左下の水色枠内のボタンから次のページに行きましょう。

 

f:id:serinaishii:20150903200056p:plain

 

色を保持しておけるパレットに、言葉のイメージからなる再配色、カラーコードもRGBCMYKの両方で出してくれます。とっても優秀!

 

他にも…

 

カラーチャート

 

f:id:serinaishii:20150903200106p:plain

 

カラーネーム表

 

f:id:serinaishii:20150903200208p:plain

 

このサイトさん1つで本当に大助かりです!

 

自分の貧相な色相バリエーションに苦しめられたら、またアイディアをもらいに来ます。


 farbecolore(ファルベコローレ)

farbecolore.com

 

リスのマスコットキャラクターが可愛いサイトさん。占いサイトっぽい雰囲気を醸しつつ、解説しっかりな敏腕カラーチャートサイトです。

 

自分で好きなワードを打ち込むと、そこから連想される色を何パターンも考えてくれます。

 

『林檎』なら赤っぽい色を中心に、『空』だと青色を中心に…など。必ずしも思った通りにいく訳ではないかもしれませんが、ゆるっと遊び間隔で配色を考えてみるのもいいかもしれません。

 

f:id:serinaishii:20150903200216p:plain

 

配色を連想したい言葉を入力して、[カラーイメージを診断]のボタンを押します。 

 

f:id:serinaishii:20150903200226p:plain

 

私の名前だとこんな感じみたい。英語・漢字・ひらがなだとそれぞれまた違った色のイメージで構成されます。 

 

f:id:serinaishii:20150903200237p:plain

 

なんと、こんなに詳細な分析もしてくれるんです。見てるだけでも面白いですね!


 まだまだある!おすすめカラーコード参考サイト

HUE/360

 

 http://hue360.herokuapp.com/

 

paivittain-kukka.com

 

[ ↓ ] HUE360 開発者のスライド

www.slideshare.net

 ----

www.colordic.org

 ----

www.netyasun.com

html-color-codes.info


悩ましい配色。されど避けては通れない配色。

 

webデザイン初心者の私は、迷ったら一人で悩まず文明の利器に存分に頼っていこうと思います!!

【RSS】IT系女子のおすすめサイト25選!webデザイン・webサイト制作関連

先日RSSリーダーの『feedly』に関する記事を書きましたが、今回は登録しておくと幸せになれるRSSのおすすめ記事をご紹介したいと思います。

 

feedly』についてはこちら

 

serinaishii.hatenablog.com


RSSおすすめ記事25選(webデザイン・webサイト制作関連)

f:id:serinaishii:20150903224103p:plain

 

liginc.co.jp

----

photoshopvip.net

 ----

ferret-plus.com

----

 

VIVID COLORS + BLOG |福岡から東京に出てきたデザイナーのブログ

 

 http://blog.v-colors.com/

 

----

coliss.com

 ----

www.webcreatorbox.com

 ----

webdesignrecipes.com

 ----

lopan.jp

----

blog.yuko-design.com

----

maka-veli.com

 ----

webya.opdsgn.com

 ----

webimemo.com

 ----

 

Webpark - ウェブサイト作成に役立つことをいろいろと

 

 http://weboook.blog22.fc2.com/

 

----

e0166.blog89.fc2.com

 ----

kachibito.net

 ----

stocker.jp

 ----

design-develop.net

 ----

www.ar-ch.org

 ----

memocarilog.info

 ----

 

phpspot開発日誌 - PHP/Ajax/JavaScript/CSS等の最新技術情報をお届け

 

 http://phpspot.org/blog/

 

---- 

creativememomemo.com

 ----

css-eblog.com

 ----

web-daysign.net

 ----

www.doya-doya.com

 ----

wp.yat-net.com


いかがでしたか?

 

webサイト制作初心者の私にとっては、とてもお勉強になるサイトさんばかりで助かっています(*^^*)

 

個人ブログで素敵な記事を更新している方もいっぱいいるのですが、更新確認をしにいくのは手間がかかりますよね。

 

RSSリーダーで管理しておけば、新着記事を自動的に拾ってきてくれるので時間も手間もかからずすごく便利なのです!!

 

まだ導入していない方はぜひぜひRSSリーダーを使ってサクサク情報管理LIFEを楽しんでください!

 

RSSリーダーfeedly』についてはこちら

 

serinaishii.hatenablog.com

外国人から見た日本の風景を考える。『ネオ和風』ロゴを作ってみた:webサイト制作

昨日は学校がお休みだったので、学校のみんなで集まって午後からお勉強会をしてました。各々自分で好きなことをやる自由スタイルで。

 
最近授業がjQueryに入ったので、ひたすら問題を解いてみたり。
自分でクライアントを見つけてwebサイト制作をするので、プレゼン資料を作ったり。
 
私は『和柄屋』という甚平・和柄プリントTシャツ・和小物を卸売しているところのサイトを作ることになりました。
 

和柄屋』さんの通販ページ (今回のクライアント)

 

…という訳で

和風だけど和風すぎない『ネオ和風』ロゴ11個!

昨日のお勉強会、4時間の集大成です。
 
和柄屋』サイトの雰囲気をまとめる為にもと、ロゴをつくってみました。
 

f:id:serinaishii:20150822124509p:plain

 
『のれん』をイメージしたり
『WA(和)』の文字を、刀でスパッと切ったようにカスタマイズしたり
『A』を富士山に見立てたり
 
ちゃんと見る人に伝わるかな。
 
 
サイト自体のイメージが
  • 純和風でなく洋風なサイト
  • クリアなイメージ
  • 商品が映えるようシンプルに
…という作りを想定しているのでコッテコテの『和』でなく、『外国人さんから見た日本 = ネオ和風』をイメージしました。

外国人から見た日本の風景 『ネオ和風』

外国人の方々が日本で撮った写真や動画って、日本人が撮るそれと違ってなんとなくスタイリッシュでクールな感じがしませんか?
 
私はこのカッコイイ感じの日本風を『ネオ和風』と呼ぶことにしました。
ネオ(Neo)とはギリシア語で「新しい」という意味です。
 
 

外国人の視点で捉えた『日本』映像が秀逸すぎる!!

 

 
 

Our Japan

 

 
 

日本の美しい風景の写真をいろいろ撮ってきた

 

View post on imgur.com

imgur.com

 

私が再現できているかはわからないけど、目指しているのはそんな感じ。
 
このサイト制作を通して『和柄 -WAGARA- 』という言葉を、『おもてなし -OMOTENASHI- 』や『寿司 -SUSHI- 』のように外国の方にも伝わる日本語にしたいと思っています。
 
夢はでっかく。

ロゴをデザインするときの8つのルール

ロゴデザインに関していい記事を見つけたので引用しておきます。

 

ロゴをデザインするときの8つのルール

 

 http://blog.creamu.com/mt/2010/09/8_2.html

 

  1. より少ない色、より少ないフォント
  2. 一般的なフォントを使う。ArialやTimes New Romans、Helveticaなど
  3. シンプルな形が美しい
  4. ハイライトやグラデーション、シャドウを使わない
  5. 美しいロゴは、どんなメディアで使われても美しい
  6. 白黒でも美しく見えるのがよいロゴ
  7. メッセージを伝えるために、シンプルな構成がマスト
  8. 覚えやすいロゴにすべき。ナイキやコカコーラ、オリンピックのロゴなど

 

 色々な場で活用することを考えて、"グラフィックとして格好良く"よりも"シンプルで使いやすく"が基本ですね。
 
グラデーション・シャドウなどの立体的なデザインは、単色で表現できないのでNG。
 
これはwebだけで考えるとやりがちだけど、名刺やポスターとして印刷しようとすると使いにくいのでお気を付けあそばせ。
 
シンプルが1番格好良くて、1番難しいです。

画像圧縮・軽量化サイト3選!見た目そのままでファイルサイズ大幅ダウン!

webサイト作成時やバナー納品時、画像サイズが大きいと送るほうもなんか悪いし、受け取るほうも負担になるしで困っちゃいますよね。

 

1つ言えることは、画像も人間もおデブちゃんよりはダイエットしたほうがカッコイイってことです!


クライアントに納品する前に、やっておきたい画像軽量化!

 

そんなこんなで、今回は画像の見た目はそのままで、ファイルサイズだけダウンしてくれるwebサービスを3つご紹介します。

 

どのサイトさんもオンラインで完結!アプリケーションのダウンロードが不要なので、お手軽簡単です!ぜひお試しあれ!

 

軽量化手順

  1. 黄色い枠で囲んだエリアに画像をドラッグ&ドロップする
  2. 各サイト所定のボタンを押してダウンロードする

手順はたったの2ステップ!準備はOKですね?それでは参りましょう!


画像圧縮・軽量化サイト3選

Tiny PNG(タイニーピング)

f:id:serinaishii:20150817222353p:plain

パンダのマスコットキャラクターが気持ち悪いとか、一周回ってかわいいとか諸説ありますが、とりあえず私が一番お世話になっているサイトさんです。

 

png』と名前がついていますが、png形式の画像だけでなく、jpg形式も圧縮してくれます。

 

画像は同時に20枚までアップロードができます!パンダちゃんなだけあって器がデカい!

 

圧縮後のファイル名も余計な編集がされないので、とても使い勝手のよいサイトです。

(『sample.png』→『s_sample.png』などにファイル名を変更しない、ということです!)


 JPEG mini (ジェイペグ ミニ)

f:id:serinaishii:20150817222409p:plain

f:id:serinaishii:20150817222416p:plain

ほとんど画質を落とさずにファイル容量を8割くらいダウンできるお利口さんサイトです。

 

TOPのサンプル画像を見てもわかるように、圧縮前後の写真を比べてもほとんど遜色ありませんね。素人目には全くわからないくらいです。

 

ただ、このサイトの欠点は1枚ずつしかアップロードができないこと。

 

どうやらプロのデザイナーさん方はオンラインではなく、ソフトをDLしてお使いになるもよう。無料版は20枚/日の処理制限つきで、有料版は2,400円(2015年8月17日現在)で制限なし。気になる方は調べてみてください。

 

軽量化前後の画質について詳しく比較してくださっているサイトさんを見つけたので、よければ併せてご覧ください。


small pdf(スモール ピーディーエフ) 

f:id:serinaishii:20150817222424p:plain

最後に、こちらは画像…と分類してよいのか迷いましたが、『PDF』を軽量化してくれるサイトさんです!

 

事務職をやっているときなんかは、本当に本当にお世話になりました。そして、サイトがシンプルでかわいいのも個人的にポイント高いです♪

 

私が使っていたのはこの圧縮機能ですが、サービスは多種多様!!!

  • PDF 圧縮
  • JPEG PDF 変換
  • PDF JPEG 変換
  • PDF Office(Excel・Word・Power Point) 変換
  • Office(Excel・Word・Power Point) PDF 変換
  • PDF 結合
  • PDF分割
  • PDF パスワード 解除

使い方次第で色々なことができそうですね!


さて、明日からすぐに使える画像の圧縮サイトさん達をご紹介してきました。

 

『Tiny PNG』さんなんかはサイト名を忘れてしまっても

 

      『パンダ 画像 圧縮』

 

で調べればすぐに出てくるので、あのパンダちゃんだけでもぜひ覚えて帰ってください(*^^*)