タグ

tipsとdesignに関するcptskgjのブックマーク (16)

  • Beautiful Watercolor Effect Tutorial and Photoshop Brushes

    2014年3月6日 Photoshop, Webデザイン 水彩画っていいですよね。なんだかほんわかした雰囲気が大好きです。ということで今回はPhotoshop CS5を使って画像を水彩画風に加工する方法と、便利なPhotoshopブラシ、水彩画風デザインのWebサイトを紹介します。デザインの参考にしてみてください! ↑私が10年以上利用している会計ソフト! 写真を水彩画風に加工する方法 また動画撮ってみました。ただでさえ時間かかってないのに、4倍速にしたら30秒くらいになっちゃいました。簡単なのでぜひ試してみてくださいね! 1. ぼかし 画像を開いて、そのレイヤーを複製します(コマンド+J)。 複製したレイヤーを「blur」にレイヤー名を変更します。 フィルター > ぼかし > ぼかし(詳細)で、「半径」を10、「しきい値」を25〜30に設定します。 2. エッジの光彩 元の画像レイヤーを

    Beautiful Watercolor Effect Tutorial and Photoshop Brushes
  • デザイナーもエンジニアも幸せになれるiOS画像の書き出し方 | keisuke.tsukayoshi

    前回iOSアプリのデザイン指示書についての記事でも少し触れましたが、iOS開発の画像素材の書き出しはデザイナーが担当するのが一般的なようです。しかし実際にコードを書けない多くのデザイナーにとっては、どんな画像をどのように書き出せばいいのか不安になってしまうことも多そう。 というわけで今回は、主にアプリデザインの経験のないデザイナーさんに向けた簡単なtipsと、最後にちょっとグレーだけど使い所によっては効率があがるぼくなりの手法も少し紹介してみたいとおもいます。 基的なこと デザインは横幅640ピクセルで作る 基的なところですね。後述しますが、Retina対応したiPhoneとそうでないもののふたつの解像度の画像が必要になるのでどちらも兼ねるこの解像度で作ります。 非Retina端末のために半分のサイズの画像も用意する 実際にXcodeでの開発は横幅320pxをベースに実装するので、もと

    デザイナーもエンジニアも幸せになれるiOS画像の書き出し方 | keisuke.tsukayoshi
  • Web制作者が読んでおきたい、最近公開されたおすすめのスライド

    UXのためのUIデザイン / 『デザイニング・インターフェース』読書会資料 / イノベーションの方法としてのデザイン思考他...全11件

    Web制作者が読んでおきたい、最近公開されたおすすめのスライド
  • サービス終了のお知らせ - NAVER まとめ

    サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

    サービス終了のお知らせ - NAVER まとめ
  • よく分からずにトーンカーブを使っている人に。 - kojika17

    画像の色調補正する時、何を使いますか? 私の場合、基的な画像補正はトーンカーブ1つでほとんど済ませてしまいます。 トーンカーブは使い方が分かれば、簡易的に明度、色調、コントラストなどを補正できる強力なツールになります。 Photoshopベースで紹介しますが、FireworksやGIMPでもトーンカーブを扱えますので、参考になれば幸いです。 トーンカーブのデモで使用する画像は、フリーで配布されているPAKUTASOさんから写真をお借りして、説明します。 トーンカーブ基 縦軸と横軸は、0から255まで階調を表しています。 画像モードがRGBの場合、縦軸は上から下に向かって暗くなり、横軸は左から右に明るくなります。 横軸が入力、縦軸が出力を表します。もっと噛み砕くと、横軸が元画像の階調、縦軸が補正後の階調です。 斜めに走っている線にはいくつも点が打て、曲線や直角にしたりできます。 階調の出

    よく分からずにトーンカーブを使っている人に。 - kojika17
  • リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)

    こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量:10で追加します。これが同心円状のヘアラ

    リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)
  • 2011年1月のこれだけ読めば分かる Web 制作者向け情報まとめ | ウェブル

    いろいろなところから2011年1月に集めてきた情報を要点を抑えて紹介していきます。これは何か、どんなシーンで使えるのかということを書くようにして、気持よく読めるようにまとめて行けたら良いです。情報を集めるのが苦手なあなたはこれだけ読めば結構身になるかもしれませんね。 これは Web サービスに使えると思った情報 使い方をその場で再現するスクリプト目の前でアニメーションして説明するスクリプト「Embedded Help System」 – GIGAZINE Web サービスのヘルプなどで使えるかもしれません。導入がそこまで難しくないようなので、ヘルプを作る際は一番最初にこちらを検討すると良いかもしれませんね。 ビジネスモデルについて学べるわかったつもりになっていませんか:「ビジネスモデル」とはなんだろう? 余談や説明が長すぎたので、個人的にためになりそうな要点だけ抑えておきます。 なんか微

  • 知らないと損するFacebookファンページの作り方(1/3)- @IT

    プロモーション活用で注目を集めるFacebookのファンページ。簡単に作れるので、この機会にファンページを開設してみよう!(2011年2月5日にファンページの名称がFacebookページに変更になりました) ビバ Facebook! 世界最大のユーザー数を誇るSNS(ソーシャル・ネットワーク・サービス)の「Facebook」。 2010年夏には「ユーザー数が5億人を突破」というニュースが流れましたが、日でもユーザー数を伸ばし、約180万人が利用しています。 また1月15日から日でも、Facebook創業者の自伝映画「ソーシャル・ネットワーク」が公開となり、注目度はさらに高まっています。 Facebookのプロモーション活用術! まずは、Facebookを使ったプロモーション事例をいくつか紹介しましょう。 ■ FacebookのAPIを活用 外部サイトとFacebookの情報を結び付けて

  • Webデザイナー必読?!著作権について知っておくべき10のこと - kojika17

    Webデザインに限らず、制作したものに発生する「著作権」を知っておかないと、トラブルの元になるかもしれません。 特にWebデザインの場合は写真、文章、素材。 場合により動画など多岐の著作物を扱う場合が多々あります。 自分の頭の整理のためにも、Webデザイナー、ディレクターが知っておくべき著作権のことについて、まとめてみました。 1、著作権の基礎知識 著作権とは、知的財産権の一つです。 日の著作権は「無方式主義」と呼ばれる方式で、制作物を制作すると自動的に著作権が発生します。 この時、著作者人格権と**著作権(著作財産権)**に分かれます。 「著作者人格権」と「著作権(著作財産権)」について 著作者人格権 簡単に言えば「制作者」 公表の時の手段、方法を決定できる権利です。 法律上、制作者の同意がなければ公表できません。 著作権(著作財産権) Webデザイナーにとっては、Webサイトなど制作

    Webデザイナー必読?!著作権について知っておくべき10のこと - kojika17
  • CBCNET > Dots & Lines > クリス パルミエリ > バイリンガルのウェブデザインでするべきこと・してはいけない14のこと

    ±0はとてもよく出来たサイトだけど、英語の使い方が複雑で、ユーザを混乱させる要因になっている。英語と日語が混在している箇所があったかと思えば、英語だけ、または日語だけのところもある。 1. 同じページで英語と日語を混在させない 英語圏のほとんどの人々はシステムに日語をインストールしていないので、日語のテキストは文字化けされてみえてしまう。加えて、情報量の少ないサイトを除いては、ひとつのページに2つの言語で情報をバランスよく表示させることは難しいし、自分の言語以外は読む人にとって視覚的なノイズにしかならない。 インターナショナルな閲覧者を考慮してサイトに英語を散りばめているのかもしれないが、多くの場合、逆にユーザを混乱させることになる。デベロッパにとっても、単に2つ目のサイトをメンテナンスするよりもつらいことになるかもしれない。 2.コンテンツはミラーリングがおすすめ。 ただし、そ

  • Adobe Photoshopで文字をはっきり、くっきりさせる方法 - (DxD)∞

    Adobe Photoshopでかなり前から試行錯誤していることがあります。文字がどうしてもぼやけるというか、滲んでいるように見えてしまう場合があるのです。なんとかはっきり、くっきりさせられないかと色々試してみた結果、それなりに満足できる結果が得られたのでまとめておきます。 ラスタライズが前提であれば、フィルタなどで調整できる可能性はありますが、後から文字を変更したい場合に面倒なので、できればラスタライズしないでなんとか綺麗に見える方法がないかと試行錯誤してみました。使用しているのはCS2なので、バージョンによっては微妙な違いがあるかもしれません。 Photoshopの文字ツールの設定 まずは基中の基です。Photoshopの文字ツールは、注意しておかないと、すぐに文字のアンチエイリアスのかかり方が変わってしまいます。どういった場合にそうなるかというと、既に入力済みの文字を「文字ツール

  • ミニマルなWebデザインをする時に心がけたい注意書き

    ミニマルなWebデザインをする時に気を付けたいなーと思ういくつかを注意書きとしてまとめてみました。ミニマルなWebデザインって簡単そうで一番難しいんじゃないかと感じてる今日この頃。もっとミニマルなデザイン上手になりたいです。最近ミニマルなデザインという言葉をよく目にするようになりました。 (昔からある言葉ですし、最近じゃなくて前から言われてたぞという人もいると思いますが…) 初めて聞いたときは、ミニマルなデザインってどんなデザイン?と思って検索したものでした。 ミニマル(英: minimal)とは、「最小限の」という意味である。 ミニマリズムとは美術・建築などの造形芸術分野において、1960年代のアメリカに登場し主流を占めた傾向、またその創作理論であり、最小限(Minimal)主義(ism)から誕生し、必要最小限を目指す手法である。装飾的な要素を最小限に切り詰め、シンプルなフォルムを

  • BIT-101

    I’m embarking on a new series of posts about coding color. And I’m pretty excited about this one. Color is Complicated … in which I attempt to overwhelm the reader by listing out everything you could possibly write about color. Feel free to skip. Color is a complex subject to write about, because there are so many ways to approach it. What even is color? We generally experience color as a property

    BIT-101
  • gotoandlearn.com - Debugging with MonsterDebugger

    PASSIONATE ABOUT CAPTURING MOMENTS? Gotoandlearn is the perfect place for you. We provide you with helpful tips, useful resources, and free tutorials every day to help you master your camera and create amazing photos.

    gotoandlearn.com - Debugging with MonsterDebugger
    cptskgj
    cptskgj 2009/02/21
    Flashのチュートリアルサイト。 英語。かなりたくさんありそう。
  • Creating a Mac-Type Background in Photoshop

    Unlimited fonts, graphic templates, mockups, add-ons & more! Unlimited asset downloads! From $16.50/m

    Creating a Mac-Type Background in Photoshop
    cptskgj
    cptskgj 2009/02/04
    かなりクオリティの高いPhotoshopチュートリアルサイト。
  • CSS Spriteを活用しよう - DesignWalker

    CSS Spriteを活用しよう - DesignWalker
    cptskgj
    cptskgj 2008/11/17
    画像をスライスして一枚ずつ読み込むよりも、このように一枚の画像にすると、スライスの手間が省けるのと、読み込みの再に、リクエストが一回で済むので、場合によってはこちらの方が早く読み込まれることになりそう
  • 1