画像も水平思考が大切です。

2020.05.21

誰もが簡単にスマホで撮影してSNSに投稿してシェアできる便利な時代です。
瞬間瞬間を切り取って自由に表現できるからこそ、大切な基礎を少し意識してもらいたいと思います。
その一つが、水平・垂直感覚を意識して撮影することです。
撮影モチーフやアイデアとして画像を敢えて傾けたりして、
効果をプラスさせたりする場合を除いて、まずは被写体と真っ直ぐに向き合うと良いと思います。
見本の2枚の写真をご覧ください。ある夕方の湘南の海のシーンです。
曇天の空からドラマチックに差し込んだ
レンブラント光線(薄明光線)が浜辺で遊ぶ人達を印象づけています。


2枚の画像を見比べると明らかに違いがわかりますね。そうです、水平線の傾きの違いですね。
上の写真は、水平線を意識ぜず撮影したもので、下の写真は水平線を水平になるように撮影したものです。
ごくごく当たり前のことですが、仕上がりの写真の力強さが違います。
上の写真は、雲の斜めのライン、波打ち側の斜めのライン、水平線の斜めのラインが、レンブラント光線の強さを打ち消していますね。
一方、下の写真はどうでしょう。水平線をきちっと水平に撮影することによってレンブラント光線が
力強く印象的に見えるはずです。水平線の右側にかすかに見える烏帽子岩もくっきり見えると思います。
仮に水平線がやや傾いてしまっても、後のデジタル処理で傾きの修正も可能ですから、
一度意識したらどうでしょうか。当たり前のことですがとても大切な事だと思います。


デザインは「見ため」大切です。

2020.04.30

アナログ時代からのグラフィックデザイナーやタイポグラファー方なら、今回の話は当たり前の話かもしれません。 一方で、コンピュータでデザインを始めたデジタル世代のグラフィックデザイナーやUIデザイナーの方は 正確な数値でのデザインや端数を切り捨てるデザインに無意識にしてしまいがちです。 数値的なデザインだけではなく、視覚的なデザイン感覚いわば「見ため」の感覚を養ってみてもいいかもしれませんね。 わかりやすい例として、正方形のエリアの真ん中に配する際の、正三角形の位置で説明すると、 正方形のエリアのど真ん中に配した正三角形は、左右のアキは均等であっても上下のアキは均等ではなく やや上めに置いた方が落ち着いて見えるということです。 もちろん正三角形は上下のボリュームに違いがにあるためですが。よくある錯覚(錯視)の事例にもどこか似ているかもしれません。 視覚的なデザイン感覚いわば「見ため」の感覚がとても大事でそのデザインを有機的なものに変えると言っても 過言ではないでしょう。


Firefoxで背景画像が表示できない場合の対処方法

2018.08.13

Chromeでは表示できているのに、Firefoxでは背景画像が表示できないという問題が起こりました。

svgの書き出し方なのか、パスの指定の仕方なのかなど、解決までに検討しましたが、問題は背景画像のショートハンドの書き方でした。

背景についての記述をまとめて、background: の中に記載していたのですが、その順番に問題がありました。

【FFで表示されなかった記載】
background: url(../img/〇〇.svg)center center no-repeat /contain;

【FFで表示される記載】
background: url(../img/〇〇.svg)center center no-repeat /contain;

つまり、サイズ指定である「/cotain」は、位置指定「center」などの後に記載する必要があるということのようです。

CSSの表記方法の誤りのようなのですが、Chromeで表示できていただけに、解決までに時間がかかってしまいました。

もし同じような問題が生じている方は、記載の順番に誤りがないか一度確認してみて頂ければと思います。


Adobe Photoshop CC 2015でツールバーのカスタマイズができない場合の対処方法

2018.07.04

ツールバーの切り抜きツールが表示されなかったため、調べたところ下記のページを見つけました

ツールバーでツールが見つからない

編集→ツールバーからツールバーの表示内容を変更できるという内容になっているのですが、どうしても編集の中にツールバーが見つかりません。

しばらく色々と調べたのですが、下記のページにて新機能として紹介されていることを考えると、おそらくですが、自分が使用していた「Photoshop CC 2015の0.1」では、ツールバーのカスタマイズが提供されておらず、2016年にアップデートで追加された機能だった可能性が高そうです。

[Photoshop]ツールバーをカスタマイズできるようになった!

結果、Photoshop CCを2018バージョンにアップデートしたところ、切り抜きツールもツールバーのカスタマイズ機能も無事表示されました。

アップデートはマメにした方がいいですね…。

同じようなことが起こっている方がいらっしゃれば、もし参考になりましたら幸いです。


SVG画像を横幅100%・縦幅100%で背景に設定できないときの対応方法

2018.07.01

SVG画像を横幅100%・縦幅100%で背景に設定した際に、GoogleのChromeで見ると画像がコンテンツサイズに縮んでしまうという現象が起きました。

調べてみたところ海外の質問サイトに回答がありました。

background-size:100% 100%; doesn't work properly in Chrome

SVGファイルをテキストエディターで開き、「preserveAspectRatio="none"」というタグを、SVGタグ内に埋め込むことで解決しました。

<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1369.01 516.51"><defs><style>.cls-1{fill:#faf9f4;stroke:#c8ab8a;stroke-miterlimit:10;stroke-width:0.5px;}</style></defs><title>content_bg</title><polygon class="cls-1" points="1368.26 515.76 0.75 515.76 0.75 43.91 684.51 0.76 1368.26 43.91 1368.26 515.76"/></svg>

下記のページに詳しい解説が記載されています。

https://www.yootheme.com/support/question/6801?order=modified

もし同じような問題が起こっている方がいれば、ぜひ参考にして頂ければ幸いです。


12345

最新の投稿

お問い合わせ・お見積り(無料)






Contact