【フォトショップ】リアルすぎるエンボス加工のつくり方、レイヤースタイルで簡単
この記事では、フォトショップを使った超リアルなエンボス加工のつくり方をご紹介します。 別名浮き出し加工とも言われる「エンボス加工」は、紙面に凹凸をつけたような仕上がりが特長ですが、今回はこの質感をフォトショップで表現します。 レイヤースタイルを適用するだけで完成のお手軽チュートリアルで、繊細な質感を表現できるエフェクトとなっています。 このチュートリアルは、Texturelabsによる英語版オリジナルチュートリアル「Emboss Paper Text & Logos」をアレンジしたものとなります。 加工前ビフォー 加工後アフター このチュートリアルに必要なのはフォトショップだけ。７日間の無料体験もあるので、まずははじめてみませんか？ 7日間無料体験 Photsohopを無料ではじめる フォルダに放り込むだけでエンボス加工に まずはフォトショップを開き、新しいドキュメントを作成しましょう。カ
)
SvgPathEditor - WebベースのSVGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGを作成する場合、Illustratorなどのドローアプリケーションを使ってSVG形式でエクスポートするのではないでしょうか。SVGを直接作成、編集できるソフトウェアはあまりないように思います。 そこで使ってみたいのがSvgPathEditorです。SVGをWebブラウザ上で作成、編集できるソフトウェアです。 SvgPathEditorの使い方 メイン画面です。 マウスでドラッグして編集できます。 パスの追加や描画の種類を変更できます。 プレビューです。 コマンド一覧から、描画している範囲を可視化できます。 保存機能もあります。 SvgPathEditorを使えばSVGをWebブラウザ上で手軽に加工できます。最初はドローアプリケーションでもいいですが、その後のちょっとした編集は
Photoshopで「光」を極めよう！ライティングエフェクトに強くなるチュートリアル、作り方65個まとめ
光や炎、虹などをリアルに表現できる、ライティングエフェクトに特化したPhotoshopチュートリアルをまとめてご紹介します。 当サイトで2010年ごろより毎月まとめているPhotoshopチュートリアルを参考に、直近5年の間に公開されたデザイン手法をまとめて確認できます。 さまざまな光やライティングを自由に操るテクニックが中心で、とにかくPhotoshopすごい！と思わせるチュートリアルが揃い、どれも手順ごとに写真付きの詳しい解説付き。Photoshopの基本を覚えながら、より実践的なデザインテクニックを習得してみましょう。 Photoshopで光を極めよう！ライティングエフェクトの参考にしたいチュートリアル、作り方65個まとめ 深海の美しい景色をデザインする方法 フィルタ機能や調整レイヤー、スマートオブジェクトなどを利用して作成する、これぞPhotoshopな合成テクニック。 幻想的なラ
適当に描いた絵をスタイリッシュなロゴにしてくれる「Logoshi」を使ってみた
企業のみならず個人でも、スタイリッシュなロゴがあればSNSのプロフィール欄やブログなどに活用することができますが、ちょっとした用途であればあまり費用をかけずに自分で作成したいもの。「Logoshi」は適当に描いた手描きイメージを元にオリジナルでスタイリッシュなロゴを作ってくれるウェブサービスです。 Draw a Logo - Logoshi https://www.logoshi.com/draw-a-logo 上記URLにアクセスすると以下のような画面が表示されます。 「Company Name」の欄には社名を入力します。なお、日本語のテキストには非対応です。 「Slogan」の欄にはスローガンを入力できます。任意なので入れなくてもOKです。 右のスペースはロゴのイメージを描く場所です。赤い四角をクリックするとカラーパレットが出てくるので、20色の中から好きな選びます。 その隣をクリック
無料でファミコンのようなドット絵が簡単に作れる「make 8-bit art！」
無料でサクサクっとドット絵が作れるオープンソースのウェブアプリが「make 8-bit art！」です。懐かしの世界観でイラストが作れるとのことなので、実際に使ってみました。 make 8-bit art! http://make8bitart.com/ 画面には3つのメニューが並んでおり、一番左のメニューにあるペンのアイコンをクリックすると、キャンバスにペンで絵が描けるようになります。 ペンの横にある塗りつぶしボタンを押してからキャンパスをクリックすると、ペンで囲んだ範囲内が塗りつぶされます。なお、画面右側のメニューから色を変えられるようになっており、デフォルトでは赤・オレンジ・黄色・緑・青・紫・黒・グレー・白が選べました。 さらに、ピクセルの大きさを選ぶこともできます。ピクセルサイズを「2」にすると、ドット感が目立ちません。 反対に大きくすると、画面全体のドット数が減り、カクカクしたイ
World Map Generator by kevalbhatt
Description This WorldMapGenerator is jquey plugin for creates a Map using SVG using this plugin user can select and get timezone value of selected area. Usage <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="[yourpath]/WorldMapGenerator.js"></script> Select any element you want and create map inside that element
jQuery DrawSVG - SVGをアニメーションしながら描画
画面の解像度が高まるのに合わせて注目を集めているのがSVGです。これまでのバイナリと異なり、SVGはXMLベースのテキストデータなので縮小、拡大しても綺麗なままです。 そしてテキストデータということは、その書き方もデータがすべて読み取れるということです。そこで作られたのがjQuery DrawSVGになります。 jQuery DrawSVGの使い方 jQuery DrawSVGのデモです。SVG画像がアニメーションしながら描かれているのが分かります。 画像と組み合わせるとこんなこともできます。 jQuery DrawSVGを使うとSVGに書かれている内容をアニメーションしながら描写してくれます。アニメーションGIFのようですが、よりスムーズで綺麗に描かれます。SVGを画像とはまた違った使い方で楽しめるのではないでしょうか。 jQuery DrawSVGはjQuery/JavaScript製
jQuery DrawSVG
FEATURES This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties. Weights less than 2KB minified and 800 bytes gzipped. Easy to use. Easing and stagger support. Free! Tweet USAGE Include jQuery DrawSVG after jQuery <script src="http://code.jquery.com/jquery-latest.min.j
SVGのpathを使ったモーションパスアニメーションの実装方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです 今回はSVGのpathを使ったモーションパスアニメーションの実装方法について書きたいと思います。 【こちらもおすすめ】 ☞ SVGとjQueryで絵を描いているようなアニメーションを実装する方法 SVGのpath要素 path要素を使うことで、好きな図形を描くことができます。 Illustratorを使っている方はよく使ってますよね。Illustratorで描いたパスからSVGを書き出して使うこともできるのですが、今回は直接SVGタグのpath要素に描いて作ってみましょう。 d=”M 50,50 L 200,50 Z” SVGでpathを描く場合は、上のように各コマンドにパラメータをいれることでpathを描画できます。少しクセがありますが、自分で好きなpathを描いてみると慣れてきますので、遊んでみてください。 pathを描画するためのコマンドは下記があります
コレは使ってみたいな！CSSで作成されたアイコンをモーフィングで変形させるスクリプト -Marka
画像やSVGは使用せず、CSSで作成されたサークル・アロー・チェック・リストなど、Webページで使うさまざまなアイコンをJavaScriptで変形させるMarkaを紹介します。 変形は下記のように異なる形状へ変えたり、サイズやカラーだけを変更することもできます。もちろん、CSSで実装されたアイコンをそのまま利用するだけでもOKです。 Marka Marka -GitHub Markaのデモ Markaの使い方 Markaのデモ 上記gifアニメーションの実際の動きは、下記ページで楽しめます。 Chrome, Safari, Firefox, Opera, IEは10+でご覧ください。 各アイコンのスタイルシートファイル では、Markaの使い方を。 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="sty
円や多角形をランダムに配置する背景をSVGで作る その2
「円や多角形をランダムに配置する背景をSVGで作る」の続きです。 もうちょっと使いやすくなるように練習を兼ねてやってみました。 GPBG.js サンプル 1 GPBG.js サンプル 2 GPBG.js サンプル 3 GPBG.jsのJavaScriptファイル 前のはインラインSVGを作ってbodyの最後に入れていましたが、今回はstyle要素を作り、指定したセレクタの背景画像としてData URIにしたSVGを指定するようにしました。 一番簡単に使うと、こんな感じになります。 <script type="text/javascript" src="gpbg.js"></script> <script type="text/javascript" src="script.js"></script> </body>// script.js の中身 (function () { if (wi
背景画像を使わず動的に背景模様を描画できるjQueryプラグイン「NoiseGen」:phpspot開発日誌
NoiseGen Demo 背景画像を使わず動的に背景模様を描画できるjQueryプラグイン「NoiseGen」。 次のような模様を$(element).noiseGen(options); のように呼び出すだけで描画できるプラグインです。 パラメータをいじることでパターン画像を変更できるあたりがなかなか面白いです。パラメータを変えてみて遊んでみるのもよさそう それにしてもこういう背景なら画像を使うのが当たり前ですが、JSを使うという発想が素晴らしいですね。 こうした細かなハックが重なって新しいハックが生まれていきそう。 関連エントリ 背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 背景画像に使えるド派手なフリーのベクターイ
PHPでの画像処理が楽々かつコードも綺麗に書けるPHP5.3用以降用ライブラリ「Imagine」:phpspot開発日誌
Welcome to Imagine’s documentation! ? Imagine, image manipulations reloaded PHPでの画像処理が楽々かつコードも綺麗に書けるPHP5.3用以降用ライブラリ「Imagine」 クラスはネームスペースで分けられて作られており、PHP5.3以降で利用可能。 サムネイル作成や切り取り、図形描画などのよく使われる処理をオブジェクト指向できれいに、あとで見ても分かりやすい状態でコードが書けます。 コード例は次のような感じで、メソッドチェーンを利用して直感的なコードが実現できているのがわかります。 こうしたものでネームスペースを使ったものって無かったので、ネームスペースちゃんとやりたい方にはよさそうですね。 関連エントリ 画像の縮小やトリミングに便利なPHPクラスライブラリ「Zebra_Image」 TwitterやFacebo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
https://codepen.io/stoumann/full/abZxoOM?__cf_chl_jschl_tk__=0e6e3f3b1905b07bb78d32fa4f79bc2b5d6f6578-1607305353-0-Ac279wWqPk0lbRDIguXSlM-0SHwCDpyRUtCxon24kgmF1UIuAWqjLWfNOR53gVTtmAAK1YpFQ3sqWOEUQyyVZrmMjhxl-mx3sgZQ8tU7V6uhmUXePJny28EBHdxzs1ONfrzFn8RrexvkZLcGDKUZ_ENQeSNAfoFhHdgH14uk_8qrwjDD-sInVjmHaa_jq-CLptdj51n-qWAyi8XLoWclm9wkWoaMyDUXuOa3UeqnR0p-xFyLJWWucyErHmc4csyOLdjRJEM75zbAPKjw6fqD5pivorFdiwV_PgPvJROoqRyv_witDcd3f04_heTyHcuwWfs6skvYiXFfUKhWNnrb5xtCuiwOmAgoxZgPrk7xGaq5TYkafz2y0aCJYJPEefcqKFOsNUJvlhWIAtFOQ4V8P4E
[JS]SVGのアイデアが広がる！かわいいパターンのテクスチャがSVGで作成できるスクリプト -Textures.js![[JS]SVGのアイデアが広がる！かわいいパターンのテクスチャがSVGで作成できるスクリプト -Textures.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/22479d89713c68e7c04be9754415c079ec9f7950/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015032308.png)
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA