月: 2022年12月

2022年12月12日 コメントする

12月12日（月）－グラフィックデザイン基礎②Photoshop

※習慣づける

・ファイルから開く（加工したい写真を取り込む）
・レイヤーパネルで複製
・右クリックでスマートオブジェクトに変換（非破壊データ化）
・背景のレイヤーを非表示（+ロック）
・PSDで保存　→　加工していく

選択範囲

・選択範囲取ってから、Shift（カーソルが＋₊）で範囲追加、Alt（カーソルが＋‐）で範囲削除できる
・Ctrl+Dで選択解除

・なげなわツール→自由に指定できる

・多角形選択ツール→直線で範囲指定したいときに便利（PC画面やテレビの枠など…）
ポチポチクリックしていく、終わらせるときは範囲を閉じるかWクリック

・マグネット選択ツール→自動で選択する（判定ゆるめ）

・オブジェクト選択ツール→AIが判断してピンクのオーバーレイが表示される
→クリックすると範囲指定される（判定ゆるめ）
※使用時は画面上部「オブジェクトファインダー」のチェックを入れること
ツールバー下部の「クイックマスク」や左上「選択とマスク」画面で細かい部分を調整する

・クイック選択ツール→ドラッグしていくと範囲指定できる

・自動選択ツール→クリックで範囲指定（許容値を変えて調整する）

【その他】
・移動ツール→レイヤーの位置移動や別タブからレイヤー移動もできる

・切り抜きツール→ボックスで調整してEnterで切り抜きできる

レイヤーマスク

スマートオブジェクト化したレイヤーを加工せずにマスクで部分隠しができる
やり方：選択範囲を指定後→レイヤーパネル下部「レイヤーマスクを追加」
非表示にした部分が黒塗りでサムネイル表示される

細かく調整する場合、マスク側のサムネイルを選択し、ブラシで塗る（白＝削除、黒＝マスク部分を増やす）
白～黒で表現し、グレーなど中間色は半透明になる（グラデーションツールも使用できる）

WEB用に保存

ファイル→書き出し→「web用に保存（従来）」（Alt+Shift+Ctrl+S）
左上「プリセット」→JPG（高）、画質60などで保存（画質20くらいだと荒れる）

メモ

・ctrl+Tで変形

・ファイル保存名は、「クライアント名_lpやbannerなど商材名_日付.jpg」等が管理しやすいとのこと

・レタッチは数をこなす
うまくいかない写真はパスする（1時間以上はかけない）
いくつかこなすとパターンが分かってくる

・練習のときは小さい画像（作業が軽いので）、仕事のときは大きい画像（拡大すると荒れるため）

・ウィンドウタブの「オプション」を表示させると作業しやすいとのこと

練習作品

対象物によってツールの合う合わないがあったので、練習してパターンを見つけていきたいと思いました。

2022年12月7日 コメントする

12月7日（水）－CMS構築基礎②WordPress／Illustrator／Photoshop

WordPress：テーマの選定と切り替えウィジェット
Illustrator：基本操作の復習
Photoshop：選択範囲とレタッチ

WordPress：テーマの選定と切り替えウィジェット

・テーマの変更
外観→テーマ→新規追加→右上検索ボックスに、変えたいテーマの名称を入力し検索、インストールし有効化
Wordpress内にない場合、外部サイトでZIPファイルをダウンロードし、「テーマのアップデート」でZIPファイルをアップロード→有効化

・ウィジェット
サイドバーやフッターなどに表示されるカレンダーや検索ボックスなどのパーツ

Illustrator：基本操作の復習

Illustrator→ベクターイメージの編集ソフト
パスで作られる作品：アンカーポイント（点）同士をセグメント（線）で繋いで作成する

◆ペンツール…パスを描くツール
ハンドルを使用し曲線の角度や向き、長さ等を自由に変えられる
ハンドルの作り方→ペンツールでクリックしたままドラッグ
ハンドルを動かす方法：△ダイレクト選択ツール

・パスを閉じずに線を描き終える場合は、Escキー（オープンパス）
・パスを最後まで閉じたもの（クローズドパス）

Photoshop：選択範囲とレタッチ

Photoshop→ビットマップ画像編集ソフト

基本操作

【最初の操作】
①元の画像レイヤーは鍵をつけて非表示にして保存しておく（復元するときのため）
②コピーしたレイヤーはスマートオブジェクト化しておく
スマートオブジェクト：画像を縮小→拡大などするとガビガビになってしまうので、必ず変換しておく
（レイヤー右クリック→スマートオブジェクトに変換）
※レタッチ作業はスマートオブジェクト状態だとできないので、ラスタライズ（スマートオブジェクトでなくすること）する
③PSDデータで最初に別名保存しておく
→この後作業を行っていく

【選択範囲】
Illustratorと同じように、ペンツールを使用し選択範囲を設定できる

【レタッチ】
・スポット修復ツール（クリックで不要物を消したりできる）
・修復ブラシツール（Alt押しながらクリックでコピペしたりできる）
・コンテンツに応じた修復ツール　など

補足

・ZIPファイルの開き方
ダブルクリックではなく、右クリック→「すべて展開」

・無料画像サイトを使用する際は規約をよく確認する
（PAKUTASOは使いやすそう）

【ポートフォリオについて】
・作品のクオリティを高くし、バランスを均一にする
（作品数のために自信のない駄作を載せてバランスを下げない）

・作品作成時は情報を残す
使用ツールや作業時間、何に気を付けて作成したか、アピールポイントなど
※クオリティを判断するのは作成者ではなく閲覧者なので、「よくできたと思います」などの感想は不要

・訓練記録だけでなく、作品ページを充実させる
新しい投稿が上になり、古い投稿は下に流れていく＆文字の記録ばかり表示されると実績（どんな作品を作っているのか）がわかりづらい、作品作成ペースが遅い（少ない）とも見えてしまうため
授業以外での自習作品や、以前に作った個人的な作品もポートフォリオには載せてOK

2022年12月6日 コメントする

12月6日（火）－グラフィックデザイン基礎①Illustrator入門

ファイルの保存について

・ファイル名は拡張子、半角英数字（小文字統一）のみ
・記号はハイフンかアンダースコアのみ（スペースなども不可）
・授業では「task_〇〇〇〇（名前）_20221206.pdf」のような感じで保存する

Illustratorの基本操作について

・アートボード→白い作業分
・バウンディングボックス→青色の四角い選択部分

・正方形→シフト押しながら四角形
・シフト押しながらサイズ変えると、縦横比を保ったまま拡大縮小できる
・多角形ツール押しながら矢印使うと多角形の角が変わる（↑で角数増、↓で減る）

・黒矢印（選択ツール）はオブジェクトをそのまま動かせる
・白矢印（ダイレクト選択ツール）はオブジェクトの一部分を細かく動かせる

・レイヤー、名前の管理、順番の変更
・パスファインダーについて（オブジェクト同士で形を変形したりできる）

・Ctrl+C→Ctrl+Fで同じ位置にコピペ
・複数のオブジェクトをグループ化したい場合、Ctrl+Gまたは右クリックでグループ

保存について

元のAIデータを必ずこまめに保存する（クラッシュしやすいので）
※授業提出用でPDFで保存する場合、先に必ず元のAIデータ保存
→別名保存→PDF選択→アドビPDFプリセット→一番下の「最小ファイル」でPDF保存
保存後はPDF状態で開かれてしまっているので、操作してもAIで保存できないので注意
必ずPDFではなくAIデータを開いて操作再開する

練習作品

2022年12月5日 コメントする

【企画】ポートフォリオサイトの制作イメージ

【制作のポイント】

・訓練校の6ヶ月の成果と自身の自己表現を掛け合わせた作品の方向性をまとめる。
・就職活動を意識した構成を心がける。

【目的・ビジョン・コンセプト】

フィンランドの紹介や、グッズ・軽食販売をしているお店をイメージしたサイト

目的

風景、食べ物、デザイン、サウナや暮らし方、おもしろい言葉など、遠いフィンランドの世界を楽しんでもらいたい

コンセプト

北欧チックな木や緑、湖や白色など暖かくナチュラルな風合いのサイトデザイン
メインのフィンランドの紹介ページの他に、小さなグッズや飲食スペースのある販売店がある想定で、架空のお土産やフード、アクセスマップや名刺・バナー作成

（気になる点）

  • 店内画像はPhotoshop等で適当に描いたものまたは、食べログなどのお店の画像を使用したい
    もしくは自分でお店に撮影に行き、掲載許可いただく必要あり？
  • ムーミンバレーパークや水元公園、IKEA、フィンランド料理のお店やマリメッコなどの写真や商品写真使用してOK？
  • 基本自分で撮りに行かなければいけない？
    （※あまり行ける余裕がなさそうなので）

→【先生より】※うろ覚え
基本的にアウトだけど、商用でなく課題制作なのでグレー？謝辞など載せればOK（とのことだったような…要再確認）

 

【ターゲット】

フィンランド、北欧、旅行が好きな方

【タイトル】

Hygge‐フィンランドの暖かい暮らしの雑貨や優しいごはんのおみせ

【見出し1】

フィンランドの暖かい暮らしやデザイン or フィンランドの穏やかで幸せな暮らし

 

【ページ構成】

🎅About　フィンランドとは

簡単に国の位置や公用語、人口、国のイメージなど

🎄風景

小分類：各町の雰囲気、湖、山、サウナ、サンタクロース村など

🥖食べ物

小分類：ベリー、サルミアッキ、お酒、コーヒー、パン、チョコレートなど

👗デザイン

小分類：ムーミン、マリメッコ、アアルト、イッタラ、アラビアなど

🛁サウナや暮らし

小分類：自然や受け継いだものを大事にする文化、1日4～5食やコーヒー重視の食文化
サウナやキャンドル、ヤンテの掟という考え方、働き方など

👧おもしろい言葉や文化など

小分類：基本のあいさつなど、日本語に似た言葉、カルサリキャンニトという文化など

☕架空のショップ情報

小分類：お土産案内、軽食メニュー、営業カレンダー、アクセスマップ、バナーなど

 

【ポイント①】

遠い国のフィンランドを身近に感じてプチ旅行した気分になってもらいたい

【解説】

写真を交えながら紹介し、日本にも同じ空気を味わえる場所があります（→ムーミンバレーパーク等）などの紹介もして、旅行気分で楽しめるサイトを作りたい

 

【ポイント②】

意外と日本人と似ているフィンランド人の性格や、おもしろい言葉などの紹介

【解説】

実際に行ったこともフィンランドの人との関わりもないので、本やネットの受け売りになってしまいますが、
おもしろかった情報を載せたいと思っています。
※情報収集がメインではないので、ふわっと軽く調べる予定です。

 

【ポイント③】

架空のグッズ、飲食ブースのあるお店もあるイメージで作る

【解説】

デザインソフトの練習も兼ねて、グッズや料理イメージ、メニュー、アクセスマップなども作成したいと思っています。
※軽食メニューや店内画像などの用意が難しい場合、省いてグッズ販売のみの設定にするなどの可能性もあります。

 

【参考サイト】

◆サイトイメージ参考サイト

⛄北欧ギフト雑貨トムテ | 南行徳のかわいい雑貨屋さん
URL：https://tomte-web.com/

⛄Mikon Finland Shop & Cafe | 北欧フィンランドのプロがお届けする、通な雑貨屋さん
URL：https://mift.net/

※サイト内商品画像を使用したいと考えているサイト
⛄北欧雑貨 Rallissa ラリッサ ネットショップ
URL：https://rallissa.theshop.jp/

⛄北欧料理リラ・ダーラナ
URL：http://dalarna.jp/

 

◆情報参考予定サイト

⛄今日から使える！北欧の国々の１０の特別な言葉たち ? Project Nord (JP)
URL：https://projectnord.jp/blogs/nordic-lives/nordic-10-special-words

⛄フィンランド公式トラベルガイド　VisitFinland
URL：https://www.visitfinland.com/ja/

⛄フィンランド共和国｜比べてみよう！世界の食と文化｜株式会社 明治 – Meiji Co., Ltd.
URL：https://www.meiji.co.jp/meiji-shokuiku/worldculture/finland/

⛄フィンランド観光おすすめランキング｜海外旅行のSTW
URL：https://stworld.jp/feature/FI/tourism/

⛄フィンランド「見逃せない」観光地16選！名物料理、夏・冬の楽しみ方も教えます！ | 旅Pocket
URL：https://www.tabikobo.com/tabi-pocket/europe/finland/article39143.html

⛄フィンランド観光特集 | 北欧旅行フィンツアー
URL：https://www.nordic.co.jp/finland/

2022年12月5日 コメントする

12月5日（月）－CMS構築基礎①WordPress入門

CMSについて

CMS（コンテンツ マネジメント システム）は、HTMLやCSSなどの専門知識が無くてもWebサイトの作成・更新・維持が行えるシステム

WordPressについて

WordPress(ワードプレス)は、ブログやサイトを作成できるソフト。世界中のサイトの約3分の1、CMSのうち65％はWordPressで作られていて、日本国内でも、個人ブログだけでなく、企業や公共機関のサイトなどに幅広く利用されています。

【基本の操作方法】


設定

◆一般設定→【サイトのタイトル】【キャッチフレーズ】は自由に変更OK
キャッチフレーズは、検索したときにサイトタイトルの下に表示される文章

※【WordPress アドレス (URL）】～【管理者メールアドレス】までは触らないこと
【日付形式】【時刻形式】【週の始まり】は自由に変更してOKとのこと

◆パーマリンク→【設定→パーマリンク】
パーマリンク構造でURLの表示方法を変えられるが、記事内でリンクしている場合、URLが変わると無効になってしまうので、変更は最初だけにしておいた方がいいとのこと（別に問題なければ変えてOK）

投稿

◆【Shift+Enter】で段落内の改行
◆文字を選択し、【∨→ハイライト】で指定の文字色の変更
◆右上の設定マーク→【色→背景】でブロックの背景色の変更
◆↓リストの表示（・または1、2…）

  • あああ
    いいい
    ううう
  • いいい

◆表組み
【+】で【テーブル】を追加で表作成（追加や削除も可能）

商品数量単価
リンゴ10100
みかん550
バナナ1010

◆メディアライブラリ

画像を使用する場合、直接貼り付けでなく、先にメディアライブラリにアップロードして使用し、ダブりなどがないように管理する方がいい（サーバーに同じ画像が溜まってしまうため）

◆アイキャッチ画像

投稿記事のアイキャッチ画像

◆画像挿入、ギャラリー挿入

並べて表示させたいときは、ギャラリーで挿入
補足：枚数によりバランスが悪く表示されてしまうが、透明画像を用意するとちょうどよく表示されるとのこと

◆カテゴリー

カテゴリーで記事を分類できる

◆タグ

タグでより詳細な分類ができる、同じタグ内容で記事を後から探し出せる

固定ページ

投稿ページと違い、メニューなどで自発的にリンクさせないと見えない
投稿ページのように流れていく内容というよりは、例えば「企業情報」「採用情報」などのような普段あまり内容が動かないが、ずっと目に付くようなページで使用する

メニュー

【外観→メニュー】→【メニュー構造→メニュー名→メニュー設定→メニューを作成】でテーマ毎に表示位置が多少異なるが、上部やサイド、下部などに表示される

テーマ

テーマのデザインを自由に変更可能
Cocoon、FUKASAWAなどが有名とのこと
基本無料のものしか表示されない（有料の場合は、直接その配布サイトでDLする場合に支払いをする必要がある）

感想

WordPressはまだわからない部分も多いですが、機能がたくさんあって面白く、これからコツコツ覚えていきたいと思います🔥