Jotaro Kujo Art & Anime T-Shirt Design

SOURCE: Jotaro Kujo

空条 承太郎

ジョジョの奇妙な冒険の私のお気に入りのアニメキャラクターの1人、スターダストクルセイダーズ

Jotaro Kujo Art



空条承太郎は、ジョジョの奇妙な冒険、スターダストクルセイダーズに登場するアニメヒーローです。 彼はとても愛されているアニメキャラクターであり、私はこの投稿を彼に捧げたいと思いました。 承太郎はとてもかっこいいキャラクターなので、かっこいいアニメのTシャツを作ることにしました MockoFunを使用したデザイン。 このデザインはオンラインで編集できます。 自分のメイン画像をダウンロードしてください かっこいいTシャツにプリントします。

アニメTシャツデザイン

デザイン:@MOCKOFUN

空条承太郎Tシャツデザイン空条承太郎黒シャツデザイン空条承太郎の赤いシャツのデザイン

空条 承太郎 はパート3の主人公であり、パート4〜6にも登場します。 承太郎は、ジョジョの奇妙な冒険シリーズの3番目で最も頻繁に繰り返されるジョジョです。

承太郎は、ジョースター家の旧敵であるDIOが帰ってくるまで普通の生活を送っている非行者です。 承太郎は母親を救い、吸血鬼を完全に止めるためにエジプトに旅行します。

信じられないほど強力なスタープラチナを使用する承太郎は、スタンドが導入された最初の承太郎であり、シリーズの中で最も有名なキャラクターの1つです。

 

 

ウェブ上で使える矢印記号(絵文字)

矢印テキスト記号でできるクールなこと

 

MockoFunテキストエディタを使用すると、デザインにテキスト記号や絵文字を簡単に挿入できます。

 

これらの特定のデザインでは、矢印文字とさまざまなarrow symbolの表現のみを使用しました。

f:id:codingdude:20201009175110j:plain

矢印テキスト記号

 ウェブ上に表示できる矢印記号は、実は100種類以上もあります。上下左右を表す矢印「↑↓←→」だけではなく、斜め方向の矢印、二重線の矢印、カーブした矢印、太い矢印、手や指の形をした矢印など、テキストで表示できる絵文字のような矢印記号が多数あります。矢印の代わりに三角記号「▲▽」も使われますが、これも上下以外に横向きの三角形も表示できます。数値文字参照の書き方を使って特殊な矢印記号の出し方をご紹介。

 

Behanceでこのプロジェクトを参照してください:

www.behance.net

 

 

ポップアート効果

SOURCE: Warhol Effect Photoshop

フィルターとカラーグラデーションを使用して、Adobe Photoshopでアンディウォーホルのポップアート写真効果を作成する方法を学びます。

今すぐ見る:Pop Art Photoshopチュートリアル

Andy Warholエフェクトは、Pop Art Warhol Effect Photoshopアクションパックの一部です。

 

ポップアートPhotoshopアクション

Photoshopで作られたポップアートポスター| 最終結果

これは、このチュートリアルで作成するポップアート効果です。

 

ポップアートウォーホルエフェクトPhotoshopチュートリアル

1.ストックイメージを追加する

Photoshopで新しいドキュメントを作成します。ポップアート効果にしたい画像を追加します。

 

投稿用画像

2.ペンツールを使用して輪郭形状を描く

ステップ1

ペンツールを使用して、女性の輪郭をトレースします。[ パス ]オプションが選択されていることを確認してください。

ステップ2

切り取りたい領域の周囲にアンカーポイントを追加します。この効果のために、カットアウトは完璧である必要はありません。

画面をクリックしてポイントを追加します。マウスボタンを押したままドラッグすると、曲線状のパスが作成されます。

投稿用画像

3. Photoshopでパスから選択を行う

選んパス選択ツール選択に、右クリックを。選択してください選択してくださいメニューから。

投稿用画像

投稿用画像

4. Photoshopで背景を削除する

Control-Jを押して、選択範囲のコピーを新しいレイヤーに作成します。このレイヤーをWoman Imageと呼びます。これで、元のレイヤーを削除できます。

投稿用画像

5.しきい値調整レイヤーを使用する

ステップ1

Control-Jを押して、Woman Imageレイヤーを複製します。

ステップ2

今のところWoman Image Copyレイヤー を非表示にします。

女性画像の明るさ/コントラスト調整レイヤーを追加します。調整を右クリックし、[ クリッピングマスクの作成 ]を選択します

投稿用画像

ステップ3

Woman Imageのしきい値調整レイヤーを追加します。調整を右クリックし、クリッピングマスクの作成]を選択します

投稿用画像

ステップ4

Woman ImageにStrokeレイヤースタイルを追加します。ボーダーの色を使用します。#000000

投稿用画像

6.コピーフィルターを使用する

ステップ1

作る女性の画像をコピーし、再び層が見えます。

景色#000000に、背景色をに設定し#ffffffます。

フィルター>スケッチに移動し、写真コピーフィルターを女性の画像コピーレイヤーに適用します。

投稿用画像

ステップ2

Woman Image CopyレイヤーのブレンドモードをMultiplyに設定します。

投稿用画像

ステップ3

Woman Image Copyのレベル調整レイヤーを追加します。調整を右クリックし、[ クリッピングマスクの作成 ]を選択します

投稿用画像

7.ウォーホルエフェクトを作成する

ステップ1

すべてのレイヤーを選択します。レイヤを右クリックして、[ レイヤのマージ ]を選択します。

ステップ2

ウォーホルエフェクトレイヤーにグラデーションマップ調整レイヤーを追加します。調整を右クリックし、[ クリッピングマスクの作成 ]を選択します

グラデーションマップに使用する色を選択します

投稿用画像

8.背景レイヤーを追加する

新しいレイヤーを追加し、ウォーホルエフェクトレイヤーの下に移動します。レイヤーを白で塗りつぶします。カラーオーバーレイレイヤースタイルを追加し、好きな色を使用します。

ポップアートポスターフォトショップ

9.ポップアートのポスターを作成する

ステップ1

プレス変速制御-ALT-Eすべての表示レイヤーのコピーを作成するためには、合併しました。このレイヤーにPop Art Posterという名前を付けます。

Control-Tを押して、画像のサイズを50%に変更します。プレビューに示されているように、参照点の場所を変更します。

Control-Jを押して、Pop Art Posterレイヤーを3回複製します。

ステップ2

プレビュー画像に示すようにレイヤーを移動して、ポスターを作成します。

ポップアートポスター

ステップ3

画像の色を変更するには、各コピーレイヤーに色相/彩度調整を追加します。お好みの色調を設定してください。

調整を右クリックし、[ クリッピングマスクの作成 ]を選択します。この方法では、色の変更は下のレイヤーにのみ影響します。

ポップアートPhotoshop

おめでとうございます。完了です。

このチュートリアルでは、フィルターと調整レイヤーのみを使用して、Photoshopでウォーホルポップアートポスターをゼロから作成する方法を学びました。

ウォーホルポップアートポスター

このような別のタイプのポップアートポートレートデザインを作成するためのPop Art Photoshopチュートリアルも必ずチェックしてください。

ポップアートPhotoshopチュートリアル

1.ポップアートWARHOLエフェクトPhotoshopアクション

すばやく簡単に結果を得るには、Pop Art Warhol Effect Photoshop Actionをチェックしてください。これにより、さまざまなサイズと効果のWarholポスターを作成できます。

ポップアートウォーホルエフェクトPhotoshopアクション

2. LICHTENSTEIN Photoshopアクション

ダウンロード可能なLichtenstein Photoshopアクションを使いやすい。アクションを使用して、写真をコミックアートに変換します。

リヒテンシュタインPhotoshopアクション

CSSを使って縁取り文字を表現する方法

f:id:codingdude:20200730225549j:plain

CSSを使っ縁文字を


Original Article: Stroke Text CSS - The Definitive Guide

 

このチュートリアルでは、ストロークテキストのCSS効果を作成する方法を紹介します。

HTMLコードとCSSコードに進む前に、ストロークテキスト画像を作成するだけの場合は、このチュートリアルを確認してOutline Text In Photoshopを作成する方法を学んでください。

または、Photoshopをお持ちでない場合は、専用のストロークテキストチュートリアル含まれている無料のオンラインツールMockoFunを使用できます。

 

ボーダー付きテキスト

 CSSを使用してテキストにストロークを追加する -webkit-text-stroke

ストロークテキストCSS

例として、テキストに黒い線を追加してみましょう。いくつかのHTMLコードから始めます。

<span class="stroke-text">STROKE TEXT</span>

そしてCSSコード:

.stroke-text{
  -webkit-text-stroke:5px black;
  -webkit-text-fill-color:transparent;
}

単純明快に、テキストを透明にします。これは必須ではありませんが、文字の本文ではなくテキストの輪郭だけを表示したいだけです。次に、-webkit-text-strokeプロパティは5pxの太さの黒いアウトラインストロークを追加します。これを変更して、取得したい効果に応じて、アウトラインテキストを太くしたり、細くしたりできます。

良いニュース:

これを使用して、すべてのWebkitベースのブラウザーChromeやEdgeなど)とFirefoxでもCSSでテキストをストロークできます。

悪いニュース:

これは非標準の機能であるため、100%信頼できるものではありません。

CanIUse.comによると、すべてのブラウザでサポートされているわけではありません。このプロパティは、どのW3C仕様にも含まれていません。text-outlineプロパティとして簡単に仕様に含まれていましたが、これは削除されました。

このテキストストロークCSSプロパティで作成できることのヒントを提供するために、これが80年代フォントテキストエフェクトギャラリーの私のサイバースペーステキストエフェクトの一部です。

ストロークテキスト80年代フォント効果

 を使用してテキストにストロークを追加する text-shadow

CSSでテキストの輪郭を描くもう1つの方法は、シャドウを使用することです。CSSでは、プロパティを介してテキスト要素に複数の影を追加できますtext-shadow

それでは、白地に白のテキストを作成し、それに4つの赤い影を追加しましょう。4つの影を1px上下左右にオフセットします。HTMLコードは次のとおりです。

<span class="stroke-text">STROKE TEXT</span>

そしてCSSコード:

.stroke-text{
  color:white;
  text-shadow:1px 0 0 red,0 1px 0 red,-1px 0 0 red,0 -1px 0 red;
}

次に、何が行われているか、およびテキストシャドウを使用してCSSテキストストローク効果がどのように実現されるかを示します。

ストロークテキストCSSシャドウ

完璧ですね。

まあ、正確ではありませんが、かなりすごいです。それに対するいくつかの欠点と解決策を指摘しましょう。

まず、テキストのアウトラインの太さや色を変更する必要がある場合、複数の場所で変更する必要がありますが、これは面倒な作業です。

CSSは非常にエレガントなソリューションを提供してくれます。これは私が便宜上よく使うもので、CSS変数です。CSS変数の詳細については、こちらをご覧ください。ただし、CSSで値を何度も繰り返す必要がある場合、CSS変数は非常に役立ちます。

 CSS変数を使用してテキストストロークの色と太さを構成する

基本的には、次のようにCSS変数を定義します--my-variable:value。次に、CSSコード全体でその値が必要な場合は、単にproperty:var(--my-variable);

したがって、上記のCSSコードを次のように変更します。

.stroke-text{
  --stroke-color:red;
  --stroke-width:1px;
  color:white;
  text-shadow: var(--stroke-width)  0 0 var(--stroke-color),
    calc(var(--stroke-width) * -1) 0 0 var(--stroke-color),
    0 var(--stroke-width) 0 var(--stroke-color),
    0 calc(var(--stroke-width) * -1) 0 var(--stroke-color);
}

この--stroke-color変数には、テキストストロークの色とストローク--stroke-widthの幅が格納されます。次に、テキストシャドウでこれらの変数を使用します。これにより、テキストストロークの色または幅を変更する場合に、1か所のみを変更できます。

かなりすっきりしていますね。

このtext-shadowプロパティでは、CSS calc関数を使用して、上と左のシャドウ方向のテキストストローク幅を-1で乗算できるようにしています。

これをいじってテキストストロークの太さを変更すると、大きな値の場合、文字の角に問題があることに気付くでしょう。

そして、私たちは2番目のドローバックに到達します。

CSSストロークテキスト

4つの方向にシフトする4つのシャドウのみを使用しているため、テキストストロークにいくつかの切れ目があります。

それで、これを修正するにはどうすればよいですか?

答えは簡単です。影を追加してください!

帽子をかぶった子供たちを待って、数学のノートを取り出してください。結局のところ、これは「ストロークテキストの決定的なガイド」なので、徹底する必要があります。

テキストにさらにシャドウを追加する場合は、テキストのアウトラインのすべてのギャップをカバーするために、テキストの周りでそれらのシャドウをシフトする方法を理解する必要があります。直感は、テキストストロークの幅と等しい半径の円に均等に広げる必要があると述べています。

そして、直感は正しいです!

影のオフセットを計算するには、極座標式を使用します。

x = r * cos(alpha)
y = r * sin(alpha)

ここで、xおよびyオフセット値であり、r円(我々は、テキストストロークの太さに変換これにより相殺することが実際の量)の半径であり、alpha我々は内円を分割したいする角度です。

alphaテキストストロークを作成するために追加するシャドウの数に応じて、に値を割り当てることができます。

たとえば、8つのシャドウの場合、2 * PI(完全な円)を8で割り、PI / 4の角度になります。次に、alpha0、PI / 4、PI / 2などのPI / 4のステップで値を割り当てると、円が完成するまで、8つの影のオフセットが円に完全に揃うはずです。

CSSストロークテキスト

追加するシャドウが多いほど、ストローク幅の値が大きい場合にCSSテキストストロークが滑らかになります。CSSには三角関数はまだないので、自分で値を計算する必要があります。

HTMLとCSSのコードを変更して、16個の影のある滑らかなテキストストロークを追加します。

<span class="stroke-text smooth-16">STROKE TEXT</span>

そして、滑らかなテキストストローク用のCSSを追加します。

.smooth-16 {
  text-shadow: calc(var(--stroke-width) * 1) calc(var(--stroke-width) * 0) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * 0.3827) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * 0.7071) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * 0.9239) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0) calc(var(--stroke-width) * 1) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * 0.9239) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * 0.7071) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * 0.3827) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -1) calc(var(--stroke-width) * 0) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * -0.3827) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * -0.7071) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * -0.9239) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0) calc(var(--stroke-width) * -1) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * -0.9239) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * -0.7071) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * -0.3827) 0
      var(--stroke-color);
}

便宜上、必要なシャドウの数に応じてストロークテキストCSSコードを生成するJS関数を作成しました。これがコードです:

/*
text-shadow from smooth-16 was created with steps = 16
*/
function calculateStrokeTextCSS(steps) {
  var css = "";
  for (var i = 0; i < steps; i++) {
    var angle = (i * 2 * Math.PI) / steps;
    var cos = Math.round(10000 * Math.cos(angle)) / 10000;
    var sin = Math.round(10000 * Math.sin(angle)) / 10000;
    css +=
      "calc(var(--stroke-width) * " +
      cos +
      ") calc(var(--stroke-width) * " +
      sin +
      ") 0 var(--stroke-color),";
  }

  return css;
}

この関数を実行するsteps=16と、text-shadowプロパティのCSS値が取得されます。このJSコードは、CSSストロークテキストを表示するページの一部である必要はありません。以下は、コードを操作できるCodepenスニペットです。

これで、CSSストロークテキストを作成するための2つの完全に有効な方法がありますが、これは決定的なガイドなので、ここで止めることはせず、CSSシャドウを使用してテキストアウトラインを作成するための追加の代替方法をいくつか示します。

クイックヒント:このまったく同じ方法は、たとえばPNG画像からアウトライン画像を作成する場合にも機能します。

 CSS SVGフィルターを使用してテキストにストロークを追加する

SVGフィルターについて、またはフィルターで何ができるかについて知らない場合は、80年代のフォントSVGフィルターテキストのレトロ効果に関するこの記事を読むことを強くお勧めします。警告:驚かれる準備をしてください😎

基本的に、CSSfilterプロパティを使用して使用できるSVGフィルターを定義できます。最近の記事の1つで、CSSフィルターを多用してCSS画像効果を作成しました。ただし、この例では、SVG / CSSフィルターを使用してテキストにストロークを追加します。

HTMLコードとSVGフィルター定義は次のとおりです。

<span class="stroke-text">STROKE TEXT</span>

<svg version="1.1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" style="display:none;">
  <defs>
    <filter id="stroke-text-svg-filter">
      <feMorphology operator="dilate" radius="2"></feMorphology>
      <feComposite operator="xor" in="SourceGraphic"/>
    </filter>
  </defs>
</svg>

そしてCSSコード:

.stroke-text{
  color:dodgerblue;
  filter:url(#stroke-text-svg-filter);
}

これは、次のように青い輪郭のテキストをレンダリングします。

ストロークテキストSVG

それで、これはどのように機能しますか?

さて、stroke-text-svg-filter私達は私達のテキストに適用SVGフィルタは、2つのステップがあります。

  • feMorphologywith dilateは、元のテキストを取得し、テキストを全方向radiusに2ピクセルずつ「拡張」または拡大します。
  • feCompositeを使用してoperator="xor"、拡大テキストから元のテキストを実際に減算するXOR演算を実行します。これにより、白抜きのテキストやアウトラインテキストが残ります。

radiusSVGフィルターの属性を変更する必要があるテキストストロークの太さを変更します。colorテキストストロークのを変更するには、stroke-textクラスのcolor CSSプロパティを変更するだけです。

このSVGフィルターは、PNG画像でも機能します。

このストロークをテキストに追加するこの方法の唯一の欠点は、最終的な結果がの大きな値に対して少し粗く見えることですradius。これは、膨張アルゴリズムが文字をすべての方向に拡張しようとするためです。つまり、すべての方向に同じサイズの真のアウトラインがレンダリングされない可能性があります。

SVGフィルターを使用してテキストにストロークを追加するためのコードペンは次のとおりです。

 SVGテキストアウトライン

SVGフィルターの他に、SVGテキストとSVGに固有のCSSを使用してテキストアウトラインを作成できます。

HTMLとCSSのみのソリューションではありませんが、このソリューションはおそらく最も見栄えのよいテキストアウトライン効果を生み出します。

SVGストロークテキスト

SVGCSSでテキストアウトラインを作成するには、HTMLページに追加するSVGコードを次に示します。

<svg version="1.1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" width="100%">
  <text class="stroke-text" x="50%" y="50%">SVG STROKE TEXT</text>
</svg>

そしてCSSコード:

.stroke-text{
  font-size:100px;
  text-align:center;
  text-anchor:middle;
  stroke:dodgerblue;
  stroke-width:3px;
  fill:none;
}

コードをすばやく確認するには、テキストSVG STROKE TEXTをSVGオブジェクトの真ん中にSVGテキストとして追加します(したがって、xおよびに50%を設定しますy)。

テキストストロークまたはテキストアウトラインの色と幅を実際に制御するCSSコードは、2つのCSSプロパティstrokestroke-widthです。これらのプロパティはSVG要素でのみ機能し、HTML要素では機能しないことに注意してください。

複数のテキストストローク効果を作成するには、いくつかの追加<text>要素を追加し、それらを少しオフセットして、stroke色を変更します。

 SVGストロークで二重のアウトラインフォント効果または複数のアウトラインフォント効果を作成する

あなたがそれに取り組んでいる間、あなたは上記のコードにほんの2、3の変更を加えるだけで、いくつかの本当にクールな二重または複数のアウトラインフォント効果を作成できることを知っておくべきです。

二重アウトラインフォント

CSStext異なるstroke値を持つSVGに複数の要素を追加するだけです。複数のアウトラインフォント効果を形成するためにテキスト要素が互いの上に配置されるため、最も太いストロークから始めて、細いストローク値に進むように注意してください。

ダブルフォント効果とマルチフォント効果のHTMLコードは次のとおりです。

<svg version="1.1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" width="100%" height="200">
  <text class="stroke-text thick color1" x="50%" y="50%">DOUBLE OUTLINE FONT</text>
  <text class="stroke-text" x="50%" y="50%">DOUBLE OUTLINE FONT</text>
</svg>

<svg version="1.1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" width="100%" height="200">
  <text class="stroke-text thicker color1" x="50%" y="50%">MULTIPLE OUTLINE FONT</text>
  <text class="stroke-text thick color2" x="50%" y="50%">MULTIPLE OUTLINE FONT</text>
  <text class="stroke-text color3" x="50%" y="50%">MULTIPLE OUTLINE FONT</text>
</svg>

ご覧のとおり、それぞれのエフェクトを独自の<svg>要素に追加しています。そして、CSSコードは次のようになります。

.stroke-text{
  font-size:80px;
  text-align:center;
  text-anchor:middle;
  stroke:dodgerblue;
  stroke-width:4px;
  fill:none;
}

.thick{
  stroke-width:8px;
}

.thicker{
  stroke-width:12px;
}

.color1{
  stroke:magenta;
}

.color2{
  stroke:yellow;
}

.color3{
  stroke:red;
}

これまでに到達した場合、おめでとうございます!これで、CSSストロークテキストジェダイになりました

Jediマスターになり、CSSストロークテキストのすべてを知りたいですか?読み続けて。

 HTML5キャンバステキストのアウトライン

私は以前にこれを言ったことを知っていますが、この記事は、テキストをストロークするための決定的なガイドとなることを意図しています。CSSがなくても、ストロークテキストまたはテキストアウトラインをHTMLで作成するためのすべてのメソッドを含めることにしました。

はい、HMTL5キャンバスを使用してアウトラインテキストを作成できます。

その方法をお見せしましょう!

キャンバステキストのアウトライン

最初に、次のHTMLコードでキャンバスを設定しましょう。

<canvas id="myCanvas" width="850" height="300"></canvas>

次に、JavaScriptを使用して、次のようなアウトラインのテキストを描画します。

var myCanvas = document.querySelector("#myCanvas");
var ctx = myCanvas.getContext("2d");

ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.font = "70px sans-serif";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.strokeText("CANVAS TEXT OUTLINE", myCanvas.width / 2, myCanvas.height / 2);

ここで重要な部分は、テキストのアウトラインの色と太さを設定するstrokeStyleおよびlineWidth設定です。strokeText()機能の概要は、テキストの実際の描画を行います。

これがCodepenワークシートです:

 結論として

この記事が、CSSだけでなく、CSSでテキストをストロークするための真の決定的なガイドになるのに役立ち、価値があることを願っています。これで、HTML、CSS、さらにはHTML5キャンバスでストロークテキストまたはアウトラインテキストを作成する複数の方法がわかりました。

HTMLとCSSストロークテキストを作成する別の方法を知っている場合は、メッセージを送ってください。この素晴らしい決定的なガイドに含めたいと思います。

万華鏡Photoshop効果

元のソース:Kaleidoscope Effect Photoshop

 

ほんの数秒でこのPhotoshopアクションジェネレーターを使用してPhotoshop万華鏡効果を作成しますあなたがしなければならないすべては、アクションを再生し、さまざまな効果のためにいくつかのカスタマイズを行うことです。このPhotoshopツールを使用して、スクラップブックなどの写真のコラージュを作成できます300 DPIの抽象的な写真効果作成して、印刷することもできます。

 

1.万華鏡Photoshopアクション

Photoshopのこの種のアクションの1つで、写真を使用して面白い万華鏡効果を作成します。万華鏡Photoshopのアクションは、写真、テクスチャ、パターン、ベクトルグラフィックスなどで、画像の任意のタイプで動作します

f:id:codingdude:20200619152843j:plain

Kaleidoscope Photoshop Effect

  • 万華鏡Photoshopアクション
  • 結果はスタイルをそのままに完全に重ねます
  • 編集可能な画像
  • ベクトル形状が含まれたCSHファイル
  • スマートオブジェクトの編集が簡単
  • 300 DPIプリント対応

写真を追加し、矢印などのベクターシェイプマスクを選択して、アクションを再生するだけです。詳細については、パック内にあるPDFヘルプファイルを参照してください。

ここからダウンロード

2. Photoshop用のアニメーションの万華鏡ジェネレータ

f:id:codingdude:20200619153248j:plain

Animated Kaleidoscope Photoshop Effect

 

 

このセットには、あらゆる種類の画像からリアルな万華鏡効果や万華鏡アニメーションを作成できるPhotoshopアクションスクリプトが含まれています。このアクションスクリプトを使用して、Photoshopでマンダラを作成することもできます。ワンクリックでユニークなマンダラ写真を作成します。

 

万華鏡効果は非常にリアルに見えます。カスタマイズセクションを使用して、最終結果を変更できます。オフセットを使用して、画像を垂直または水平に移動します。また、アニメーション設定を使用して、アニメーションの万華鏡GIFを作成することもできます。

  • リアルな万華鏡効果–最大24ミラー面
  • アニメーション効果付き
  • 要件:RGBカラー、8ビット、72 DPIを推奨
  • 結果をJPGまたはアニメーションGIFとして保存できます
  • 無限の組み合わせ–比類のない結果
  • 編集とカスタマイズが簡単
  • Photoshopのスキルは不要

 

f:id:codingdude:20200619153910g:plain

Animated Kaleidoscope Photoshop Effect

既成の無料の万華鏡の背景画像をダウンロードしたい場合は、Textures4Photoshopをチェックしてください。
 

f:id:codingdude:20200619154044j:plain

Kaleidoscope Background Textures

 

万華鏡効果をオンラインにする方法?

MockoFunを使用して、独自の万華鏡デザインをオンラインで作成することもできます。MockoFunは、非常に強力な写真エディタを備えたオンライングラフィックデザインツールです。MockoFunフォトエディターには、無料のプレミアムフィルターが多数付属しています。プレミアムフィルターの1つは、カレイドスコープエフェクトフィルターです。

 

f:id:codingdude:20200619154137g:plain

Online Kaleidoscope Generator



素晴らしいビンテージ写真を作成するための7つのCSS画像効果

素晴らしいビンテージ写真を作成するための7つのCSS画像効果

ソース: CSS Image Effects

この短いCSSチュートリアルでは、オンライン画像に適用できる本当にクールで簡単なCSS画像効果を作成する方法を紹介します。ここで紹介する画像効果は、写真家が写真を現像するときに使用する最も一般的な写真効果です。

f:id:codingdude:20200607150634j:plain

CSS画像効果

私が説明するCSS画像効果は次のとおりです。

  1. 古い紙のオーバーレイ
  2. 黒と白
  3. セピア
  4. 暖かい色
  5. 冷たい色
  6. 緑の色合い
  7. マゼンタティント

PhotoshopLightroomなどのツール、またはMockoFunなどのオンラインツールとそれらの素晴らしいビンテージフォトエディターを使用して写真を編集できますが、Webページに画像を配置してフィルターを適用するだけでよい場合は、クールなCSS画像効果を作成する方法を次に示します。

注: CSS効果で画像を使用する場合の1つの欠点は、効果が適用された画像がGoogleに表示されないことです。このチュートリアルでは、以下の画像は、元の画像に適用されたCSS画像効果のスクリーンショットです。これらは実際のCSS効果ではありません。ライブエフェクトを見てみたい、または遊んでみたい場合は、このCodePenを確認してください。

CSSを使用したCSS画像効果 filter

filterあなたは、コントラスト、明るさを調整するなどの画像調整を行う必要があるときにCSSプロパティは、Webページ内の画像の彩度など、非常に便利なツールです。

filterCSSで使用できる値のリストを次に示します。

  • blur 画像にぼかしを追加するため
  • brightness 画像を明るくまたは暗くするため
  • contrast 画像のコントラストを調整する
  • drop-shadow の代わりとして使用 box-shadow
  • grayscale 画像をグレースケールに変換するため
  • hue-rotate 写真の色相値を調整する
  • invert 画像の色を反転します
  • opacity 画像の透明度を変更する
  • saturate 画像の彩度値を変更する
  • sepia 画像にセピア効果を適用する

これらのCSSフィルターは値を受け取ります(blurたとえば、パーセントまたはピクセル  )。また、これらのフィルターの組み合わせを同じ画像要素(またはそのほかのHTML要素)に適用することもできます。

それでは、CSS filterプロパティの動作を見てみましょう!

CSS画像効果:元の写真

では、古いフォルクスワーゲンビートルの画像を見てみましょう

CSS画像効果

filterプロパティのさまざまな値を使用して、クールなCSS画像効果を適用してみましょう。

よりヴィンテージな効果を作成するために、我々はまた、この使用します古い質感をからヴィンテージ紙のテクスチャによって自由パックPhotoshopSupply。150を超えるさまざまなヴィンテージテクスチャのこの古い紙の背景コレクションをチェックすることもできます。

古いテクスチャCSS画像効果

 

CSS画像効果:ビンテージオーバーレイ

CSS画像効果ヴィンテージ

HTMLコード:

<div class="old-paper">
<img class="original-image" src="https://i.imgur.com/ouDwClz.jpg" />
<div class="overlay">
<img src="https://i.imgur.com/4rKVgAQ.png">
</div>
</div>

CSSコード:

.old-paper{
  position:relative;
  max-width:850px;
}

.original-image{
  width:100%;
  height:100%;
  display:inline-block;
}
.overlay{
  mix-blend-mode:multiply;
  position:absolute;
  display:inline-block;
  left:0;
  top:0;
  right:0;
  bottom:0;
}

.overlay img{
  width:100%;
  height:100%;
}

このビンテージイメージエフェクトでは、元のイメージの上に古い紙のテクスチャを追加し、をに設定し  mix-blend-modeましたmultiplyPhotoshopの描画モードに慣れている場合、これは非常に簡単に理解できます。

そうでない場合、ブレンドモードの簡単な説明は、2つの画像間の色に数学計算を適用できることです。各ピクセルの色を、0、1(0、0、0は黒、1、1、1は白)の赤、緑、青の値として想像する必要があります。この場合multiply、各ピクセルの色成分が乗算され、結果は表示されるピクセルの色になります。

次のCSS画像効果では、まったく同じコードを使用しますが、さらに、元の画像に異なるフィルターを適用します。

続けましょう。

CSS画像効果:白黒

CSS画像効果白黒ヴィンテージ

HTMLコード:

<div class="old-paper">
    <img class="original-image black-and-white" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSSコード:

.black-and-white{
  filter:brightness(70%) contrast(150%) saturate(0%) brightness(150%);
}

.black-and-white元の画像にCSSクラス名を追加すると、白黒の効果が追加されます。CSSコードを調べると、フィルター値のシーケンスを確認できます。

  • brightness(70%) 画像の明るさを元の70%に暗くします
  • contrast(150%) 画像のコントラストを50%上げる
  • saturate(0%) これは元の画像の色を完全に彩度を下げます
  • brightness(150%) 画像の明るさを結果の50%引き上げます

ことを覚えておいてください  filterプロパティの値は、1つのフィルタの入力は、前のフィルタの出力であることを意味し、順番に適用されます。

 

次に、セピアフィルター効果の設定を見てみましょう。

CSS画像効果:セピア

CSS画像効果セピアヴィンテージ

HTMLコード:

<div class="old-paper">
    <img class="original-image sepia" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSSコード:

.sepia{
  filter:filter:saturate(0%) sepia(100%) contrast(150%) saturate(150%);
}

sepiaCSSには  フィルターが組み込まれていますが、結果は少し退屈なので、いくつか調整することにしました。

画像の彩度を下げて白黒にし、セピアフィルターを適用し、コントラストを50%増やしてから、結果の画像の彩度を50%増やします。

結果にはかなり満足しています。画像によっては結果が異なる場合があるので、必要な結果が得られるまで設定を試してください。

CSS画像効果:暖色

CSS画像効果暖かい色ヴィンテージ

HTMLコード:

<div class="old-paper">
    <img class="original-image warm" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSSコード:

.sepia{
  filter: sepia(50%) contrast(150%) saturate(200%) brightness(100%) hue-rotate(-15deg);
}

温かみのあるカラー画像効果は、写真をより魅力的にするために写真家がよく使用します。画像を「暖かく」するには、色を赤、オレンジ、黄色にシフトする必要があります。

これにはいくつかの実験が必要かもしれませんが、この場合私にとってうまくいったのはsepiaフィルターとフィルターの  組み合わせでしたhue-rotate

sepiaフィルターが何をするかを見てきました  。いかが  hue-rotateですか?

hue-rotate画像のすべての色の色相をシフトします。しかし、なぜ値が度単位なのですか?

カラーホイールを想像してみてください(実際には、想像しないでください。ここにあります)。

カラーホイール

を使用  hue-rotateすると、カラーホイールで1つの色をx度ずつ押すことができます。360度は完全に回転します。つまり、まったく変化しません。このプロパティの値はネガティブでも機能し、たとえば-90は270に相当します。

CSS画像効果:冷たい色

CSS画像効果冷たい色ヴィンテージ

HTMLコード:

<div class="old-paper">
    <img class="original-image cold" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSSコード:

.cold{
  filter: hue-rotate(180deg) sepia(75%) contrast(150%) saturate(300%) hue-rotate(180deg);
}

冷たい色は、青とシアンに向かっています。暖色系のCSS効果との違いは、セピア色がすでに暖色系の領域にあったことです。そのため、この問題を克服するために、最初にを使用  hue-rotateして180シフトしてからsepiaフィルターを適用し  ます。

これにより、セピア効果(温かみのある色調)が補色(カラーホイールの反対側の色と呼ばれます)に置き換えられます。つまり、  hue-rotate最後にもう一度180ずつ行うと、色が元の色相に戻り、さらに逆セピア効果によってすべてが青くなるため、より冷たくなります。

よろしくお願いします!

そうでない場合は、下にコメントを入力してください。折り返しご連絡いたします。

画像エフェクトについて説明します。

CSS画像効果:緑の色合い

CSS画像効果緑の色合いヴィンテージ

HTMLコード:

<div class="old-paper">
    <img class="original-image tint-green" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSSコード:

.tint-green{
  filter: hue-rotate(-30deg) sepia(75%) contrast(150%) saturate(300%) hue-rotate(30deg);
}

色理論では、色合いは、純粋な白を追加する色を指します。写真の色合いとは、写真のすべての色に特定の色を少し加えることです。

このティントイメージエフェクトでは、ウォーム/コールドカラーエフェクトと同じ原理を使用して、元のイメージにグリーンティントを追加しました。

いくつかの実験の後、私はhue-rotateフィルターで使用される30度のオフセットを思いつきました  。これは、セピアフィルターの黄色の色相と適用する緑の色合いの間の距離に関係しています。

CSS画像効果:マゼンタの色合い

CSS画像効果マゼンタ色合いヴィンテージ

HTMLコード:

<div class="old-paper">
    <img class="original-image tint-magenta" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSSコード:

.tint-magenta{
  filter: hue-rotate(-270deg) sepia(55%) contrast(150%) saturate(300%) hue-rotate(270deg);
}

緑の色合い効果と同じ考えですが、今回はの値が270度です  hue-rotate

クレジット

MockoFun: テキストデザインジェネレーター

オンラインテキストデザインジェネレーター

MockoFunは、無料で使用できるオンラインのtext design generatorです。素晴らしいテキスト効果を作成するためにグラフィックデザイナーである必要はありません。無料のアカウントにサインアップし、既成のテンプレートを参照してください。いくつかは無料で、いくつかは数ドルしかかかりません。 

MockoFunテキストデザインジェネレーター
以下は、MockoFunを使用して作成したいくつかのテキスト効果です。
 

        チョコレートテキストスタイル

テキストデザインジェネレーター

        カラフルなカップケーキテキストスタイル

テキストデザインジェネレーター

        金属文字スタイル

テキストデザインジェネレーター

        刺繍ステッチのテキストスタイル

テキストデザインジェネレーター

        チョークテキストスタイル

テキストデザインジェネレーター

        寿司のテキストスタイル

テキストデザインジェネレーター