[CSS]見出しや本文やボタンなど、要素の両側にすぅーと天地中央のラインを配置するテクニック<h1 class="has-lines">見出し</h1> <h1 class="has-lines">見出し複数行</h1> <p class="has-lines">本文</p> <p class="has-lines">本文複数行</p> <p class="has-lines"> <button>ボタン</button> </p>
![[CSS]見出しや本文やボタンなど、要素の両側にすぅーと天地中央のラインを配置するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/79666273202704c389fa72d2bd2263ba5dbbf6e6/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016080401.png)
デザインは一手間が大切！画像が見違えるほど魅力的になるデザインテクニックのまとめ
一枚の絵には千の言葉に匹敵する価値がある「百聞は一見にしかず」は、コミュニケーションデザインにおいても有効です。わたし達は今までの経験と研究の両方の側面から、画像が多くのユーザーの目を引きつけることを知っています。 自身で撮影した写真画像、どこかでダウンロードした画像に一手間加えて、画像を魅力的にデザインするシンプルなテクニックを紹介します。 画像を美しく仕上げる一番簡単な方法がこの「クロップ」です。クロップは不必要だったり気を散らすエリアを取り去ることで、構図を見直し、焦点を強調することができます。 【注意】クロップするエリアが大きい場合は、可能な限り大きい画像を使用します。これは切り取った後の画像が小さくなってしまうからです。小さいからといって拡大してしまうと、ピクセレーションが起きてしまい、汚い画像になってしまいます。 クロップする時に便利なのが、「3分の1ルール」です。このテクニッ
【簡単】2023年Photoshop切り抜きおすすめテクニック15選 完全ガイド
コンテンツ目次 「被写体の選択」機能 「選択とマスク」機能 「選択とマスク」（複雑な背景バージョン） オブジェクト選択ツール レイヤースタイル「ブレンド条件」 消しゴムツール 自動選択ツール クイック選択ツール 多角形選択ツール ペンツール チャネル設定 色域指定 レイヤーマスク クリッピングマスク 境界線を調整 さいごに、 1. 「被写体の選択」機能 もっとも簡単な、最新の切り抜きテクニック。 ボタンをクリックして、数秒待つだけで完成という、嘘のようなホントのはなし。 試しに、こちらの写真の女性を選択してみましょう。 元の画像をコピー（Command/Ctrl+J）したら、プロパティパネルの「被写体を選択」をクリック。 たったこれだけで、女性モデルのみを選択することができました。 選択範囲をレイヤーマスクとして適用したら、完成です。 Adobe Stockで「背景の削除」も一発完了 実は
日本語フォントの書体の選び方・組み合わせ方、そしてデザインする日本語タイポグラフィのテクニック
明日、いや今日からすぐに役立つ、日本語フォントの書体の選び方・組み合わせ方、そしてそれをどのようにデザインするのか、日本語タイポグラフィのテクニックを学べるスライドを紹介します。 スライドは、日本語デザイン研究会中部の勉強会でプレゼンされた日本語のタイポグラフィのスライドで、特別に掲載許可をいただきました。 DTPの勉強部屋（名古屋）で登壇しました 日本語デザイン研究会中部は、タイポグラフィの大切さと楽しさを伝えるため・学ぶための交流の場として結成されました。 スライドは全部で45ページ。 日本語の読ませるタイポグラフィについて、書体の選び方や組み合わせ方、実例とともにデザインのテクニック、どのように勉強すればよいのかまで掲載されています。
独学で学べる文字の入門書、基礎本、書体の入手方法のまとめ - DESIGNMAP
文字組みは錯視調整 まずこの５つの図形をみてください。 大きさ、間隔、上下の重心が揃っていなく、ばらばらにみえます。 ところが、枠をつけてみると... 実は枠のサイズは同じで、枠の間隔も同じです。 下図はサイズ、重心、間隔を微調整したものです。 ようやく揃えってみえてきます。 単なる図形の並びですが、これだけで秩序感がでて美しくなります。 最初の図形と比較するとわかります。 正方形はややサイズを小さく、円形はサイズを少し大きくし、重心をあげています。三角形は重心を調整、菱形はサイズを少し大きくしました。 図形同士の間隔は図形と図形の間のスペース（カウンタースペース）が均一になるように調整してます。 接近するパーツの間隔が揃うように組むといいでしょう。 日本語は、英語、漢字、ひらがな、カナカナ、数字、記号が混在する複雑な言語なので、上の例のように様々な図形を並べる世界に近いです。 このような
Photoshop初心者さんが写真のレタッチ（色調補正）などをするために覚えたい機能
私は毎日使っている Adobe Photoshopですが、まだまだ使いこなせてません ...。 初心者だったころは今以上に分からないことだらけでした。 今回はとても長い記事になってしまいましたが、初心者だった頃分かりにくかったなーと思った Photoshop の機能についてまとめてみました。 私が Web制作をするときに、いつもお世話になってるのが Adobe Photoshop。Photoshop は Webデザイナーでなくても、DTP デザイナーさんやカメラマンさんなど、職種を問わずいろんな所で使われていますよね。もちろん仕事で使っていないけれど、趣味のことに Photoshop を使っている … という人もたくさんいると思います。 Photoshop はとっても高機能でいろんな機能がついていて、分からないことだらけ …。難しい用語もあったりして、取っ付きにくいなーと思ってる人も多いは
【保存版】Illustratorでインターフェイスをデザインする時に役立つ時短テクニックのまとめ
Illustratorでウェブやアプリなどのインターフェイスをデザインする時に役立つ14の時短テクニックを紹介します。 Speed Design with Illustrator Illustratorの時短チップスを書いたのはVincent Le Moign氏で、彼の別サイト「WEBALYS」ではたくさんのフリー素材を配布しているので覗いてみてください。 WEBALYS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。無断翻訳・まとめ記事の転載をしているあのブログの注意喚起を海外のブロガーから聞くのでご注意ください。 時短でボタンをつくる 1クリックでテキストをデザイン カラー変更の強い味方「グローバルカラー」 モジュール式のデザイン アイコンフォントを簡単に扱う方法 グリッドの設計 グリッドにスナップさせる アートボードの活用 サイ
『Illustratorによるイラスト制作の基本操作』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！デザイナーのマチダです。2012年４月に新卒入社し、現在はスマートフォンゲームのイラストを制作しています。 はじめに-Illustratorの仕組み-多機能によってグラフィックだけでなく文書作成などマルチに活躍できるIllustratorですが、機能の多さに最初は何をどのように使ったらいいのか戸惑うかと思います。 ＜illustratorでイラストを描く際に心がけていただきたいこと＞ 普通絵を描く時は線画を描いて着彩すると思いますがIllustratorは少々違い、"様々な形をした図形を配置"して絵を描きます。図形を上に重ねていくことで
Illustratorで初めてイラストを描く人が押さえておきたい5つのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、かわいいキャラクターを制作してもチンピラ口調のキャラ付けしかできないもりたです。今日は、初心者に向けたIllustratorを使用したイラスト制作のコツを書いてみました。 まず私の記事を読む前にこちらのブログ記事をどうぞ！ Illustratorによるイラスト制作の基本操作｜1 pixel｜サイバーエージェント公式クリエイターズブログ ……いやあすごくわかりやすいですね。この基本操作を理解しているという前提で、初心者でもさらにイラストを「いい感じ」にできるコツをピックアップしました。 独学でつまずいていませんか？ Illustratorの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」
Quick Tip: How to Make Apple WWDC Logo in Adobe Photoshop CS5 | Photoshop Tutorials @ Designstacks
Today, I’m going to show you how use shapes and Layer styles in Photoshop CS5 to design a cool Apple WWDC logo. You will learn an idea to make a nice logo by following this and you will find not many technical skills will be involved. Layered PSD file included. Let’s get started! Final Image Preview Start working by creating a new document (Ctrl+N) in Adobe Photoshop CS5 with the size 1920px by 12
Photoshopで継ぎ目のないマーブル模様・柄を作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回は、素材として探してみると以外と少ないマーブル模様の作り方を紹介したいと思います。 マーブルはアイスクリームとかアイスクリームとかアイスクリームとかの模様として、とっても重宝しますよ！ マーブル模様の下準備 今回のサンプルはストロベリー（ピンク）×チーズケーキ（クリーム）で行きたいと思います！ 500×500のキャンバスにクリームのベタ塗りとかき混ぜるストロベリーの部分を別レイヤーで作ります。 ピンクは鉛筆ツールでポチポチ描きました。混ぜてみないとどんな具合になるか分からないので適当に描き込んでください。（何度でも修正できます。） まずはひと混ぜ ストロベリーのレイヤーを選択した状態で、「フィルター」→「変形」→「渦巻き」ツールを使ってひと混ぜしましょう。 ↓ こんな感じになりました。 今度は選択範囲を指定して逆向きにかけてみたり・・・。 この作業を何回か繰り返していろんな方向に混ぜあ
ノンデザイナーこそ押さえておきたい! 配色・レイアウトの基礎が学べる7個の厳選スライド
まだまだメンバーの数が少なく、職種ごとの距離が近いスタートアップ。デザイナーの仕事をディレクターやエンジニアが理解することが、プロジェクトを円滑に進める秘訣です。 デザイナーではない方々にとって、デザイナーが普段何を悩み、どのようにWebデザインしているのか知るのは、非常に重要と言えるでしょう。今回は厳選した7つのスライドをご紹介しながら、「配色」「レイアウト」といったデザインのエッセンスを学びます。 もちろん、本職のデザイナーの方にも役立つスライド7連発です！ １．色彩センスのいらない配色講座 7000いいね! されたスライド 「時間がない！ 今すぐ作り始めないと納期に間に合わない！ でもどんな色を使ったらいいか分からない！」そんな人におすすめなのがコレ。Facebookで7000以上のいいね!がついた、@marippe_さんのモンスタースライドです。 配色や明度・彩度の基礎をお
初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします！ もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…！ CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください！ 1.
Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法 | ページ 2 / 3 | 東京上野のWeb制作会社LIG
こんにちは、デザイナー兼フォトグラファーのおまめ （@omame_creator） です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください！ 独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
Psd Wall Poster Text Effect | Pixeden Club
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP