写真やイラスト画像をカンバスに描いたようにするPhotoshopのチュートリアル
写真やイラストの画像をカンバスに描いたようにするPhotoshopのチュートリアルを紹介します。 また、チュートリアルのアクションを作成したので、よければどうぞ。 元画像、左：イラスト（©みなぎあき）、右：写真 [ad#ad-2] 以下に紹介するチュートリアルは、下記ページを元にしたものです。 Canvas Texture Imitation Step 1. 元画像の調整：ノイズ 画像をPhotoshopで開き、そのレイヤーを複製（[Ctrl]+[J]）します。 複製したレイヤーを指定し、[イメージ]-[色調補正]-[色相・彩度]を選択し彩度を少し下げた後、レイヤーの不透明度を「70%」にします。 複製したレイヤーと元のレイヤーを結合し、[フィルター]-[ノイズ]-[ノイズを加える]を選択し、量を「10%」にして「OK」ボタンをクリックします。
MEMOGRAPHIX
ブログを移転してしばらく経つ。なにかあったとき引っ込められるように、しばらくは特に告知せず書き続けていたのだが、問題なかったので新たなURLで引き続き活動することにした。 新ブログは下記。お手数ではあるがRSSやらブックマークやら購読やらの変更をお願いしたい。 http://text.sanographix.net過去記事の移転は大変なのでやらない。今後もそのままこのtumblrで見られる。また、移転後も特に記事の書き方は変わらず、こんな調子で書くことにする。 4年半Tumblrで日記を書いてきて、大変お世話になった感がある。が、いまべつのプロジェクトでTumblr結構触ってるし、引き続きほかの場所では世話になりそうである。 引き続きこちらでよろしくお願いします。 同人サークル konel（旧 jadda+）では、8/14のコミックマーケット90で新刊を頒布する。詳しくは下記の告知サイトか
光を効果的に使用したPhotoshopのチュートリアル集：Part 13
光、光源、光線、光跡を効果的に使用したPhotoshopのチュートリアル集のPart 13です。 Michael Jackson Wallpaper Soul Rebel Poster Tutoria
[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
サイト閲覧者の潜在的意識に訴えかけてコンバージョンを高める「画像」選びのテクニックとその実例
ウェブサイトに用いる写真の選び方・使い方によってサイトを閲覧する人の潜在的な意識に働きかけて、サイト自体の印象をコントロールし、究極的にはより良好なコンバージョンを得るためのコツを、マーケットリサーチやSEOに携わるニック・コレンダ氏がブログで明らかにしています。 Which Stock Photos Convert Higher? http://www.nickkolenda.com/which-stock-photos-convert-higher/ 人間は写真を見たときに脳のさまざまな回路が刺激を受けて、無意識のうちにさまざまなイメージを連想するものだとのこと。そのため、この無意識の「連想ゲーム」を逆手に取ることで、読者にサイトポリシーを明確に伝えたり、より良いコンバージョン率を達成したりできるとコレンダ氏は考えています。 コレンダ氏はさまざまな学術論文を参考に、人は写真や画像から以
ノンデザイナーのための25のグラフィックデザインのコツ | POSTD
>このコツを大いに活用してグラフィックデザインに挑戦してみてください！ ソーシャルメディア向けのデザインからイベント用の招待状まで、どんなデザインであろうと使えるグラフィックデザインのアプリはたくさんあります。 ペアリングフォントやスケールから行揃えやホワイトスペースまで、デザインの世界は複雑な面を持ちます。この25のグラフィックデザインのコツが、創作過程のあれこれを通してあなたの手助けになるでしょう。 各項目をイメージした画像をクリックして、 独自のデザイン に編集してみましょう。楽しいデザインを！ 01. フォント頼みをやめて、書体を制限してみる このデザインを編集してみる シンプルかつ効果的なグラフィックデザインのために読みやすいフォントを使いましょう。いくつもの書体を使用したデザインは読みづらいものです。統一されたフォントを使うようにしましょう。 ここではAileronのフォントフ
[JS]パネルがスムーズにスライドするアクセシブルなスクリプト
ニュースなど複数のコンテンツを配置したパネルがスムーズにスライドする、アクセシブルで軽量（3KB）なスクリプト「Accessible News Slider」を紹介します。 Accessible News Slider demo パネルはリスト要素で実装されており、テキストリンクと画像リンクでスムーズにスライドし、「view all」をクリックするとパネルの全内容を表示します。 「view all」でパネルの全内容を表示 また、アクセシビリティにも配慮されており、WCAG 1.0のアクセシビリティの必要条件を満たして実装しているとのことです。 スクリプトやスタイルシートのオフ時は下記の表示になります。
CSSで括弧を表現したサンプル - NxWorld
丸括弧（） 頭から微妙な見栄えですが、**丸括弧（）**を表現してみたものです。 HTMLとCSSはそれぞれ下記のようになっており、擬似要素を使って生成したものにborder-radiusを指定します。 <div class="parenthesis"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p> </div> .parenthesis { position: relative; width: 500px; padding: 15px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .parenthesis::before, .parenthesis::after { position: absolute; top:
デザイナーじゃない人が気をつけるべきデザインの基本。（10万PV越えに感謝。5年ぶりに追記） : 雲の上に音符あり。
友人のデザイナーがアプリのデザインをタダでやってくれることになったとします。あなたはさぞかし「持つべき友よ」と自己満足に浸ることと思います。でも、その瞬間に糞アプリが決定します。 20本に19本が糞アプリというのと同じように20回のうち19回のデザインが糞デザインだったりします。この状況は実は簡単に打開できます。20回リテイクを繰り返せばいいだけです。 カードゲームバトルをやっているディレクターも同じことを言ってました。カードのデザインでは、20回のリテイクなんて当たりまえだそうです。 また製造メーカーの開発者も「自社デザイナーで使える奴がいないんだよな」とぼやいておりました。つまり、どの分野であれ自称デザイナーのほとんどが屑同然ということでもあります。 さすがに友達に20回も出し直しさせたら人間関係にヒビが入りますよね。でも、あなたの命を注ぎ込んだ制作活動を邪魔する者は排除すべきなのです
著作権放棄の高品質な写真素材を配布する・「StockSnap.io」
StockSnap.ioは著作権放棄された高品質な写真素材を配布するWebサイトです。配布されている写真は全てCC0で誰でも自由に利用可能となっています。解像度もなかなか高めで良いですね。写真はクロスプロセスやモノクロームなど、加工されたものが多い印象です。毎週、数百毎追加しているそうなので覚えておいて損は無さそうです。 StockSnap.io
Bluetooth・USB・Macのコマンドキーなどのロゴ・シンボルのデザイン由来まとめ
GoogleがGmailをリニューアルした際に文字を書く代わりにすべてをアイコン化したのは、全世界展開しているがゆえに各地域の言語に頼らず、ぱっと見るだけで機能をイメージしてもらう方がよいという判断であったわけですが、同様にして「Bluetooth」「Macのコマンドキー」「電源ボタン」「USB」「ピースマーク」といったロゴやシンボルも同じような目的で作られています。では、一体どのような由来でああいうデザインになったのか？というのがよくわかるムービーがYouTubeで公開されています。 Mind-Blowing Origins Of Everyday Symbols - YouTube ◆Bluetooth 900年代後半、Harald Bluetoothというノルウェーとデンマークを治めたヴァイキングの王がいました。 Bluetooth規格を発明した開発者は、二国間を交渉のみで平和的に統
小さな変更で大きくUXを改善するマイクロデザインってなに？ | WebNAUT by Beeworks
※この記事は2015年2月4日に執筆された記事です。 1月も過ぎ2015年のトレンド予想も出そろった頃でしょうか？ 王道な話題が語られるなか、数名の海外デザイナーからマイクロデザイン、マイクロコピー、マイクロインタラクション、マイクロUXといった言葉があがっていたのが気になったデザイナーTXです。 このマイクロデザインという言葉、概念としては新しくないのですが、 日本ではまだまだ認知度が低いようなので今回はその”マイクロ”な部分をクローズアップしていきたいと思います。 目次 マクロデザインとマイクロデザイン マイクロコピーとは？ マイクロインタラクションとは？ マイクロデザインとブランディング まとめ マクロデザインとマイクロデザイン マクロ/マイクロデザインを家で例えるなら、マクロデザインはその家の外観でマイクロデザインはドアの種類や階段の形などの細部のこと。 WEBデザインでいうと、マ
第1回 データベース設計とは：初めてのデータベース設計｜gihyo.jp … 技術評論社
かつては非常に高価なもので、手軽に導入できないという印象のあったデータベースですが、現在では、PostgreSQLやMySQL、Firebirdなどといったオープンソースのデータベースが商用のものに引けを取らない機能、性能を備えるようになり、それほど規模の大きくないWebアプリケーションであっても、あたりまえのようにデータベースが使用されるようになりました。 本特集では、Webアプリケーションを初めて開発するという方に向けて、データベース設計の基本について説明していきます。なお、一言にデータベースといってもいろいろなものがありますが、いわゆるテーブルによってデータを管理するリレーショナルデータベースを対象とします。 今回は、データベース設計の全体的な流れについて説明します。 データベース設計とは、データベースによってデータを管理できるように、現実の世界を抽象化してデータモデルを作成していく
第5回 カラースキームを決めるために必要なツールと注意点 | gihyo.jp
前回は自己紹介をの制作を題材にして、参考資料を活用することにフォーカスしてお送りしました。今回はさらに細かいところにフォーカスしていきます。 カラースキームを固める 前回考えたプロセスの中で、自己紹介に関連するキーワードを書き出してみました。 それらのキーワードをもとに、今度はページのカラースキームを考えてみましょう。 基本のベースカラーが決まれば、そのカラーを基準にパレットのバリエーションも増やすことができます。 配色については、色彩理論[1]を身につけておくとカラースキームを考えるときに役立ちます。 また、色彩に関するセンスは経験によってより洗練されていくものだと考えています。いろいろなパターンを作りながら、試行錯誤していくことが大切です。 Web 上だけを見ても自動的にカラースキームを生成してくれる、便利なカラースキームジェネレータなどが多くあります。ゼロからつくれなくても、こういっ
デザイナーがいいロゴを作るための7つの最低条件
デザイナーのみなさん、ロゴ好きですか？ 私は三度の飯よりロゴが好きです。 その始まりは4〜5歳の頃。 地元熊本にサンリブとマルショクって同じ系列のスーパーがありまして、 このロゴが形は同じなんだけど一部がベタ塗りか斜線かって違いがあって、 それだけで印象がまるで違うんですね。 「サンリブ垢抜けてんなー」 「マルショク田舎くせーなー」 って子供心に感じてたんです。 それから色んなロゴが気になりだして 今では自分で作っちゃってるので天職ですね。 今までにご提案したデザインの数だけでいうと1,000点以上制作しています。 バランスの取れた一般的なデザイナーさんはそこまで作る機会ないのではないでしょうか？ 他のデザインに比べたら特殊な技術が必要なので、慣れるまでは数をこなさなきゃいけない。 でもそこまで頻繁に依頼がくるわけではないのでイマイチいつもピンとこない。。 そんな方多くないですか？ そこで
ポータルサイトのデザインリニューアル案件で気をつけたこと＆使える心理学 - Design Color
色を使いすぎない 以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。 ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。 そのため、色数を極力おさえることでサムネイル画像やタイトルに注目が集まるよう心がけました。そうすることで、ユーザーは情報を探しやすくなり、記事を読む事に集中できます。 逆に、色がゴチャゴチャしてどこを見たらいいのかわからない状態になると、ユーザーの離脱を招くことにもなるため注意が必要です。 選択肢は4つ程度にとどめる 今回のリニューアルにあたり、ポータルサイト内の選択肢を極力4つ程度にとどめる工夫をしました。その理由についてはふたつの心理学が関係していま
Pixel Perfect Precision Handbook 3
We're excited to announce that the latest Pixel Perfect Precision Handbook is available to download now (PDF, iBook). With over 40 pages of fresh content, as well as updates to what was already there, we've made the third generation of the handbook bigger, better, and more beautiful. So, what's new? Branding and Retina ImagesAt first glance the most obvious change is our new branding — with bold t
[CSS]透過画像を使用して幻想的な背景をつくりだすスタイルシート
スクロール後 仕組みは、透過PNG画像を固定配置し、レッドからブラックへのグラデーション画像がスクロールされると、ブラックになった時点で絵柄が浮き上がるものとなっています。 グラデーション画像は「gradient-tile.jpg」を使用しています。 IE6では透過PNG画像の背景が固定配置で繰り返すことができないため、シンプルな解決方法として透過PNG画像の背景を非表示にしています。 スタイルシートもシンプルです。 <textarea name="code" class="css" cols="60" rows="5"> * html #wrapper {background-image: none;} </textarea>
[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック
三連リングのようなカワイイ囲いをスタイルシートで実装するテクニックを紹介します。 左のSingleだと、divは一つだけ！ 左のSingleを例に、実装方法を紹介します。 HTML div一つにclassを加えます。 <div class="hoja">SINGLE</div> CSS 複数のリングは、box-shadowで作成します。アニメーションさせたくない場合は、keyframesは必要ありません。 ※利用する際は、ベンダープレフィックスを加えてください。 参考：面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free .hoja { color: #dcdce2; position: absolute; top: 50%; left: 50%; margin-left: -180px; margin-top: -90px; width: 180px
![[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/bef7bf928dc917611c060c7f63ae5b39c925d844/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112601.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]全幅960+10pxをベースに汎用的に展開するグリッドシステム