Adobe Dimension CC を使ってみた。

どうも!tutinokoです。

Javaのプロジェクトを作る話が途中で止まってますが、今回はこっち!

面白そうだったので「Dimension CC」を先日インストールしてみたので、ちょっと遊んでみた感想です。

Adobe Dimension CCとは
新次元の 3D グラフィックデザインソフトウェアです。デザイナーはこのアプリケーションを使用することで、3D や 2D の要素をすばやく合成したり、モデル、マテリアル、ライティングをカスタマイズしたりすることができます。2D を 3D に合成する先進の各種ツールにより、カスタムグラフィックを 3D モデルと組み合わせ、シーン全体を構成して最終レンダリング画像を作成できます。
(「Dimension CC | よくある質問」より抜粋)

…ということで、お手軽3Dグラフィックデザイン体験です!

デフォルトでいろいろな3Dモデルが用意されているので、好きなものをフィールドにドラッグして配置していきます。
左のツールバーでフィールドの目線やモデルの位置や傾きなども変えられます。

アセットの一覧の
「マテリアル」からはモデルの色やテクスチャを加えることができます。
「ライト」で光源の種類を変更できます。(これがまだちょっとよくわからなかった)
「画像」で画面に背景を足したり、モデルにマークを足すこともできます。

もちろん、自分で用意した背景やパターンやマークなども読み込んで使えます!

そして、テキトーにいじってこれで完成!ってところでレンダリングで書き出しをします。
水とかガラスとか透明な素材がデザイン画面だとなんかザラザラに見えるけど、レンダリングすれば綺麗に書き出してくれるっぽいです。
一応コレ、レンガと水の上にサプライドのロゴが入ってるんですよ!(わかりづらい)

左上のレンダリングを押して画面を切り替えて、右のレンダリングボタンを押すと書き出しが始まります。
フォトショで使えるようにPSDで書き出すようにしました。

さて、ここからが大変だった…

とにかくレンダリングが終わらない!

2時間以上待ってもまだ半分過ぎとかちょっとこれは…
最初にチュートリアルで説明を見ながら作った時は5分くらいで済んだ気がするのに…

作業の合間の息抜きだから、他のソフトとかいろいろ立ち上げてるせいも多分にあるとは思うけど…
複雑な水の表現とかレンガのテクスチャが重たいのかしら…

とりあえず、レンダリングは途中の状態をPSDにしてくれる機能があるので、一旦保存して諦めました。

そしてその途中の状態のものをフォトショでちょっとトリミングしたものがこちら。

だいたい形はできてますね?

フォトショのレイヤーを見ると親切にいろいろ分けてくれていました!便利!

書き出しが重たいのはどうしても本体のスペックですよね…
私が使っているのはMacで、Macの標準メモリは8GBなので、たぶんこれ16GBとかぐらいにしないとしんどいですよね…

ということで、3Dソフトを使う時はマシンスペックを要確認!でした!

【Slack】【Google Drive】【サイボウズ】クラウドツールを活用しまくろう!【チャットワーク】【backlog】

こんにちは!bibiです。

日々のコミュニケーションツール、活用していますか?

メールでやり取りを積み重ねているあなた!

電話で話したリマインドをメールで共有しているあなた!!

あの時の内容が乗っているメールどこだっけ・・・?
いつの電話であの案件のその内容、話したっけ・・・?

そんなことにならないように、やり取りができるクラウドのご紹介です!
もちろんっ全部無料!!

1.slack
使いやすさ★★★☆☆
共有しやすさ★★★☆☆
使い込み度★★★☆☆
https://slack.com/intl/ja-jp
UIはお洒落で、直感的に使えるので、相手とのやり取りに最適!
ただ、海外発のツールなせいか、シンプルすぎて素っ気ないと思うところもありますね。。

2.google drive (+スプレッドシート)
使いやすさ★★★★☆
共有しやすさ★★★★★
使い込み度★★★★★
https://www.google.com/intl/ja_ALL/drive/
グーグルに登録していれば誰でも使えます!
ドライブで素材受け渡しは容量多く使え、スプレッドシートではほぼエクセルを、クラウドで共有できます。
クライアントとのやり取りやイメージの共有、議事録共有など、これさえあればメールなんて何それ美味しいの?という感じです!

3.サイボウズ
使いやすさ★★★☆☆
共有しやすさ★★★☆☆
使い込み度★★★★☆
https://cybozulive.com
グループチャット、スケジュール管理、Todoリスト、共有フォルダなど、多機能で使い勝手がいいこのツール。
惜しむらくは、2019年4月にサービス終了との事・・・

4.backlog
使いやすさ★★★☆☆
共有しやすさ★★★★☆
使い込み度★★★★★
https://backlog.com/ja/
タスク管理・進捗管理などを多用するならこれ!元からgitが組み込まれているなど、諸々機能があるのでいろいろやりたい方はおススメ!
ただ、無料バージョンだとそこそこ制限がかかるので、ある程度使い込んだ後に有料化してもいいかも。。

5.チャットワーク
使いやすさ★★★★★
共有しやすさ★★★★☆
使い込み度★★☆☆☆
https://go.chatwork.com/ja/
グループチャット、ファイル共有、それに加えてユーザー追加もしやすく、かゆいところに手が届きまくっているツール!
直感的に把握しやすいため、とっかかり~中級者は愛用間違いなしです!
ただこれも、無料版だとグループ作成制限などあるので、使い込む場合は有料版をお勧めします。

僕は先方とのやりとりはgoogle driveのスプレッドシートちゃん、社内での案件共有はチャットワークちゃんと、使い分けております!

皆様も自分に合ったクラウドツールを使って、快適なWEBライフを☆彡

【jQuery】ページがスクロールされたらやってほしい処理を書く方法

どうも
ご無沙汰してますsu-sanです。

webページ制作でスクロールされた時にやってほしいことを書きたい時ありますよね!

スクロールされたらメニューバーを表示させたりボタンを表示させたり。。。

それができるのが下記のコードです!!

以下の関数の中に行いたい処理を書くとスクロール時に実行されます!

$(window).scroll(function(){
    〜行いたい処理〜
});

今回はwindowのscrollでイベントを追加してみたいと思います。

ここでクラスを指定して色を変えたり何かを表示させたりなどできます!
上の例ではスクロール時にhogeクラスにhogehogeクラスを追加していますー

$(window)には他にも色々な便利な関数があるので、ぜひ使ってみてくださいー!

以上、「ページがスクロールされたらやってほしい処理を書く方法」でした!

Webで使う『画像形式』。どう使う?

Webで使う『画像形式』。どう使う?

こんにちわ、最近左だけ花粉症?のWebデザイナー otarie です。
今回は画像形式のJPEGPNGGIFSVGについてのお話をしようと思います。

各画像形式についての特徴や、メリット、デメリットについて調べたことをまとめてみました。

・Joint Photographic Experts Groupの略
 拡張子は「.jpg」または「.jpeg
・静止画像データの圧縮形式:非可逆圧縮の画像フォーマット

インターネットでよく使用されている画像形式ですね。
JPEGは圧縮率が高く、フルカラー(約1,677万色)の画像を扱えるので、たくさんの色を必要とする写真や複雑なテクスチャーに向いている画像形式です。
グラデーションも綺麗に表現できます。

デメリットとして、JPEGは高い圧縮率で圧縮できるのですが、その際、多少の劣化を伴います。
圧縮率を上げるとファイルは小さくなるんですが、画質はブロックノイズのようになり劣化してしまう場合があります。
また、アイコンやアニメ調の平坦なイラストなどは、にじんだように汚くなってしまいます。
さらに、一度低解像度に圧縮した画像は、元に戻すこともできないので元データをバックアップしておく必要があります。

拡張子のjpgjpegの違いは?
MS-DOS時代に拡張子が3文字までという制約があったためjpgを使用していました。
現在では、普及しているOSで3文字までの制約はなくなったのでjpegを使用することができるようになり、混在するようになっているようです。

注意点
UNIX上では大文字と小文字の識別が別ファイルとして認識されるので.jpg」と「.JPG」の違いには気をつけましょう。

Portable Network Graphicsの略
 拡張子は「.png
GIFに替わるライセンス・フリーの画像形式として生まれた画像形式
 :可逆圧縮の画像フォーマット

PNGは可逆圧縮で複数の透過処理ができる画像形式です。
フルカラーにも8bitカラーにもすることができます。
この画像形式は圧縮率が高く同じ内容のGIF画像より10%~30%程度ファイルサイズが小さくなります。圧縮によってデータが捨てられてしまうことがないので、データを完全に復元することができます。
また、ライセンス問題の不安がないのも特徴です。

デメリットはJPEGGIFと比べると新しい技術になるので、古いPCやブラウザ、携帯では表示できない可能性があります。
また、フルカラーにするとJPEGよりファイルサイズが大きくなってしまいます。
アニメーションには対応していません。

PNG-8
Internet Explorer 5から対応しているため、現在では十分に使用できる画像形式です。  
GIFと同じ、インデックスカラーモードの256+1色透過を使うことができて、グラデーションなどを含む画像などに対しては、GIFよりも圧縮率が高い場合が多いです。

PNG-24(32)
JPEGと同様にフルカラー(約1,677万色)の色を扱うことができて、さらにPNG-32ではアルファチャンネルを使用することができます。
注意点として、Photoshopでは、PNG-32PNG-24とされているので勘違いしやすいですが、これは32bitのことです。
IE6に対応させるには、filterJavaScriptを使用する手間がかかってしまい、ファイルサイズも他の画像フォーマットに比べて、重くなる傾向にあります。

Graphics Interchange Formatの略
 拡張子は「.gif
・最大8bit256色)までの色を扱うことのできる圧縮画像形式

256色以上必要としてないロゴやリンクボタン、アイコン、アニメ調の簡単なイラストなど、線の境界(輪郭)もキレイに作ることができる画像形式です。
データ容量も小さく、透過処理もできます。また、256色までのアニメーションを作ることができるのも特徴です。    

デメリットは、色数に制限があるので、風景写真など多彩な色を使う場合では乏しくなってしまいます。
一つの画像で色を256色しか使用できないため、シンプルで色数が少ない画像の場合は、png形式よりファイルサイズを若干小さくできることもありますが、実際のところ、あんまり変わらないです。

Scalable Vector Graphicsの略
 拡張子は「.svg
・静止画像データの圧縮形式:非可逆圧縮の画像フォーマット

SVGJPEGPNGGIFとは異なり、ベクター画像なので、1ピクセル未満のオブジェクトでも画像を拡大・縮小しても画質が劣化せずにくっきりと綺麗に表示することができる画像形式です。

ベクタ形式
点の座標位置や点同士を結ぶ線を演算して表した画像のことです。
計算して表示する画像なので、画像自体のデータは小さく、画像の拡大や縮小も画質を演算して表現するため、劣化せずに表示できます。

ラスタ形式
ラスタ形式は「ドット絵」なので、画像を拡大すると、輪郭がギザギザになります。
ですが、複雑に色や図形が組み合わさったデータ(写真など)の表現には、ベクタ形式よりラスタ形式の方が向いています。
JPEGPNGGIF、などはすべてラスタ形式の画像です。

また、SVGは拡大・縮小に強いので、レスポンシブWebデザインでとても有効です。
ロゴ画像などに使えば、1つの画像ファイルでスマートフォンからPCまで対応できます。
SVGは画像ファイルですが、テキストエディタで中身を見ることができるので、作成や編集も可能です。JPEGPNGGIFの画像ファイルをテキストエディタで開くと文字化けしてしまいます。
また、マークアップ言語である特徴を活かしてHTMLSVGを融合させると、地図や折れ線グラフ、円グラフといった、HTMLだけではできない斜めや曲線の表現ができます。

デメリットは、写真や手書きのイラストなど、色や形状が複雑なオブジェクトの場合は、点や線の集まりでは表現しきれないので不向きです。
また、あまりにも複雑なオブジェクトを表示させようとすると動作速度が遅くなったり、メモリーの使用量が大きくなってしまいます。

いかがでしたか?
画像形式を全部理解するのがとても難しく、まだまだ勉強中ですが、Webデザイナーとして大事な知識だと教わってこうして色々調べて行くと、だんだんその大事さに気づいてきました。

また次回をお楽しみに~^^