こんにちは！tsuneです！
前回に雲の作り方①をしました！記憶にございますでしょうか？？
アンカーポイントを追加し、効果（膨張）で作るやり方ですね！
前回の記事のおさらいはこちらからお願いします！
それでは、もっともオススメする雲の描き方のもうひとパターンをご紹介します！GO！！！！٩( ‘ω’ )و

雲作成パターン②

①まず、前回同様に楕円形ツールで適当な大きさの楕円を描きます。(command＋L）

②次に同じ楕円ツールで先ほど描いた楕円の線に沿って大小様々な楕円を置いていきます。

③楕円を全て選択し、パスファインダーの合体をすると全ての楕円が合体してごちゃごちゃとしていた線がひとつになります。

いかがでしょうか？簡単に雲ができたと思います。後は楕円を積み重ねる過程でどんな雲にしたいかでカスタムをすると理想の雲ができます！

まとめ

前回、ご紹介した作成方法よりも膨張部分に規則性がなくなり、より雲っぽくなったと思います！
同じ方法で三角などを合体すると吹き出しになりますよ！！

投稿 ②Illustratorで雲を作ろう！ は SOSOGoo DIY STAND に最初に表示されました。

こんにちは！tsuneです！
以前、Illustratorでハートを作ろうをしました。今回は以前とは違う方法を使用して雲を作ってみます！
今回は2週にわたってお伝えしますね！私が雲を作る過程では２つあるのでそれをご紹介します！！！
それではGO！！！！٩( ‘ω’ )و

事前知識

それでは、雲を作る前に事前知識として名称等をおさらいしました。前回の「ハートを作ろう！」の冒頭で説明しているのでご覧ください。
Illustrator初見の方には事前知識がないと難しいかもしれません。

雲作成パターン①

①まず、楕円形ツールで適当な大きさの楕円を描きます。(command＋L）
②次にメニューからオブジェクト→パス→アンカーポイントの追加を選びます。
すると先ほど作成した楕円にアンカーポイントの点が増えていくと思います。
２回ほど繰り返しましょう！
ここまでの作業をすると画像のようになります。

③アンカーポイントが追加できた後はメニューにある効果→パスの変形→パンク・膨張を選びます。
今回は膨張の方に10％割り振ってみましょう！

すると画面内で楕円だったオブジェクトが雲型に変形するかと思います！
これで完成です！
方法がわかれば、後はアンカーポイントの数や割振り数で形を変えますのでお好みで作ってください！！

まとめ

それでは、来週にもうひとつのパターンをご紹介します！実は次週紹介します作成方法の方がおすすめです！
より自然に雲らしく出来ることと、自由度が違います！
それでは次週お会いしましょう！( ^_^)/

投稿 ①Illustratorで雲を作ろう！ は SOSOGoo DIY STAND に最初に表示されました。

こんにちは！tsuneです！
前回のBLOGで文字入力のショートカットキーを覚えたらかなり楽になったよ！という記事をあげました。
前回の続きと合わせて覚えておくと便利なショートカットキーをご紹介します！！
それではいってみよう！！٩( ‘ω’ )و

文字入力　その他

control＋Y：control＋Kで削除した文字を貼り付け
control＋O：カーソルの後ろに一行挿入
control＋T：カーソルの左側と右側の文字を入れ替える
F7:文字をカタカナにする
F8:文字を半角カタカナにする
F９v:文字を全角英数字にする
F10:文字を半角英数字にする

基本的なショートカットキー

command＋A：全てを選択
command＋C：コピー
command＋V：コピーしたものを貼り付け
command＋R：ブラウザでページの再度読み込み
command＋M：ウインドウを右下にしまう
command＋S：上書き保存
command＋Z：やり直し
command＋W：ウインドウを閉じる
command＋H：ウインドウを隠す
command＋shift＋4：スクリーンショット

まとめ

私が主力で使用しているのはこのくらいです！
使いながら覚える他ないですが、これだけでも随分楽になりますよ！
これからもどんどん覚えていこうと思います。作業効率をあげるとデザインにさける時間が増えますから♪
それでは、次のBLOGで！！

投稿 【初級】②文字入力がめちゃくちゃ楽になるショートカットキー は SOSOGoo DIY STAND に最初に表示されました。

こんにちは！tsuneです！
前回のBLOGでHTMLとCSSを本格的に学びはじめたよ！とご報告したと思います！
またその過程ですっごく便利なショートカットキーを発見してしまいました！
何故今まで使ってこなかったのか、、、、、、、、(^_^;)
この操作を知ってちょこっと使っただけで私的には文字入力の改革が起こりましたよ(笑)
それでは、いってみましょう！٩( ‘ω’ )و

文字入力　移動

以前の私は、←↑→↓キーやマウスを使用していました。(^_^;)
キーボードからいちいち手を離さないといけないので効率が悪くて悪くて、、、、、。
なので、上記のような方法でカーソルを合わせている方はそれを忘れましょう！

control＋F：カーソルを１つ右へ移動
control＋B：カーソルを１つ左へ移動
control＋P：カーソルを上に移動
control＋N：カーソルを下に移動
control＋A：カーソルを行頭に移動
control＋E：カーソルを行末に移動

文字入力　削除

control＋D：カーソルの右側の文字を削除
control＋H：カーソルの左側の文字を削除
control＋K：カーソルの右側文字から行末まで削除
option＋delete：カーソルの左側１文字とその後ろのスペース、句読点を削除

まとめ

今回は、このくらいでしょうか？？
またもや覚えるのが大変ですが、一文字ずつ移動・文頭文末に移動だけでも覚えておくとものすごく文字入力が楽になりますよ！
次のBLOGでは他のショートカットキーをご紹介しますね！
合わせて基本的なショートカットキーもあげておきたいと思います！
それでは！次のBLOGでお会いしましょう！(^ ^)

投稿 【初級】文字入力がめちゃくちゃ楽になるショートカットキー は SOSOGoo DIY STAND に最初に表示されました。

こんにちは！tsuneです！
今回は、私がIllustratorを触っていた当初に練習したハートの作り方をご紹介します！
初心者の方は簡単な形のものから作成していくと操作の仕方がわかりやすく覚えられると思います！
それでは、どうぞ！！！٩( ‘ω’ )و

事前知識

それでは、ハートを作成する前に、説明で使用する用語を確認します！

・アンカー：直線や曲線の始点と終点にあるア白い点のこと
・セグメント：アンカーポイントとアンカーポイントの間に引かれる線分
・ハンドル：アンカーポイントから引き出すことができ、セグメントの曲がり具合を制御します。

Illustratorで作成できるオブジェクトはアンカー、セグメント、ハンドルの部位からなりたっています。この３つを総称して『パス』と言います。

ハートの作り方！

名称もわかったところで、さっそくハートを作ってみましょう！
①ハートのした部分
まず、正円を準備しましょう。
楕円形ツール(L)でshiftを押しながらドラックすると正円が出来ます。
そうしたら、円型パスにアンカーが４つできると思います。
そのうちの下のアンカーをアンカーポイントの切り替えツール(shift＋C)で一度クリックし、ハンドルの伸びをリセットしましょう、
すると丸まっていた部分が鋭利になると思います。
鋭利になったアンカーをダイレクト選択ツール(A)で摘んで少し下に引っ張ってあげます。
これで、ハートのした部分は完成です！！！簡単！！！

②ハートの上部分
上部分は少し難しくなりますよ〜！
円の上にあるアンカーをダイレクト選択ツール(A)で下に引っ張ります。オススメは中央の少し上あたりです。
そうしたら、ハンドルの先についてる点をoptionを押したままダイレクト選択ツールで円の外側中央に引っ張ってください。
反対側のハンドルも同じようにしたらハートの出来上がりです！！！

ハートの作り方！

お好みのハートにするにはアンカーを引っ張る距離や位置、ハンドルの傾け方や位置で変わってきます。
是非、色々試して様々なハートを作成して見てください。
また、ハートの作り方はこの方法だけではありません。機会があれば、他の作成方法もあげたいと思います。
それでは！また次のブログで！！！＿φ(￣ー￣ )

投稿 Illustratorでハート作ろう！ は SOSOGoo DIY STAND に最初に表示されました。

こんにちは！tsuneです！
今回は、Photoshopの画像加工に関してです！
ウェブ制作などでは細かい編集がつきものですよね？しかし、それは画像の劣化を伴います。
そんな時はスマートオブジェクトを使用すると便利です♪
劣化だけでなく、後々のため編集しやすいデータを作成することもできます。
それでは紹介をどうぞ！

スマートオブジェクトとは

配置またはペーストされた画像を、元の画質を保持したまま編集や拡大・縮小、回転、ワープができます。
スマートオブジェクトの主な性能として3つにまとめると、
・データを劣化させること無く変形ができるため、直しに強いデータ作成が可能です。
・1つのスマートオブジェクトを編集すると、デザイン内に配置された全てのコピーが自動的に更新できます。
・「スマートフィルター機能」で調整や削除などが可能です。

今回は劣化なく直しに強いデータ作成についてまとめていきます。

劣化なく加工

劣化をなくすには、画像をスマートオブジェクトに変換しなくてはいけません。
レイヤーの画像を選択し、上のメニューからレイヤー→スマートオブジェクトを選択するだけです。
すると選択した画像のアイコンの右下にマークがつきます。これでスマートオブジェクト化完成です！
そのまま

スマートオブジェクト化

このマークがついたら拡大縮小しても画像の質はそのままに保たれます。
そのまま

スマートオブジェクト化

まとめ

普段から大変お世話になっている機能ですが、特にロゴデザインの時などスマートオブジェクトはいいですね！
サイトに合わせて微調整するため、この機能がないと倍以上の時間がかかります。
そのほか、スマートオブジェクトwの機能はあげていきたいと思います。

投稿 【初級】Photoshop：画像劣化なく編集！ は SOSOGoo DIY STAND に最初に表示されました。

今回は、アクセントカラーについてお話しします！
イラストでもグラフィックデザインにしろ配色した時になんだかメリハリがないなぁと感じたことはないでしょうか？
実は、ちょっとした法則を活用するだけで簡単にメリハリはつけられるのです！

アクセントカラーとは？

まず、何か配色をする時に気をつけて欲しいのは色を多用しないこと。
色の扱いに慣れていないときは沢山の色を入れてしまうと互いの色同士がケンカをします！
まずは３色から取り掛かるのがベターですね！その三色にも役割があります。

メインカラー
もっとも大きな面積を占める基本となる色のことです。全体の70％程になるので主に余白や背景に使用します。

サブカラー
ベースカラーとアクセントカラーを引き立たせる中立的な色となります。割合的には25％程です。ベースカラーと同じ系統か隣り合った色を合わせると統一感が出ますよ♪

アクセントカラー
今回のブログの目玉ですね！アクセントカラーは全体の僅か5％で十分です！デザイン全体の雰囲気を一気に締める効果があります。
選ぶ色のオススメはベースやサブカラーの補色です。色相環で選んだ色から180度に位置する色のことを言います。
例えば、赤の補色は緑、黄色の補色は青となります。

実際に見比べてみる。

青と水色、赤と黄色のように同系色でまとめていた２パターンのバナー(左画像)をアクセントカラーの赤と緑をささやかに入れました！
いかがでしょうか？右の画像の方がなんとなく色としてのバランスがいいように見えるかと思います！

また、バナーは一瞬で興味を引いてもらわないといけない媒体なのでこの配色は有効的です。
遠くから見てもボタンの位置や伝えたいことに目を留めてくれる効果があるます。

まとめ

アクセントカラーで補色を使用する方法はすぐに取り入れてもらえる手法かと思います！
この他にも沢山の配色方法があり、場面で使い分けることが大切となってきます。
配色の種類は検索すれば沢山説明がヒットします。その中から条件にぴったりの配色を見つけて真似して見て下さい。
数をこなす内に感覚がわかってくると思います。
単純に配色にもその年、その年で流行があるので取り入れてみるのもいいかもしれないですね(o^^o)

投稿 配色の決めて！アクセントカラーについて は SOSOGoo DIY STAND に最初に表示されました。

・自分がデザインした作品はなんだかかっこ悪いなぁ。
・なんだかバランスや配置が悪く見える

こういった悩みは文字のバランスを直すだけでも劇的に改善されます！

文字のバランスとは？

実は、テキストツールで表示される文字はバランスの調整がされていません。
また、私たちの視覚は文字を様々な形と大きさで見ているため調整してあげないとバランスの悪く、違和感のあるデザインになってしまいます。

「文字同士の幅による調整」

※一概に同じ幅がいいというわけでなく、その時々の文字の特徴によって幅は変わります！
要は、データ上で綺麗にするのではなく視覚的に文字を美しく配列するということです！

「文字の形による調整」

まとめ

文字の調整を行うことができるようになれば、スキルアップは間違いないでしょう！！
そして、それが応用へと繋がっていくのです！d(￣ ￣)
デザインする上で文字の美しさと読みやすさを現すことは必須条件となります。
日常的に意識して調整していると誰でも会得できるバランス感覚なので是非、活用してみてください！

投稿 文字だけでデザインが変わる！ は SOSOGoo DIY STAND に最初に表示されました。