【無料のGIGAZINE読者限定コードあり】AIを駆使して動画を自動で高画質化できる「Winxvideo AI」を使ってみたレビュー
最先端のAI技術を用いることで自動で動画を高画質化・フレーム補間・手ぶれ補正することができるソフトウェアが「Winxvideo AI」です。過去に撮影した「今では低画質になってしまった動画」を高画質化したり、「動きながら撮影した手ぶれのひどい動画」に補正をかけたりするのを全自動で行えるということなので、実際に使ってみました。 【無料】Winxvideo AI - 最高の動画、写真高画質化・修復＆動画変換ソフト｜無料体験 https://www.winxdvd.com/winxvideo-ai-ja/ Winxvideo AIをインストールするには、上記の公式サイトにアクセスしてトップにある「無料ダウンロード」ボタンをクリック。 ダウンロードしたインストーラーをダブルクリックで起動。 「インストール」をクリック。 数秒でインストールが完了するので、「今すぐ起動」をクリック。 Winxvide
CSSで角丸を美しく実装する方法、相対角丸のテクニック
角丸を外側と内側のパネルに使用した際、違和感を感じたことはありませんか？ 数値的には同じ値の角丸を使用しても、内側の角丸の方が少し大きく見えて、不格好になってしまいます。 この外と内の角丸をバランスよく美しく、CSSで実装する相対角丸のテクニックを紹介します。 Relative rounded corners by Andy Bell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSで美しい角丸を実装する方法、相対角丸 CSSで美しい角丸を実装する方法、相対角丸 角丸は非常に人気が高いデザインです。しかし、外側と内側に同じ値の角丸があると、違和感があり、少し奇妙に感じます。 外側と内側に同じ値の角丸 この角丸に違和感を感じる理由は、値が同じ（たとえば、20px）であっても、それぞれの角丸の中心点が異なるからです。同じ値であ
解像度の低い画像をAIが解決！放り込めば倍サイズのWebツール Image Upscaler
「この写真、粗くて使えない。」 そんなときは、日々進化する人工知能、AIのおかげで、解像度の低い画像を最大4倍まで拡大できる Image Upscalerで解決しましょう。 ウェブサイトに写真を放り込んで、数秒待つだけで完成、できた画像はそのままJPEGファイル形式で保存できるので、フォトショップなどのデザインツールも不要です。 Image Upscaler https://clipdrop.co/image-upscaler このツールは、画像のクオリティはそのままにくっきりとしたシャープさと、何百万枚もの画像で訓練されたAIによるリアルな再現によって解像度をアップ。 さらに、ザラザラした写真のノイズ除去も同時に行います。 画質を倍にするのは無料、月5ドル（年間）のProプランは4倍まで対応できます。3日間の無料体験トライアルもあり、キャンセルはいつでも自由となっています。 このProプ
【Photoshopの小技】切り抜きの精度をグッと上げる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさん、Photoshopで毎日切り抜いてますか？ 今回はPhotoshopの切り抜き精度を上げる小技をお伝えします。 独学でつまずいていませんか？ Illustratorの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 切り抜く方法はたくさんある 画像を切り抜くためには切り抜く部分の選択範囲をとる必要があります。画像加工のすべては選択範囲から始まると言っても過言ではありません。 選択範囲を取る方法はたくさんあります。 ・クイック選択ツール ・オブジェクト選択ツール ・ペンツール ・被写体を選択を使う ・マスク機能 などなど、作業時間や目指す精度
グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
【フォトショップ】リアルすぎるエンボス加工のつくり方、レイヤースタイルで簡単
この記事では、フォトショップを使った超リアルなエンボス加工のつくり方をご紹介します。 別名浮き出し加工とも言われる「エンボス加工」は、紙面に凹凸をつけたような仕上がりが特長ですが、今回はこの質感をフォトショップで表現します。 レイヤースタイルを適用するだけで完成のお手軽チュートリアルで、繊細な質感を表現できるエフェクトとなっています。 このチュートリアルは、Texturelabsによる英語版オリジナルチュートリアル「Emboss Paper Text & Logos」をアレンジしたものとなります。 加工前ビフォー 加工後アフター このチュートリアルに必要なのはフォトショップだけ。７日間の無料体験もあるので、まずははじめてみませんか？ 7日間無料体験 Photsohopを無料ではじめる フォルダに放り込むだけでエンボス加工に まずはフォトショップを開き、新しいドキュメントを作成しましょう。カ
月のテクスチャ素材はNASAのが世界最高峰の高品質！10年に渡り収集したデータから作成された -CGI Moon Kit
NASAが10年に渡り収集したデータから作成された、世界最高峰の高品質な月のテクスチャ素材を紹介します。 多くのアーティスト・クリエイターがテクスチャを利用できるようにと、無料でダウンロードできます。 CGI Moon Kit NASA Goddard Creates CGI Moon Kit as a Form of Visual Storytelling 月のテクスチャ素材は、NASAの月面偵察オービターカメラとレーザー高度計機器チームによって組み立てられたデータから作成されている、とのことです。 テクスチャは科学的にではなく、美学的に最適化され、3Dの球体モデルに利用できます。科学的用のソースデータ: Hapke Normalized WAC Mosaic Credits: NASA/Goddard/Scientific Visualization Studio 月のテクスチャ素材の
Anime4K - 高速に画像を拡大
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ぼやけた映像をくっきりとさせたり、拡大できるのがwaifu2xです。イラストや写真に特化し、世界中から高い評価を受けています。処理時間が若干長いですが、それだけハイクオリティな成果が得られます。 そんなwaifu2xに対抗するのがAnime4Kです。リアルタイムでも処理できる、とする高速さが売りです。 Anime4Kの使い方 実行例です。右側が元画像、左が拡大版です。精度は十分ではないでしょうか。 Anime4Kはwaifu2xの300倍以上高速としています（1080pから2160pへの拡大時）。Java版の他、HLSLやGLSLといったシェーディング言語を使った版も用意されています。昔のぼやけた動画もAnime4Kを使えば鮮明にできるかも知れません。 Anime4KはJava製の
商用利用無料で、とにかくかっこいい高品質な写真素材を探している人は要ブックマーク -Unsplash Awards 2017
Unsplash Awards 2017で、自然・風景、空撮、人物、動物、スポーツ、食材・料理、インテリア・建築、モノクロ写真など、全12部門でもっとも印象的でかっこいい高品質な写真素材が選出されました。 商用利用無料で、とにかく抜群にかっこいい高品質な写真素材を探している人は要ブックマークです。 Unsplashで扱われているすべての写真素材は個人でも商用でも無料で利用できます。クレジットの表記義務もありません。 ダウンロードした写真素材はそのまま利用するだけでなく、編集・加工して、Web・動画・紙などのさまざまなデザインに無料で利用できます。 ライセンスページ ライセンスを確認したところで、Unsplash Awards 2017に輝いた12作品を紹介します。
軽量・簡単なのにいきいきしたアニメーションが付けられる！anime.jsを触ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Tween.jsや、以前づやさんが紹介していたTweenMaxと比べるとだいぶ軽量ですね。 もちろん他のライブラリと比べるとできることに限りはありますが、それでも表現豊かなアニメーションを簡単につけることができます。実際に私もこんなデモを作ってみました。 See the Pen anime.js Sample – demo by Yusuke Omi (@Im0-3) on CodePen. 使い方はかなりシンプルなので、覚えれば簡単にアニメーション出来ますよ！ライブラリのサポートブラウザは以下の通りです。 Chrome Safari Opera Firefox IE 10+ IEは10以上の対応です。ではさっそく、使い方を見てみましょう。 anima.jsを実際に触ってみよう！ まずはとりあえず動かしてみましょう。ボールが上に移動するアニメーションもたったこれだけで書くことができます！
Pica - Canvasよりも高品質、かつ高速な画像リサイズライブラリ MOONGIFT
HTML5のCanvasとJavaScriptを使うことによって画像をクライアントサイドで加工できるようになりました。特に多いのが縮小に関するニーズです。スマートフォンで撮影した画像はサイズが大きいので、転送にかかる時間や帯域の問題があります。そこで事前に縮小するのです。 しかし縮小した時の画像の品質はブラウザに依存してしまいます。それを防ぎ、より高品質にリサイズできるのがPicaです。 Picaの使い方 Picaの例です。細かくリサイズ時の設定ができます。 任意の画像で試せます。 独自の縮小アルゴリズムによって、高速かつ高品質なリサイズが実現しています。処理はWebGLとWebWorkerを利用について指定できます。Canvasで単純に縮小すると潰れてしまったり、シャギーが目立つような部分もPicaを使うと滑らかに縮小されているのが分かるはずです。 PicaはHTML5/JavaScri
無料でロスレス圧縮＆プログレッシブ表示もサポートしPNGより40％以上も高圧縮な画像フォーマット「FLIF」
一般的な画像形式のPNGに比べて40％以上ファイル容量を小さくでき、ロスレス圧縮やプログレッシブ表示もサポートする画像フォーマット「FLIF」が登場しました。しかもFLIFはApache 2.0ライセンスで無償提供されています。 FLIF - Free Lossless Image Format http://flif.info/ 以下のグラフは、WebPを開発するGoogleの研究にならって行われた画像圧縮テストの結果を示したもの。えんじ色・赤色(インターレースなし)のFLIFフォーマットは、他の画像フォーマットよりも高い圧縮率を示しています。同画質ではJPEG 2000比で53％、PNG比で43％、圧縮率の高さで知られる「BPG」比で22％、WeP比で14％もファイル容量が小さいとのこと。 画像がデータの先頭から読み込まれるのではなく、ダウンロードサイズに応じた画像を表示できるプログレ
plotly.js - 3Dまでこなす高度なグラフライブラリ MOONGIFT
Webに足りないのは高度な表現力と言われていますが、HTML5のSVGやCanvasによって大幅に向上しています。しかし、それらを使いこなしたり、プログラミングと組み合わせるのは大変です。 そこでライブラリを使って手軽に表現力を増してみましょう。今回はグラフライブラリのplotly.jsを紹介します。 plotly.jsの使い方 サンプルです。マウスオーバーにも対応しており、ハイレベルな描画ができます。 マウスで囲んでズームできます。 こんなグラフまで。 データの幅から平均値を使ってトレンドを見ることができます。 この淡い感じがすごいですね。 WebGLを使った3Dグラフにも対応しています。 基本的なグラフにももちろん対応しています。 複雑かつ使われる機会も多いグラフ。 地図やローソクチャート。 3Dチャートは使いこなすのが難しそうですが、インパクトがありますね。 plotly.jsはグラ
OpenSeadragon - こんな細かく！ズーム対応の画像ビューワー MOONGIFT
カメラの解像度は年々上がる一方ですが、そこまで高解像度で撮った写真もコンピュータ上で表示するだけではサイズのムダかも知れません。4K、8Kディスプレイになれば違いますが、1080pレベルのディスプレイでは表現し切れていない部分があるでしょう。 そこで写真をズームして表示できるOpenSeadragonを使ってみましょう。ズームイン/ズームアウトすることでこれまで見えていなかった細部まで確認できるようになります。 OpenSeadragonの使い方 サンプルの写真です。 ドラッグで写真を動かせます。 ズームするとこんなに細かいところまで。 フルスクリーンモードもサポートされています。 フルスクリーンで拡大。書かれている文字まで読めますね。 せっかく高解像度で撮った写真ですからそれに合わせたビューワーを使って表示するのが良いでしょう。思いもしなかった被写体が確認できるかも知れませんよ。 Ope
15 Fresh & High Quality Free Icon Sets In PSD Format
In this compilation, we are showing 15 fresh and high quality icon sets in PSD formats that are absolutely free to use. This is another useful compilation for the designers as these icon sets are in PSD format they can easily edit them according to their own needs. Moreover, all of these icons sets are of high quality. These PSD files will help them in saving their time as well as let them complet
[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js
デモページ 物理法則に基づいたさまざまな動きは、ブルーのプルダウンからいろいろ試すこともできます。 Dynamics.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="dynamics.js"></script> </body> Step 2: JavaScript 適用するエレメントを指定し、アニメーションを設定します。 elは要素、el内のプロパティはアニメーションさせるプロパティと値、typeはアニメーションの種類、frequency, frictionはアニメーションの細かい設定、durationはタイミングです。 var el = document.getElementById("logo") dynamics.animate(el, { translateX: 350,
![[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/5bf61a2d1b7c4461469ad3d2119edd7583b7f517/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015062806.gif)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のUIデザインで見かける、美しいCSSグラデーションのコードのまとめ -Design Gradients
複雑なアニメーションにも対応できる、パフォーマンス重視のJavaScriptアニメーションエンジン・「KUTE.js」
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
SKUAWK: PUBLIC DOMAIN PHOTOS
