ざわ / Webデザイン学生

職業訓練校でWebデザインを勉強しています。勉強の過程やWebに関することを日々アップ…

ざわ / Webデザイン学生

職業訓練校でWebデザインを勉強しています。勉強の過程やWebに関することを日々アップロードしていきます☀ 台湾茶、ヨガ、散歩が趣味です🏝 【Instagram】 https://www.instagram.com/zawa_webdesign

【レポ】 関西最大のお茶イベント・吉田山大茶会にいってきました！

先日、吉田山大茶会という関西最大規模のお茶イベントに行ってきたので、その内容をレポートしたいと思います！ この吉田山大茶会というイベントは、京都左京区の吉田神社境内にて行われる屋外のイベントです。毎年6月初旬の土日に開催され、お茶席や茶葉の販売などの計30店舗ほどのお店が境内に立ち並びます。日本・中国・台湾・韓国・その他アジアのお茶など様々なお茶を楽しむことが出来ます。 入場料は無料で、各店舗のお茶を試飲して回ることができます。お茶席は店にもよりますが500〜800円程で

ざわ / Webデザイ…

    • 【Photoshop】わずか数秒！簡単な操作で表情を変える

      今日はPhotoshopの「ニューラルフィルター」の「スマートポートレート」という機能を使って、素早く簡単に人物の顔の表情を変える方法を勉強しました。 ニューラルフィルターとは？ニューラルフィルターとは2021年からPhotoshopに追加された新機能で、これまでは時間かかっていた複雑な画像処理をAI技術を使って素早く、かつ簡単な操作で実行する機能のことです。 ニューラルフィルターの主な機能以下、ニューラルフィルターの主な機能の一覧です。 ６,スマートポートレート以降はベ

      ざわ / Webデザイ…

      • 【DIY】格安の無垢材でPCデスクをDIYしてみました！

        今回は先月の4月に自宅のPC用のデスクをDIYした時の記録をまとめていこうかと思います。 かかった総予算は約１万２千円！ 天板(杉カフェ板3枚)　 4257円 鉄製テーブル脚　　　 7000円 鉄製L字アングル　　　 400円 ビス　　　　　　　　 150円 工具レンタル料金　　 300円 木材カット料金　　　 　 44円 PC用のデスクをDIYした理由は気に入ったデザイン・サイズ感の既製品が無かったためです。デスクを自作すると聞く

        ざわ / Webデザイ…

        • 【HTML・CSS】エメットの学習

          今回はHTMLで使用するエメットについて書いていきたいと思います。 今回の記事は自分の学習記録・備忘録のために書いたものです。 以下のサイト参考にしました。（今回の記事は下記サイトをほぼ丸写しさせてもらったものです！自分のオリジナルの文章・項目もありますが…） こちらの方が詳細に説明をされていますので良かったらリンク先にもジャンプしてみてください。▼ エメットとは？HTML CSSを省略して記述できるツール・プラグイン。 英語版のwikipediaを翻訳してemmetの

          ざわ / Webデザイ…

        【レポ】 関西最大のお茶イベント・吉田山大茶会にいってきました！

        ざわ / Webデザイン学生

          【Twitter】自動化ツールについて調べてみた。

          今回の記事ではTwitterの自動化ツールについて調べたことをざっくりまとめてみました。 きっかけ就職活動用のTwitterのアカウントを作って２週間ほど経つのですが、アカウントを作成した当日に一気にフォロワーが10件ほど増え、その後も１日１件程のペースでフォローされる状態が続いています。ちなみに自分からフォローしているアカウントはデザイン関連やWEB関連の教養になりそうなアカウントで、相手からフォローバックされてはいません。 これまでもTwitterを利用していましたが

          ざわ / Webデザイ…

          【Twitter】自動化ツールについて調べてみた。

          ざわ / Webデザイン学生

          【Adobe Express】無料！簡単！テンプレートデザインアプリ。

          今日はAdobe Express（旧称Adobe Spark）を使ってみた感想をレビューしてみたいと思います。 Adobe EpressとはまずAdobe Epressについての説明ですが、Adobe社がスマホ・PC用に提供しているデザインアプリです。豊富な種類のテンプレートから気に入ったものを選び、文字や背景を差し替えて自分の好みのデザインに仕上げることができます。 驚くことにAdobe IDに登録するだけで基本的に無料で使用できます。 有料版と比較してテンプレートの数

          ざわ / Webデザイ…

          【Adobe Express】無料！簡単！テンプレートデザインアプリ。

          ざわ / Webデザイン学生

          【Photoshop】立体文字を作る

          今日はPhotoshopで立体文字を作る方法を勉強しました。 ちょうど１週間前に書いた自分の記事でも似たような内容を取り上げていたんですが、より簡単な方法があることに気づいたので今回やり方をまとめてみました。（少し文字の見た目は違いますが…） まず「横書き文字ツール」でテキストを入力していきます。 今回は太めのフォントで３Dという文字を入力しました。 次に先ほど作った文字のレイヤーを複製します。 レイヤーパネルのテキストレイヤーの右の余白部分を右クリックします。 そこで

          ざわ / Webデザイ…

          【Photoshop】立体文字を作る

          ざわ / Webデザイン学生

          【Photoshop】簡単に文字を変形する方法

          今日はPhotoshopで文字を変形させる３つの方法を勉強しました。 「ワープテキスト」で文字をアーチ状にする 「ゆがみ」で文字を傾ける。 「遠近法」文字に奥行き間を付ける １.「ワープテキスト」で文字をアーチ状にするまず変形させたいテキストを入力します。 次にてて「ツールパネル」の「文字ツール」を選択した状態で画面上部の「ワープテキストを作成」をクリックします。 クリック後に「ワープテキスト」パネルが出現します。 今回は「スタイル」部分は「円弧」を選択します。

          ざわ / Webデザイ…

          【Photoshop】簡単に文字を変形する方法

          ざわ / Webデザイン学生

          【Web知識】画像データの拡張子

          今回はWebデザインで扱う画像データの拡張子についてまとめたいと思います。確認しやすいようにそれぞれの特徴を箇条書きで書いていきます。 JPEG（ジェイベグ）(Joint Photographical Experts Groupの略) 拡張子　jpg jpeg 背景の透明が表現できない モスキートノイズが出る場合がある フルカラー１６７７万色 非可逆圧縮 ビットマップ画像(ピクセル) EpsonやCannon等のスキャナーを使用しjpegファイルを保存した場

          ざわ / Webデザイ…

          【Web知識】画像データの拡張子

          ざわ / Webデザイン学生

          【休日】はだしでハイキング

          ベアフットハイキング・ランニングという言葉を聞いたことはあるでしょうか？ ベアフット(Barefoot)は裸足という意味で、裸足でハイキングやランニングをする活動やイベントが近年じわじわと人気を集めているようです、ちなみに僕はこれまで全く知りませんでした！ ベアフットランニング協会といった団体もあるようです。 以下、協会のリンクです。 裸足で歩く・走ることの利点として 全身のバランスが良くなる 慣れれば膝の負担が軽くなる アーシングできる など様々な良い効果があ

          ざわ / Webデザイ…

          【休日】はだしでハイキング

          ざわ / Webデザイン学生

          【HTML ・CSS】ページ上にアイコンを配置する

          今日は学校でMaterial Icons(Google Fonts Icons)を使用してアイコンをページ上に配置する方法を学習しました。 アイコンを配置する方法は主に以下の２つの方法があるようです。 HTMLで記述する CSSの疑似要素で記述する まずは「1. HTMLで記述する」の方法についておさらいしていきます。 1. HTMLで記述する最初にheadタグの中にアイコンの表示に必要なスタイルシートの設定を記述していきます。 ここで注意しないといけない点が

          ざわ / Webデザイ…

          【HTML ・CSS】ページ上にアイコンを配置する

          ざわ / Webデザイン学生

          【Photoshop】服の色を変える方法

          今日はPhotoshopの「調整レイヤー」の「色相・彩度」の機能を使って 服の色など、写真の中の任意の場所の色を変える方法を勉強しました。 今回はこちらの写真の人物の服の色を変えていきます。 写真は「Unsplash」というフリー素材サイトから頂いてきました。 まず「調整レイヤー」の「色相・彩度」を選択します。 次に「プロバティ」パネル内の手のマークをクリックします。 すると、カーソルがスポイトに変わるので、スポイトで赤い服の部分をクリックします。 この操作で赤色の色

          ざわ / Webデザイ…

          【Photoshop】服の色を変える方法

          ざわ / Webデザイン学生

          【Photoshop】文字に立体的な影をつける

          今日は文字に立体的な影をつける方法を勉強しました！ まずは文字を入力し背景とは別のレイヤーを作ります。 背景に色を付けます。今回の選んだのはピンクですが 鮮やか過ぎるのでもう少し目に優しい色を選べば良かったと ちょっと後悔しました。苦笑 次に「レイヤースタイル」の「境界線」を設定します。 「サイズ」は今回は４ 「位置」は外側 「カラー」は白にしました。 次に ①作成したレイヤースタイルをコピー ↓↓↓ ②レイヤーを作成の処理をします ①と②の処理をすると、右のレイヤ

          ざわ / Webデザイ…

          【Photoshop】文字に立体的な影をつける

          ざわ / Webデザイン学生

          【Photoshop】文字の塗りを透明にする

          今日はPhotoshopで文字の塗りを 透明にする方法を勉強しました。 今回の背景画像は フリー写真サイトの「Unsplash」から ダウンロードしました。 豊富な素材を使わせてもらえて こういったサイトの存在は とてもありがたいですね。 ざっくりと写真のトリミングをし 写真の色調補正をした後に 文字を入力します。 今回はひらがなの文字サイズを 少し小さくして 一目で分かりやすくなるよう 調整してみました。 次に文字の外側に白色の枠を付け加える操作をします。 レイヤ

          ざわ / Webデザイ…

          【Photoshop】文字の塗りを透明にする

          ざわ / Webデザイン学生

          【Photoshop】コンテンツに応じて拡大・縮小

          今日はPhotoshopの「コンテンツに応じて拡大・縮小」機能を使って、 画像の長さを変化させたい部分を編集していく方法を勉強しました。 「コンテンツに応じて拡大・縮小」機能は 自動で不自然にならないように画像サイズを拡張できる機能です。 （サムネイルの猫はとんでもなく不自然ですが...笑） この機能の本来の活かし方としては バナー作成時などに 背景として使う画像の余白の部分を追加したい時などに役立ちます。 こちらの写真は「Photo AC」というフリー素材サイトから

          ざわ / Webデザイ…

          【Photoshop】コンテンツに応じて拡大・縮小

          ざわ / Webデザイン学生

          【photoshop】写真のレタッチ

          今日はPhotoshopを使用して写真のレタッチについて いくつかの手法を学習しました。 今回は”Unsplash”というフリー画像サイトから 拾ってきた画像を使ってレタッチの練習をしていきます。 加工前は建物の前に電線が写ってしまっています。 「スポット修正ブラシツール」を使用しながら 電柱と電線を消していきます。 上の画像では電線が左半分まで消去できました。 続けて作業をしていきます。 細かい所は 「コピースタンプツール」を使って 調整していきます。 細かい調整

          ざわ / Webデザイ…

          【photoshop】写真のレタッチ

          ざわ / Webデザイン学生