Figmaでちょっとしたデザインをつくるときに使っているプラグイン8選 - ICS MEDIA
アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか？ そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で使用できるので気軽に試してみてください。 Figmaのプラグインを使ったことがないという方は、以下の記事で使い方を紹介していますので参考ください。 『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』 1. Noise & Texture Noise & Texture | Figma 「Noise & Texture」は、ノイズやさまざまなテクスチャーを画像として作成できるプラグインです。 プラグイン実行後、設定パネル内の［Add to Canvas］をクリックすると
これは覚えておきたい！ CSSの:has()疑似クラスを使うと、こんな面倒な実装も簡単なCSSだけできる
CSSの:has()疑似クラスは去年末にFirefoxでサポートされ、これですべてのブラウザにサポートされました。2024年は、:has()疑似クラスを使用する機会が増えますね。 CSSの:has()疑似クラスは指定した要素がある場合にのみスタイルを適用できる、if文のような非常に便利なCSSの機能です。この:has()疑似クラスの基本的な使い方とシンプルだけどクールな使い方を紹介します。 ↔️ Sideway selection in CSS with :has() by Francesco Vetere 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 :has()疑似クラスのシンプルでクールな使い方 実装の解説 :has()疑似クラスのシンプルでクールな使い方 みなさん、こんにちわ！👋 この記事では、最近すべてのブラウザに
フォトショップですぐできる！オススメの文字加工10選
この記事では、フォトショップでできるオススメの文字加工をまとめてご紹介します。 はじめてのひとでも簡単にできる、フォトショップの基本の使い方だけで完成のお手軽で、ハイクオリティな仕上がりを実現できるテクニックが満載です。 「デザインしたいけど時間がなくて。」、そんなときは、ほんの数クリックで魅力的な文字加工ができるテキストエフェクト素材も利用してみましょう。 コンテンツ目次 1. ワンランク上のネオンサインエフェクト 2. 超リアルな黄金文字エフェクト 3. 活字風の自然な「にじみ」文字 4. レトロなスタンプ風「かすれ」文字 5. 圧倒的な「ぼかし」文字加工 6. より繊細なエンボス文字加工 7. メタリック＆光沢感！80年代クロム合金エフェクト 8. 輝きが違う！ライティング・グローエフェクト 9. スプレーでペイントしたステンシル文字 10. 手描き風ドリップペイント文字加工 11.
サンプル付コピペOK！すごいCSSアニメーションライブラリ30選【2022年版】
ウェブサイトの印象を大きく左右する「動き」。 現役Webデザイナーがこれは外せない！というCSSアニメーションライブラリをまとめてご紹介。 任意の要素にクラスを付与するだけで、用途に応じたアニメーションを実装できる便利なライブラリを整理しています。 フワフワやユラユラ、ポヨンといった弾む系の動きから、背景アニメーションなどWebサイトの印象づくりに欠かせない動きが揃います。GitHubレポジトリのスター数が多いものを中心にセレクト。 コンテンツ目次 1. 万能CSSアニメーション 2. 文字エフェクト向け 3. ホバーエフェクト向け 4. 画像、背景向け 5. ふわふわ、ゆらゆら、面白系 6. ハンバーガーメニュー向け 7. クリエイティブなアニメーション 8. よりなめらかな動きを表現するには 9. アニメーションの参考リソース一覧 万能CSSアニメーション Animista 基本となる
Illustrator文字の使い方をマスター！テキストエフェクト用チュートリアル116個【総まとめ】
この記事では、Illustratorをつかった文字加工、テキストエフェクト向けチュートリアルをまとめています。 当ブログでIllustratorの最新チュートリアルまとめを紹介しはじめた、2013年ごろまでさかのぼり、過去8年間のイラレ用テキストエフェクトをまとめたコンプリート集。 Illustratorがはじめてのひとから、普段使いしているプロデザイナーにもおすすめしたい、テキストエフェクトの基本を学ぶベストテクニックが揃いました。 サイバーパンク、80年代のレトロエフェクトから、メタリックな光沢感の3Dエフェクト、話題のニューモーフィズム・スタイル、面白フード系エフェクト、ネオンエフェクト、トロトロに文字が溶けたスタイル、透明ガラスなどあらゆる文字エフェクトの基本を学ぶことができます。 フォトショップのテキストエフェクト向けチュートリアルまとめ フォトショップでの文字の使い方も一緒に覚
動きが新感覚！Web制作で参考にしたいUIインタラクション、アニメーション36個まとめ
この記事では、ウェブデザイン制作で活用したい最新UIインタラクション、アニメーションをまとめてご紹介します。Webやモバイルアプリの参考アイデアとして取り入れたい、ユニークで素敵なアニメーションを中心に揃えています。 最新ウェブデザインも一緒に確認することで、デザイントレンドや動向をうまく掴むことができます。 Webアイデアの宝庫！注目したい最新ウェブデザイン35個まとめ Web制作の参考アイデアに！いま話題の最新ウェブデザイン50個まとめ いまWebがすごい！参考にしたい話題の最新ウェブデザイン37個まとめ 【総まとめ】2019年印象に残った世界のベストWebデザイン厳選50個 新感覚の動き！Web制作で参考にしたい最新UIインタラクション、アニメーションまとめ #blacklivesmatter 世界中でムーブメントを巻き起こしている、黒人に対する暴力や構造的な人種差別の撤廃を訴える
ゲームエフェクトのはじめかた① | FLYPOT.LLC
ゲーム業界において常に人材不足と言われているゲームエフェクトデザイナーですが、「ゲームエフェクト 初心者」、「ゲームエフェクト はじめかた」等で検索してもそれらしいページがほとんどヒットしないので、これからゲームエフェクトを始めてみたい人向けにちょっと記事を書いてみることにしました。 どんなツールを使うの？ ゲームエフェクトに使われるツールですが結構いろんな種類があります。 大きく分けて２つあり、 ゲームエンジンに内蔵されている標準のツール と 外部ツール（ミドルウェア） になります。まず、標準のツールだと Unreal Engine であれば「Cascade(カスケード)」か「Niagara（ナイアガラ）」 中国の方がUnrealで制作されたエフェクト？カッコイイ Unityであれば「Shuriken」か「Visual Effect Graph」になります。 Shurikenだけだとこれ
Unityでの水彩画風ポストエフェクト - Qiita
今回以下のアドベントカレンダーにも投稿しました ・ARKit Advent Calendar 2018：UnityとARkitで電脳コ◯ルなアプリを作った話 https://qiita.com/awesome/items/5b8ee2b62c0076fbc569 以前Twitterで話題になっていた、UE4による水彩画風ポストエフェクト を、Unityで作ってみました。 以下ツイッターに投稿した動画 ■OnRenderImageを使う。 引数としてレンダリングされた結果をRenderTextureとしてもらえるので、それに対してシェーダーでフィルターをかけることでエフェクトをかけることができる。 OnRenderImage関数内で とすることでレンダーターゲットにシェーダーを割り当てることができます。 引数に渡すrenderTargetとマテリアルを何個かあらかじめ作成しておき、 何度も何
演出なら任せとけ！！パーティクル系エフェクト制作ツール「Effekseer」！！ | CG GEEKS
2018.04.27CGソフト, Others演出なら任せとけ！！パーティクル系エフェクト制作ツール「Effekseer」！！ パーティクル系エフェクト制作ツール「Effekseer」を紹介させて頂きます！！ かっこいいパーティクル表現はそれ単体でもかなり効果的に機能するのでこういうのあると助かりますね！！ さらに「Effekseer」はDirectXやOpenGLを用いたアプリケーションでもエフェクトが再生できるようにするランタイムやUnityで作成したエフェクトを再生できるようにするプラグインも配布してるそうです！！ 興味のある方は下記リンクからどうぞ！！ http://effekseer.github.io/jp/
Unityで炎エフェクトを作成！ 拡張機能Shader Forgeを使いこなすシェーダーテクニック - ICS MEDIA
Unityで炎エフェクトを作成！ 拡張機能Shader Forgeを使いこなすシェーダーテクニック Unityアセットストアには、36,000点以上のアセットやツールが販売されていて（※1）、制作効率アップにはかかせない存在となっています。本記事では、アセットストアのなかでも人気が高いノード型シェーダーエディター「Shader Forge」(従来は有料でしたが、2018年5月より無料）を使ったシェーダーテクニックをご紹介します。直感的な操作で制作を進められ、レスポンスもよく安定していますので筆者オススメのツールです。 ノード型シェーダーエディターの利点は、シェーダーコードの細かい文法を知らなくてもノードの操作だけでエフェクトが作成できることです。できることが少ない分、エラーでつまづくことも少なくなります。シェーダーの導入として手にとってみると良いでしょう。本記事でご紹介するシェーダーテクニ
エフェクト作成入門講座 Three.js編 RPGのセーブポイント風の魔法陣 - ICS MEDIA
昨今のWebサイトではWebGLを利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。 しかし、いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。 デモを別ウインドウで再生する ソースコードを見る ※このデモはThree.js r146とTypeScript 4.9によって書かれています。 本記事では、セーブポイント風なエフェクトの作成を通して、T
SVGでアウトラインをカスタマイズしてみよう
2014年7月30日 SVG これまで、二回ほどSVGに関する記事を書きましたが、SVGの面白さは伝わっていますかね…！？今回はSVGのアウトライン（線）の装飾に注目！オブジェクトを徐々に描いていくラインエフェクトにも挑戦します！SVGの基本的な情報や書き方は過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」をご覧ください！ ↑私が10年以上利用している会計ソフト！ SVG線種プロパティの基礎 基本的な書き方ですが、SVGのコード内に直接記述する方法と、CSSで指定する方法があります。例えば stroke プロパティを使う場合： <svg viewBox="0 0 200 200"> <line x1="10" y1="10" x2="190" y2="190" stroke="#000"/> </svg> のように、 stroke="#000" と直接記述しても
Unity パーティクル(7) Meshで3Dパーティクル 回転の調整 - LemonteaのUnity部屋
こんにちは。レモンティーです。 youtu.be テクスチャを使えば自由な２D画像をパーティクルにできますが、 これを３Dでやりたい場合はメッシュを使います。 以前ここでチラッとやったことはあったのですが Unity Particlesystem パーティクルを進行方向に伸ばす - LemonteaのUnity部屋 今回は自作のモデルで試してみます。 やり方はRendererモジュールの Render ModeをMeshにして、好きなメッシュを選びます これでパーティクル一粒一粒がメッシュの形になりました。 しかし、向きが合っているとは限りません。 しかもパーティクルなので Transformで回転させても粒は回らないので メインのここで回転させます また、モデル用のマテリアルがある場合は Rendererモジュールでそれを設定するといいです。 ただし、色のアルファ値を少し落としてあげげな
【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす
2017/6/3に開催されたUnity道場スペシャル 2017博多の講演スライドです。 講師：中村剛（ユニティ・テクノロジーズ・ジャパン合同会社） TextMesh Proを使いこなすためのヒントを紹介します。 ・TextMesh Proとは何か、 ・TextMesh Proを使うと（uGUIと比較して）何が良いのか ・どのように使うのか 講演動画：https://www.youtube.com/watch?v=Dx2l1-w7KEM Unityのイベント資料はこちらから： https://www.slideshare.net/UnityTechnologiesJapan/clipboardsRead less
[iOS][Swift3.0] スターウォーズっぽいトランジションを入れるStarWars.iOS | DevelopersIO
準備 導入 CocoaPodsで追加します。 use_frameworks! target "ターゲット名" pod 'StarWars' end post_install do |installer| installer.pods_project.targets.each do |target| target.build_configurations.each do |configuration| configuration.build_settings['SWIFT_VERSION'] = "3.0" end end end 実装 遷移の作成 まずは単純な画面遷移を作成します。今回はFirstViewControllerとSecondViewControllerを用意し、FirstViewControllerのOPENボタンを押すとモーダル（Present Modally Segue）
![[iOS][Swift3.0] スターウォーズっぽいトランジションを入れるStarWars.iOS | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/c83d413afe58d904e71a2ee3e849a272825f43c1/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2015%2F01%2Fios_ui.png)
Unityでの「エフェクト」や「演出」作りで感じたこと | albatrus.com
こちらはUnity Advent Calendar 2016の16日目の記事になります。 今回は、半年くらい前からUnityを使ってエフェクトの作成や演出を作る業務に携わってきた中で感じたことをなどをブログに書こうと思います。 演出を携わるようになったきっかけ Unityでゲーム開発を始めて１年半くらいになるのですが、最初の１年位はクライアント側と呼ばれるインゲームやアウトゲームのロジック周りを中心に業務をしていました。 大きなプロジェクトなので、メンバーによって何をするかが固定化しているので、なかなか他の業務をすることができないのですが、去年の今頃から「エフェクトを作りたい」「演出を考えたい」としつこく言い続けていたのが功を奏したのか、ちょうどプロジェクト自体、演出面に力を入れていこうという流れもあり、クライアント側の業務と並行してエフェクトを作り始めることになりました。 エフェクト・演
Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
講演動画：https://youtu.be/YXGmiWzHxeo 解析編：https://www.slideshare.net/EpicGamesJapan/ue4-festeast2019-60fpsanalysis/ 2019年10月6日に行われた「UNREAL FEST EAST 2019」における「60fpsアクションを実現する秘訣を伝授」の登壇資料です。 ●公式サイト https://unrealengine.jp/unrealfest/ === 発売中のタイトル「NARUTO TO BORUTO シノビストライカー」に開発中のプロジェクトの事例も加えて、60fpsアクションゲームを実現するためのポイントや、パフォーマンス・チューニングについて解説します。おまけとして「NARUTO TO BORUTO シノビストライカー」のグラフィック面の技術を紹介。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blenderで作るセルルックアニメーションやエフェクトの表現
【Unity】uGUI でキランと光るエフェクトを使用できる「UIEffect」紹介 - コガネブログ
CSSだけでここまで出来る！？タイトルや見出しにオススメなぬるぬる動く最新のCSSテキストエフェクト19選 | WebDesignFacts
