作品集
喜怒哀楽
DTP チラシデザイン（A4両面）＆地図作成
チラシA4表
チラシA4裏
A4両面のチラシを作成する課題
想定は、コールセンターEXPOでブースの来場者に配る資料として作成しました。見出しにはあえて業界用語を使うことでターゲットを絞り込み、具体的な申込みフローを載せ...
イラスト キャラクターデザイン
赤ちゃん女王様
初めてIllustratorでキャラクターデザインをしてみたものです。
アメコミ風イラスト
筆の太さの練習に作画しました。アメコミ風のキャラクターが好きです。
レギュラー・ショートボードでサーフィン...
バナー LP作成＆facebookページヘッダーデザイン
スマホリスティング集客セミナーへの誘導バナー、facebookページヘッダー、LPなど使用ツール：gimp、WordPress独学でやっていた頃の初期の作品
バナー
バナー
バナー
FBページヘッダー
無料セ...
バナー 電子書籍表紙＆facebook広告デザイン
電子書籍表紙
facebook広告用画像
ネット起業家さんからの業務委託で作成訓練校へ通う以前の作品使ツール：canva目的：無料コンサル及びメルマガ登録のLPへの誘導
バナー バナー（スポーツジム）
バナー
現役で活躍しているWEBデザイナーさんがアドバイスをくれる無料WEBセミナーで提出した作品制作時間：15分使用ツール：canva新規オープンの女性向けフィットネスのバナーを制限時間内に作るという課題新規入会0円キャンペーンL...
作品集 チラシ＆名刺デザイン（スナック）
A4チラシ
名刺
白馬村のスナック城様のチラシと名刺を作成しましたチラシは他に緑バージョン、名刺はピンクと青も作成しました（スタッフによってお好みで選択）この頃はGIMPを用いて原稿を作成していました
作品集 喜怒哀楽
訓練校の初期の課題。
女性4人の喜怒哀楽
合成写真とイラストで喜怒哀楽を表現するphotoshopでカラー写真をモノクロにし、それぞれ1点だけイメージカラーを着色したIllustratorのナイフ・ツールを使って文字を加工し、...
WEB基礎 Adobe XD
動作が軽いのが特徴。WEBサイトのプロトタイプを作るソフト。基本的にXDでは、
デザインプロトタイプ共有（クラウドを介してつながる）
の３つを行う。
ローカルドキュメントとして保存選択ツールにして、パス上でWクリック→ア...
WEB基礎 CSSのコーディング（sampleサイト1）
サンプルサイトのCSS。解説はコードの中にコメントアウトで記入した。
@charset "utf-8";
/* font
-------------------------------------------------...
WEB基礎 コーディング
サーバにアップするファイル名が基本同じなので、更新と更新前を分けるために、「index.html＋backup＋日付」という風にファイル名を変えて、上書きしないようにしてサーバに取っておく。（保証）style.cssは「style＋日付_...
illustrator イラレの効果とワープ、線幅ツール
効果
「効果」の中に様々な変形がある。効果は「fx」でプロパティに表示されている。その他、「効果」＞「ワープ」でワードやエクセルでお馴染みの感じにオブジェクトの形を変えることができる。
効果の一例
線幅ツール
バナ...
illustrator ナイフ,はさみ,消しゴムの違い
ナイフツール
ナイフツールは通り越すように切らないと、パスで分けられた領域にならない。予定より小さい破片などができたときは、パスファインダーで結合させたりして処理する。線があるものを切ったときは線端が予想外になることがあるので注意！...
illustrator イラレのグラデーションなどカラー
スウォッチ
カラーパターンを記憶させるには、スウォッチにドラッグすればOK。フォルダ分けするときには先にフォルダを作ってから、色を追加していく。スウォッチには色だけでなくパターン（模様）なども記憶できる。
RGBとCMYKの切...
illustrator イラレでの文字入力とアウトライン化
文字パネル関連の出し方
「ウィンドウ」＞「書式」＞「文字」「ウィンドウ」＞「書式」＞「字形」。これで現在のフォントに結びついた特殊文字一覧が出る
現在のフォントサイズの一つ上の数値が行間だと読みやすいといわれている。ex)フ...
illustrator イラレでトレースしてみよう！
トレース元ファイルの配置
「ファイル」＞「配置」でトレースしたい画像を選択「リンク」と「テンプレート」にチェックをいれてOKデフォルト鍵付きなので、鍵を外して「拡大・縮小」や「移動」ができる表示濃度を調整したいときは、レイヤーをWク...
illustrator イラレでハートと花を描く
ハートの描き方
shiftで正円を描くダイレクト選択ツールで上のアンカーをクリックshiftを押しながら下に引っ張る（まっすぐ下に凹む）altでハンドルをいじって、カーブを調整する（alt押すと片側だけハンドルいじれる）ハサミツール...
illustrator イラレで星やウニやバッジを描く
四角ツール
shiftを押しながらで正方形altを押しながらドラッグで中心点から作画クリックで数値入力の作画
多角形ツール
描くときにキーボードカーソルの上下で角の数を変えられる
スターツール
altで第二半...
photoshop ベクトルマスクを使ってパスで画像を切り抜く
切り抜き方法いろいろ
「被写体を選択（AI技術）」でいけたらラッキーツールバー左下にある「クイックマスクモード（疑似マスク）」で選択範囲を確認できるWクリックでオプションがでる「選択と範囲」でもいい気がする選択範囲をパスにする（後述...
photoshop リンクと埋込み，パペットワープ
リンクで配置する場合はサイズが軽くできるが、リンク切れに注意！埋め込みはリンク切れない代わりにファイルサイズが大きくなるので、どちらが良いかはケースバイケース。
パペットワープ
デフォルトでは表示されてないので「・・・」でドラ...
photoshop 画像加工（食べ物系を美味しそうにする）
画像を直接調整するツール（指のアイコンの裏に収納など）
ぼかしツール（こするとぼかせる）シャープツール（パキッとする＝やりすぎると劣化する）指先ツール（引っ張るようになぞると色が混ざりながらてろーんとなる）覆い焼きツール（しろっぽく...
photoshop 画像加工(レタッチ)
ラスタライズ
スマートオブジェクトを解除すること。元のビットマップ画像に戻る。スマートオブジェクトはデータが重い。
カンバスサイズの変更
「イメージ」＞「カンバスサイズ」で変更できる。相対にチェックを入れると、入力した数...
photoshop 画像加工（トリミング～切り抜き）
画像を扱うならはじめに…
大切な元画像を壊さないために！いつでもやり直しがきくように！！以下の手順を一番最初にやる習慣にする。（スマートオブジェクトは拡大縮小しても大丈夫な非破壊データ）
加工したい写真を取り込むレイヤーパネ...
WEB基礎 Adobe XD
動作が軽いのが特徴。WEBサイトのプロトタイプを作るソフト。基本的にXDでは、
デザインプロトタイプ共有（クラウドを介してつながる）
の３つを行う。
ローカルドキュメントとして保存選択ツールにして、パス上でWクリック→ア...
WEB基礎 CSSのコーディング（sampleサイト1）
サンプルサイトのCSS。解説はコードの中にコメントアウトで記入した。
@charset "utf-8";
/* font
-------------------------------------------------...
WEB基礎 コーディング
サーバにアップするファイル名が基本同じなので、更新と更新前を分けるために、「index.html＋backup＋日付」という風にファイル名を変えて、上書きしないようにしてサーバに取っておく。（保証）style.cssは「style＋日付_...
WEB基礎 デザインラフ
デザインには必ず意味がある。２提案するのは、そこをお客さんに気づかせてあげる。例えば、
ロゴ（画像）をH1にしてもaltとtitleで入れればSEO少しだけ弱まるけど十分OK
文字サイズ違うときはクラス使うもしくはlistの内...
WEB基礎 ワイヤーフレーム
ワイヤーフレーム（デザインカンプ）とは
WEBサイトのレイアウトデザインのこと。まず、何をしたいのか？を明らかにして、パーツを決める。時間をかけずにすり合わせることが大切。※イラスト・ピクトグラム・アクセスMAPなどはまだ作らない。...
WEB基礎 CSS基礎6(リスト,表,疑似要素)
list-style-type
リストの頭の装飾を決める。「none」で使って横並びにして、項目やメニューを作ったりすることが多い。
listはもともとblock。これをdisplay: inlineに指定することで、文字幅の...
WEB基礎 CSS基礎5(position,display,overflow)
position
効果は「座標をかえる」。コーディングをするときに、最後に書くといい。移動させたときは、元居たエリアは、詰められずに空いてしまうことに注意！
ブロックレベル要素でも、position使うと座標の概念が発生するの...
WEB基礎 CSS基礎4(float,clear：回り込み)
前提として、、、floatとclearは古のタグですが、知らないと過去のファイルを直せないので学ぶ。ボックスを横並びにさせるためのもの。
万が一、書いてるのに効かない場合は、横幅計算ミスが原因なことが多い！
はじめに
r...
WEB基礎 CSS基礎3(BOX-model)
CSSのバージョンは「レベル」と呼ぶ。使えるようになると言えるのはW3Cの「勧告候補」になった段階から。
UI/UXから考えるWEBサイト
最近は利き手と反対の手で方手持ち。よって、ボタンは下の方がよい。
更にスマホは縦...
WEB基礎 CSS基礎2(font,背景,コメントアウト)
font-family
フォントファミリー名は引用符で囲い、総称フォント名は引用符では囲わない各フォントファミリー名をカンマ（,）で区切って記述font-familyに複数のフォントを指定した場合、前に書いたフォントから優先的に適用...