『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
![ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP](https://cdn-ak-scissors.b.st-hatena.com/image/square/e9606c4c863c616cf825e97c592cd3e648906acc/height=288;version=1;width=512/https%3A%2F%2Fphotoshopvip.net%2Fwp-content%2Fuploads%2F2016%2F01%2Fdouble-exposure-top.jpg)
Take a look at these 25 insanely creative text effects and be amazed! You can download and use these creative text effects for free, but some do require attribution. Even for experienced designers, creating an eye-catching design can sometimes be a struggle. Also, if you are working on multiple projects, it’s necessary to find a glimpse of creativity to sustain your ideas. There are times where cr
こんにちは、デザイナーの佐藤タカアキ(@sato_tkaaki)です。 最近頭の中で「それ全然わかんない 意味が伝達してこない 君が僕の隣にいないこと I can’t forget you」という言葉がひたすらリピートしてて悩む日々を送っています。 さて、僕の主な仕事の一つに、日々更新されるLIGブログのアイキャッチ画像をデザインする仕事があります。 今後はアイキャッチをデザインする上で加工したチュートリアル記事をお送りできればなと思います。(これならブログネタに困ることもない……!) 今回は、タイトルどおり「水面に刻印加工する」チュートリアルをご紹介させていただきます。 そんなに活用する機会のない加工技術ですが、非常に簡単で、5分もあればできるチュートリアルですのでPhotoshopをお持ちの方は実際に自分の手で作ってみましょう。 Photoshopを起動させ、新規作成 まずはPhoto
こんにちは、デザイナーの佐藤タカアキ(@sato_tkaaki)です。 最近、「ラッスンゴレライ」とは何なのかを考えている内に1日が終わってしまい、後悔する日々を送っています。 さて、僕の主な業務は下の画像のような、写真を素材として一枚絵を完成させるグラフィックデザインで、そのほとんどがPhotoshopを使用した合成技術を必要とします。 今まではWeb業界ではあまり需要がないと思い、まとめ記事ばかり書いてきましたが、いま一度“LIGブログはメンバーのインプット&アウトプットの場である”という初心に帰り、自分の学んできた合成記事をちょいちょい出していこうと思います(ガッツリ書くと果てしないので簡単なやつからちょいちょい) ということで、今回はPhotoshopを使ってたったの10分でメタリックな加工をする方法をご紹介させていただきます。 それでは行ってみましょう。 写真を読み込む Phot
こんにちは、デザイナーの白浜です。 今回は人気のポリゴンスタイルの画像をPhotoshopとIllustratorで作成する方法をご紹介したいと思います。 参考サイト まず初めに今回の参考サイトから。 【Photoshop講座】人物をポリゴンスタイル風に加工する https://www.youtube.com/watch?v=Ao0XRwFaoE4 こちらの動画を参考にしました。 パペットワープのキャプチャを撮って塗り分けに使うというかなり斬新なやり方で、サクサクっとポリゴンスタイルを取り入れることができる素晴らしいチュートリアルです。 今回パペットワープは使っていませんが、アクションを使った塗り分けの手法を参考にさせていただきました。 それでは具体的な製作過程をご紹介したいと思います。 写真を元にIllustratorでポリゴンのラインを描く 1. 塗り分けの準備 まず初めに元になる
2021年12月6日 CSS フラットデザインが流行ってからは、背景を一色で塗りつぶしたデザインのサイトが多くなりました。しかしそれだけではなんだか味気ない!という事で、CSS3のアニメーションを使って、徐々に色を変化させてみましょう!色の組み合わせや順番を調整して、パッと目を引くデザインに! ↑私が10年以上利用している会計ソフト! Themifyではホームのファーストビューでビビッドな色を少しずつ変えながら表示しています。今回目指すのはこんな感じの背景です。このサイトではJavaScriptにより色の移り変わりを実装しているようですが、CSS3のキーフレームアニメーションだけでも表現できます! CSS3 キーフレームアニメーションの基本 まずは要素を徐々に変化させるアニメーションについて覚えていきましょう!CSS3の animation プロパティでは、キーフレームを設定して細かい動き
p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 <head> ... <link rel="stylesheet" type="text/css" href="css/beemuse.min.css" /> </head> 各デモは:before, :after の疑似要素を使用しているため、IE8+でご覧ください。一部のスタイルはIE10+になります。
Googleが先日発表した新しいUX「Material Design」の中で特に注目されているのが、タップやクリックをするとインクを落としたように波紋が広がるエフェクト。 これを実装するテクニックを紹介します。 Material Designについては、前の記事(「波紋」のアニメーションを実装するテクニック)で動画を紹介しています。 この波紋のエフェクトはあちこちのコミュニティで盛んで、その中でもここで紹介するエフェクトはかなり美しく仕上がっています。 デモではリストで配置したナビゲーションの各アイテムをクリックすると、そのクリックした地点を中心に波紋が広がり、フェードで消えていきます。 ※上記はエフェクトが分かりやすいよう、各アイテムの高さを広げています。 実際の動作は、下記ページでお楽しみください。 Ripple Click Effect from Google Material De
Creative Photoshop Photo Manipulation Tutorials Photoshop tutorials very useful for making amazing photo manipulation effect using the basic and advance Photoshop techniques. Today, I’ve gather creative photo manipulation tutorials, which will help to learn how to combine different stocks to make a cohesive scene, blend and adjust color, work with lighting effects and many new features. How to dig
子アイテムをパタパタっと折り畳むアニメーションが気持ちいいナビゲーションを実装するスタイルシートのテクニックを紹介します。 デモページ 実装 HTML ナビゲーションの親のカテゴリはdivでまとめ、各子供はリストで実装します。 <div class="navbar"> <a class="menu" href="#">MENU</a> <div class="link large" href="#"> <span class="active"><i class="icon-twitter"></i>Twitter</span> <ul class="hover-bot"> <a href="">Reply</a> <a href="">Favorite</a> </ul> <ul class="hover-top"> <a href="">Follow</a> <a href="">Ret
ポリゴン、シェイプアート、ブラー、等高線、ジオメトリック、ラインアート、シネマグラフなど、最近の気になるデザインのテクニックを身につけるPhotoshopのチュートリアルを紹介します。 時間をつくって、一つずつじっくりと攻めていきたいですね。
SVGをちょっと始めてみたいな、という人にもちょうどよさそうなテキストの周りに表示するボーダーをアニメーションで表示するデモを紹介します。 SVG Border Animation コードは簡単、コピペで利用できます。 HTML <div class="svg-wrapper"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <rect class="shape" height="60" width="320" /> <div class="text">coliss</div> </svg> </div> CSS html, body { background: rgb(20,20,20); text-align: center; height: 100%; overflow: hidden; } .svg
アートワークとして見るだけでもよい刺激を受ける、そんな素晴らしいタイポグラフィ・テキストエフェクトのチュートリアルをまとめてみました。 解説は英語ですが、苦手な人でも各ステップごとにキャプチャが付いているので分かりやすいと思います。
テキストにtext-shadow、背景に美しいlinear-gradientを効果的に使い、かわいらしいエフェクトに仕上げたスタイルシートを紹介します。 Milky Font Effect 実装は簡単で、コピペで利用できます。 HTML p要素などに、classを添えておきます。 <p class="milky">美しい日本語</p> CSS エフェクトの大切なポイントは「text-shadow」と「background」、カラーを変更しても面白そうですね。 .milky { font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;; text-transform: uppercase; display: block; font-size: 72px; color: #f1ebe5; text
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く