クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

デザトレ の検索結果:

【デザイン】基本がわかる6記事(メリハリ、縦横比率、画面分割、タイポ、色相環、配色)まとめ

…ール「Adobe Color CC」のおかげでブログ内の図が作りやすくなりました。 ※参考:Figma: the collaborative interface design tool. ※参考:Adobe Color CC これがあればCodePen感覚で気軽にデザインができます! デザインを諦めない!ということで、中断していた「デザイン模写」を再開しようと思っています。(このブログのルーツネタです) ※参考:デザトレ の検索結果 - クモのようにコツコツと それではまた。

デザトレ015 ランダムシームレスパターン

デザトレ015 ランダムシームレスパターン 前回の方法では四隅に余白ラインができてしまう。シームレスにするにはどうするか。 予め決めた四角の中に要素を入れる際、線をはみ出した時点で反対側に複製する(四角の距離分)。角にかかる場合は四隅。 四角でトリミング後に複製するとランダムなシームレスパターンになった。 ただし、そのままだとキッチリ等距離に同じ要素があって機械的な印象を受けた。 複製後に全体を傾けて角度を付けると印象は緩和された。(複製前に角度を付けると45度などキレイな角…

デザトレ014 自作パターン1

デザトレ014 自作パターン1 家紋研究の鳥再登場。 4つに複製して1つ分の四角をセンタリングしてトリミングするとシームレスなパターンになる。 パターン #pattern

デザトレ013 家紋研究その5

デザトレ013 家紋研究その5 今回は72度5分割に絞って実験。 はじめガイドラインを作る。ガイド範囲内ならどんなに複雑な形でも成立する。しかしそれでは限定的…。 ためにし三日月を拡大してガイドからはみ出してみる。左は上側、右は下側にはみ出るが重ならずに成立する。同じようにいくつか作ったが鳥とS字が重なってしまう。 まず鳥を検証。下側は隙間が少なく、ここが重なる。調整したら重ならなくなった。両者を左右反転してみると後者は隙間があることがわかる。 次にS字、最初に左右反転して検…

デザトレ012 家紋研究その4

<p>デザトレ012<br> 家紋研究その4 先ほどの鈍角であれば、曲線でも重ならないのでは、という実験。重ならなかった! 7本だけないなぁ、とか菊十六紋の16本がない!という理由から整数じゃない角度も追加。 また、本数が多すぎるとかけた労力に対して印象があまり変わらないので、そっちを削りました(笑) やってみてわかったのは、角度が整数かどうかは美しさには関係ない。また、13本、17本など一見半端な奇数の本数でも美しさは感じられる。 意図してないけど最後らへんはなんか花っぽく…

デザトレ011 家紋研究その3

デザトレ011 家紋研究その3 角度が鋭角だと重なるのではないか?という仮説を元に、90度未満の鈍角にしてみた。 線の太さの関係でくっ付いて見えるが、最後まで重ならなかった! デザイン #家紋 #シンメトリー #design #kamon #famlycrest #symmetry

デザトレ010 家紋研究その2

デザトレ010 家紋研究その2 1本線であればどんな角度を付けても重なることはないのではないか?という仮説をもとにいくつか頂点を加えてみたところ、72度の時点で重なり発生。 あと、だんだん本数が増えると結局みんな円になってしまうのかも知れない。 デザイン #家紋 #シンメトリー #design #kamon #familycrest #symmetry

デザトレ009 家紋研究その1

デザトレ009 家紋研究その1。 家紋は上下左右シンメトリーなど、回転させた形が多い。 自作するに当たり、どういう角度を入力すべきか。 360度を整数で割り切れる数を調べたところ24種類あった。 まずは直線に対してその角度を入力してみた。 最後の方は直線でもへんなモアレ模様が出る。NHK放送終了後的な。これは現実的ではない角度。 デザイン #家紋 #シンメトリー #design #kamon #Familycrest #symmetry

デザトレ008 グランジ風テクスチャ文字

デザトレ008 自宅は非Adobe環境につき、そこでグランジ風テクスチャを再現できるかテスト。 デザイン #タイポグラフィ #テクスチャー #グランジ #design #typography #texture #grunge

デザトレ007

デザトレ007 インバウンド向けリーフレットより 被写体や配色がとても和風でいい感じ。 また、被写体の形がそれぞれ違うので文字の配置もそれに合わせて変わっている。 文字のジャンプ率は低く、上品。 フォントはゴシック体だが、読みやすさ重視か。 デザイン #design #配色 #colorscheme #レイアウト #layout

デザトレ006

デザトレ006 アートブックフェアのチラシより。 写真をモノクロにすることで赤い文字一色が際立つ。 右の人物とかぶらないように大きな文字が配置されていて、顔と作業する手元がその文字へ視線を誘導させる。アンダーラインが文字をさらに強調している。4文字は読み順がわかる程度の範囲でランダムに配置されている。 その他の文字はかなり小さく、ハッキリしたメリハリになっている。 こうした大胆なタイポグラフィはスイススタイル? デザイン #design #配色 #colorscheme #レ…

デザトレ005

デザトレ005 バナー広告より。個人的なミニマムなものを好むのでこのような楽しいデザインも身につけたい。 文字の傾きが動きを出していてサイズのメリハリもすごくハッキリしているデザインですね。 後ろの花火のような装飾も祭り感を出していて賑やかです。何気に読み始めの一文字目が花火の中心になっています。 色相的にはメインのピンクとアクセントの緑は補色ですが背景の紫はピンクの近似色。どれも濃いトーンで目に飛び込んで来るので白フチで分かれています。 デザイン #配色 #レイアウト #d…

デザトレ04

デザトレ04 バナー広告より。 緑色の配色を研究したくていろいろ見たが、緑系統だけで差し色がないケースが多かった。 差し色がある例では補色の赤(クリスマスぽい)よりもオレンジを差し色にしている物が多い気がする。 大きい文字には黄色を使ったり。 デザイン #配色 #レイアウト #design #colorscheme #layout

デザトレ03

デザトレ03 某ファッション雑誌のフリーペーパーより。 雑誌名が頭の後ろのにあったり、下のコピーが女性に合わせて曲線上に配置されている。 背景の色は女性の大きなスカートで、口紅も同色。タイトルの金色がアクセントになっている。 デザイン #配色 #レイアウト

デザトレ002

デザトレ002 某飲料の昨年のキャンペーンのカバーです。 この青と緑が混ざった色味が昔から好きで、日本だと浅葱色?西洋ではターコイズ?小学校のときに近所のお姉さんが乗ってた日産パオ。それ以来の片思いなんです。この色。 デザイン #配色 #レイアウト

デザトレ01 デザイン模写

デザトレ、やっと開始できた。レイアウトや配色の引き出しを増やすことを目的とする。 文字は基本的には「あ ぁ ア ァ 亜 A a 0」絵や写真のトリミングのコツもつかみたいのだが、今回すら具体的に再現しすぎたかも…。もっと抽象的でもいいのかも?数増やしたいので、より時間のかからない方法を模索したひ。 ※参考:インスタでデザイン模写やってます! イイダリョウ (@idr_zz) • Instagram photos and videos