ancstudio

Illustration / Graphic Design / UIUX Design.

ancstudio

Illustration / Graphic Design / UIUX Design.

  • GRAPHIC DESIGN

    主にロゴデザインについて。ソフトの使い方、フォントの選び方、レイアウトの基礎、デザインの源流など。

  • UI/UX DESIGN

    ユーザーインターフェースとユーザー体験の作り方。HTML&CSSの書き方やノーコードツールについても書きます。

  • MEME MEMO

    創造力を上げるために書いているメモ。デザイン全般について触れていきます。

  • ILLUSTRATION

    イラストに関する知識全般についての覚書。目標は壮大なコンセプトアートを作り上げること。

【PhotoShop】画像を馴染ませたり、後から編集できるようにするには？

選択範囲・「選択とマスク」→ レイヤーマスク作成 ・レイヤーマスクをダブルクリックでも編集画面に飛べる あとから画像を編集するために（効果や選択範囲）■ レイヤーマスク ・選択範囲を押したままレイヤーマスクを作成（切り取りをコピペすると後で編集不可） ex）部分的に効果を加えるには？
 → 選択状態でレイヤーグループ作成&レイヤーマスク作成 = 便利！（グループ作成後、グループ内に画像を持ってくる） ■ スマートオブジェクト ・スマートフィルター→フィルター/色調補正

ancstudio

    • XD 基本的な使い方

      初めてAdobe XDを触る方はまずはこちらのチュートリアルを見るといいです。きっと全くの初心者であっても、1時間半ほどで使い始めることができるようになります。 https://creativecloud.adobe.com/apps/ux-web/all/pdp/xd?source=apps ■ XDの基本用語デザインカンプ＝クライアントに見せるデザインの完成形 プロトタイプ（モック）＝Web制作を行う前に完成形をイメージしやすくするためのもの ■ 作業効率化プロトタイ

      ancstudio

      • Illustrator基本的な使い方

        雑多なメモです。今度まとめたVerを作ってまた記事書きます。 ■ テキスト文字(縦)ツールの数字：文字パネル右上3本線→縦中横 テキストをベースライン揃える：文字パネル右上3本線→文字揃え→欧文ベースライン タブ…：書式→制限文字を表示、タブキー押す（キーボード）、ウィンドウ→書式→タブ 文字間調整：OPT押しながら矢印 フォント合わせる：スポイトツールで変えられる 文字の線部分のアウトライン化：メニューの「オブジェクト」→分割/拡張で、線もパス化 ■ レイアウト移動パ

        ancstudio

        • Photoshopの基本的な使い方

          MappyPhotoさんの動画はすごくわかりやすいのでぜひご覧いただきたい。それといじるときは画像はバックアップとして、いじる前に画像レイヤーを複製すべし（やり直しが効くし、修正前後の差がわかりやすい） 一旦、合成画像の動画などみながら一つPhotoshopで作ってしまうのがいいかも。やりながら覚える系ソフト。 ■ 選択範囲を切り取る境界線調整ブラシで塗る ・レイヤーマスクをブラシ（モード：オーバーレイ、流量下げる）で塗るとグレーを消せる ・部分的にトーンカーブをかけて馴

          ancstudio

        【PhotoShop】画像を馴染ませたり、後から編集できるようにするには？

        ancstudio

        マガジン

        • GRAPHIC DESIGN
          10本
        • UI/UX DESIGN
          2本
        • MEME MEMO
          1本
        • ILLUSTRATION
          0本

        記事

          【文章】見やすいテキストをデザインする

          タイトル=主役感 ・真っ先に目がいく場所 ・文字サイズ大きく（字数は短く） ・他のフォントと差別化 リード=イントロ感 ・タイトルの後、本文の前 ・本文よりやや大きいor同じサイズ ・リード単独のページや本文の冒頭などにある場合も 本文＝下地感 ・箱組が基本（改行を入れない） ・サイズは12-16級程度 ・あまり個性をつけない 文章の最初にドロップキャップ、最後にエンドマークをつけるのもあり データ/キャプション=黒子感 ・目立たない場所に配置 ・サイズはページ内で一

          ancstudio

          【文章】見やすいテキストをデザインする

          ancstudio

          【カメラ】おさえておきたい構図とデザイン時の使い方

          写真には、いくつか有名な構図がある。 それらを意識して撮ってみる&見てみることで、センスのいい写真が撮れるようになるはず。 そしてデザインの中で使うときの注意点も合わせて紹介。 おさえておきたい構図主役フォーカス ・点構図（主題一点に目がいく構図） ・日の丸構図（中央付近に主題） ・フレーム/額縁構図（四角） ・トンネル構図（木の枝などを障害物で囲む） ・サンドイッチ構図（上下/左右を障害物で挟む） ・対比/大小パターン構図 ※ 日の丸構図は悪例としてよく紹介されるが、

          ancstudio

          【カメラ】おさえておきたい構図とデザイン時の使い方

          ancstudio

          【なるほどデザイン】デザイン意図とプロセス

          まず「デザインの意図」を明確に何を、どうして、誰に、どのように、いつどこで、 （What, Why, Who, How, When, Where） という意図、「なんのためにデザインするのか」を理解しながら手を動かすことが最も重要。 デザインのプロセスデザインに正解はない。正しい手順は存在しないが、大きな構成から決めていった方がスムーズ。細部は最後に。 ① 図解とラフ 情報の階層構造の整理 ex）A,B,C は並列、+aコラム ② 方向性を決める 「表現」と「構造」

          ancstudio

          【なるほどデザイン】デザイン意図とプロセス

          ancstudio

          【色彩】光と陰影の特性を理解する

          光がなければ色はない。 人間が物体の色を感じるには、以下の3要素が必要。 どれか1つを変えると、同じ色でも見え方が変わる（見え方が異なる原因としては、面積効果、背景色、観察者の年齢などの要素もある）。 光源...太陽光や蛍光灯などの種類や角度で見え方変化 物体...物質の材質などで見え方変化 視覚...見る高さなどで見え方変化 光源からの光が物体に当たり、それが跳ね返ったものを視覚で捉えることで我々は色を感知できる。 光の特性光は波の性質を持っている。太陽光にプリズム

          ancstudio

          【色彩】光と陰影の特性を理解する

          ancstudio

          【色彩】色の基礎知識について

          今回は、色について。 デザイナーでない方も知っておくと面白いと思います。 色の三属性（three attributes of color） ・色相（hue） ・明度（lightness） ・彩度（saturation） 色相は、「赤」「黄色」「緑」のような色の違い。 彩度は、色の鮮やかさの度合い。 明度は、色の明るさの度合い。 色をつくるときは、 【色相→明度→彩度→最終調整】という流れが良いと言われている。 色相環（しきそうかん） 色相（色味）の違いを 24段階

          ancstudio

          【色彩】色の基礎知識について

          ancstudio

          フォントに詳しくなろう！文字の種類と文字の組み方

          フォントによってデザインから受ける印象は大きく変わるので、まずは基礎を抑えていきましょう。 ■ 文字の使い分けこれら２つを使い分けていきましょう。 ・可読性（読む用） ・非可読性（魅せる用） 書体の基礎知識 フォントはたくさん使いすぎないように(2~3)。 2つ以上を組み合わせるときは、コントラストを意識。 現在のデータフォントはほとんどがOpenTypeフォント。 以前主流だった以下の2つのいいとこどりをした、AdobeとMicrosoftが共同開発したフォント

          ancstudio

          フォントに詳しくなろう！文字の種類と文字の組み方

          ancstudio

          コーディングを理解したうえで、UIデザインをする

          今回、知り合いの方にコーディング講座を2時間みっちりでお願いしました。自分は、UIデザインの仕事が最近増えてきたんですが、コーディングのことが本当に超基礎部分しかわからなかったため、一度コーダーさんに結構お手間をかけさせてしまいました。そんなこともあって、以下の目標のもと講座受けたので学びの備忘録です。 目標：コーディングがどのようになっているか理解して、UIUXデザインの依頼を正確にできるようにする Q. まずどうやって学んだら良い？ A. Manaさんの本を２つとも読

          ancstudio

          コーディングを理解したうえで、UIデザインをする

          ancstudio

          RPGみたいな【ドット絵】をイラレでつくる方法

          ドット絵を作る方法について。 まず、スマホアプリなどで作る場合は、「dotpict」や「8bit Painter」などがあります。なかなか指でピクセル押すの難しいので、PCでやりたい場合はイラレで作るのがおすすめ。 下の記事がめちゃめちゃ参考になるのでぜひ見てください！ 【手順】 ①四角いオブジェクトを置いて → 作りたいサイズで作成 ②メニューのオブジェクト〉パス〉グリッドに分割 → ドットのマス目の大きさはここで決定 ③ライブペイントツールで塗っていく → 下

          ancstudio

          RPGみたいな【ドット絵】をイラレでつくる方法

          ancstudio

          Hello, World.

          こんにちは。 ancstudioでは、創作活動のヒントになるような記事をあげていきます。 このアカウントでは主に、 ・デジタルイラスト ・グラフィックデザイン ・UI/UXデザイン&コーディング について書いていく予定です。 自分の勉強のためでもありますが、せっかくなら誰かのためにもなればいいなあと思って学びを記事にしていくことにしました。 夏休みの自由研究的に、この夏はクリエイティブレベルをガン上げするためがんばっていく所存です。 よろしくお願いします！

          ancstudio

          Hello, World.

          ancstudio