はじめまして！ｍｋです。

WEB制作初心者・駆け出しの私ですが
頑張っていきたいと思っております！
どうぞよろしくお願いします

先輩デザイナーさん達に教えて頂きながらの毎日です。
教えて頂いたこと、勉強したことなどで
WEB制作初心者の方などにお役に立ちそうなことを
記事にしていけたらなぁと思います。

----------------------------------------------------------------------------

さて、今回は「Photoshop Express Editor」のご紹介です
http://www.photoshop.com/tools?wf=editor

こちらはインストールして使うソフトではなく、
ブラウザで写真加工できるサービスになります。
画像を編集したいけど、Photoshopなどのソフトを持っていない、
オンラインでお手軽に画像編集したいという時などに
非常に便利なツールです。

対応しているファイル形式はJPEG、PSD、RAWのみで、
PSD、RAWファイルを指定すると、JPEG形式に変換されます。

ファイルをアップロード


サイズ変更（Resize）

【Custom】で自分の好きなサイズに変更できます。

露光量（Exposure）

Originalから右側を選んでいくと、明るくなります。

彩度（Saturation）


EditタブからDecorateタブに移れば、
テキスト挿入やフレーム追加などの加工もカンタンです。

その他にも、切り抜き・回転、自動補正、赤目補正、画像修正など
簡単な画像補正なら、これで十分ですね

　→　

こんな感じに加工できました

よくPDFやWord、Excelのアイコンを使うことがあると思います。
この前、いつも使用しているサイズよりちょっと大きめのアイコンが必要になりました。
検索でしらべてみたところ、PDFアイコンの種類が少なく、
サイトにあったアイコンがなかなか見つからなく苦戦してしまいました。

そんな時見つけたのが FIND ICON になります。




使い方は、いたって普通の素材サイトと同じで、
キーワードを入力して探す感じになります。





このサイトの優れている所は、
「サイズ」や「色」など以外にも、
商用フリーなどの「ライセンス」で絞り込めるところになります。
これなら、商用OKなどすぐに分かって便利ですね。





欲しいアイコンが見つかったらその詳細ページに移動し、
ダウンロードするだけです。
サイズ違いも探せるのがちょっとうれしいですね。

最近、CSS2～3をフル活用するサイト制作が多くなってきました。
そんな中、グラーデションのCSSみたいに各ブラウザの仕様が微妙に異なり、
同じ様なコードを複数回書く事が非常に面倒だったりしますよね。


そんな訳で今回は、
CSSでグラデーションを指定する際に役立つサイトをご紹介します。

以前、別のスタッフが似たようなサイトを紹介しておりましたが、
私は Ultimate CSS Gradient Generator をオススメします。




正直、この手のグラデーション生成サイトは沢山存在してますが、
何故私がこれをオススメするかといいますと、
グラフィック編集ソフトを使用した事がある人であれば、
直感的に操作方法が分かる点です。

（というか、Illustratorとかでグラーデーションを作るのとほぼ同じです…）




私が操作するのは、主に下記の①～③になります。

① 色や不透明度を指定します
開始・終点以外にも、中間の色や位置を指定できるのがうれしいですね。
また、位置を数値で入力出来るのも個人的にポイントが高いです。


② グラデーションの方向を指定します
斜め方法とか、手動でやると面倒なので助かります。


③ 出力した際の色コードの形式を選びます
デフォルトではRGBAになってますが、
16進数の場合は「hex」を指定します。

（最初、これに気づかずに手動で直してました…）


こんな感じになります。
単純なグラデーションであれば手動で書いてしまいますが、
途中で色が変わったりする複雑なグラデーションの時には大活躍です！


面倒なグラデーションをCSSで再現する際は、
どうぞ使ってみてください。

今回は前回予告した、
ブラウザ上でPowerPointみたいなことが出来る reveal.js の
オンラインエディタ slid.es の紹介をします。

まずは slid.es でアカウント発行してください。



↑「Get started」をクリックしてください。




↑無料版の「Free」をクリックしてください。




↑ユーザーネーム（後で変更可能）、Email、パスワードを入力し、アカウントを発行してください。




↑問題なくアカウント発行ができたら上記画面が表示されますので、「create a deck」をクリック。




パワポっぽいのを制作するページが表示されますので、
上・右のツールバーを使用してページを作っていく感じになります。

私も試しに挑戦してみましたが、
これならHTMLが分からない人でも、
パワポやWord、ブログなどやったことがある人であれば
直感的に操作方法は分かると思います。
ただ、細かい調整などは下記のようにHTMLを直接編集する必要がありそうです。




ちなみに私がテストで作ってみたものです。
このぐらいであれば簡単に制作することが可能だと思います。
http://slid.es/swhidejii/slides-test



機会があれば、ちょっと仕事で使ってみたいかも。。。

今回は無料で様々なジャンルの授業が受けられるサイト「schoo」のご紹介。
https://schoo.jp/

学べるカテゴリーは以下のように分けられています。

• 経営・企業
• ビジネススキル
• テクノロジーIT
• デザイン
• アートものづくり
• 教養
• 政治・経済・時事

授業形式は生放送。
ですが、有料登録をすると見逃した授業の録画映像を無制限で観る事ができるようです。

無料で専門的な話を聞けるなんて、
とてもありがたいですね。