[CSS]box-sizingを使ったIE8+対応の画像やテキストを画像に置換するテクニック
img要素やhr要素、テキストなどをHTMLは変更せずに、スタイルシートで画像に置換するテクニックを紹介します。 img要素で配置した画像を別の画像に、hr要素を画像の区切りに、見出しなどのテキストを見出し画像に変更できます。 Replace the Image in an <img> with CSS 下記は、ポイントを意訳したものです。 元のHTMLファイル 事の発端は、HTMLやJavaScriptを編集できない状態で、画像を変更する必要にせまられたものです。どのように画像を変更したか紹介します。 HTML HTMLはこんな感じです。 .headerに子要素で画像が配置してあります。background-imageは無しです。 <head> <title>Really Cool Page</title> </head> <body> <div class="header"> <img
illustratorからアンチエイリアス オフのテキストを書き出す方法 – creamu
illustratorでデザインした状態で、 アンチエイリアス オフのテキストを書き出すには以下のようにします。 1. Photoshopを使う テキストをコピーしてPhotoshopにテキストをペースト後、 トリミングしてPhotoshopで書き出す 2. illustratorでがんばる スライスは使いにくいので、 illustratorでテキストを新規ファイルにペーストして、 「command + option + shift + s」でWeb用に保存。 「アートボードサイズでクリップ」のチェックを外し、 「文字に最適」か「なし」を選択して保存（「アートに最適」だとぼやけてしまう）。 Photoshopで開いてトリミングして保存。 というわけで2の方法は2度手間なので、結局最初からPhotoshopでやります。
【Sass】カラージェネレーターっぽく使ってみる。 | バシャログ。
家から5分の立ち飲み屋が21時閉店でつらいhakoishiです。 さて、今回はSassをカラージェネレーターっぽく使ってみるサンプルなど。 色の属性を変更する方法と、色相差を指定して配色を作るmixinのご紹介です。 属性を変更 まずは下準備として。 基準色（$sampleColor として定義）から色相、明度、彩度の3属性に分解します。 色相（0.0-360.0degの範囲で取得） hue($sampleColor) 彩度（0-100%の範囲で取得） saturation($sampleColor) 明度（0-100%の範囲で取得） lightness($sampleColor) 色相の対応は下記の図を参照のこと。赤を0degとして右回りです。 その後、必要な属性を変更してカラーコードに戻します。 変更後の属性はそれぞれ下記の変数に格納されているものとします。 色相→$newHue、彩度
IF関数で「○○を含む」の指定−COUNTIF関数:Excel(エクセル)の関数・数式の使い方/文字列
IF関数が使えるようになった方から、よくいただく質問があります。 IF関数であいまい検索はできないのでしょうか？ IF関数であいまいな条件指定はできないのでしょうか？ この疑問を感じたことがない方にはわかりにくい質問だと思いますが、IF関数の第1引数・論理式に「*」（アスタリスク）などのワイルドカードを利用した指定はできないのか？という質問です。 例えばA列に住所が入力されているときに、「中野区」という文字列があれば「○」を、そうでない場合に「−」をB列に表示させたいとします。 IF関数を使って「=IF(A1="*中野区*","○","−")」とB1セルに入力して下に向かってオートフィルすれば、住所に「中野区」を含んでいれば「○」、そうでない住所には「−」が表示されそうな気がします。けれどもこれではダメなのです。 「=IF(A1="*中野区*","○","−")」では、A1セルが「*中野区
Photoshopのパペットワープで自由自在に写真加工する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの白浜です。 今回はPhotoshopのパペットワープの機能をご紹介したいと思います。 「ググってわからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！ ※2013年5月23日に公開された記事を再編集したものです。 パペットワープの使い方 レイヤーを選択して「パペットワープ」を選択 使い方は、該当レイヤーを選択して、「編集」→「パペットワープ」を押します。 するとこのようにメッシュ状の編集点が出てきます。 注：変形させたいオブジェクトは、切り抜いておいたほうがより正確な編集を行えると思います。 ここでメッシュを細かくすることもできま
photoshopで枠線つき吹き出しをつくるときのちょっとしたコツ
ご存知の方も多いかもしれませんが、最近発見したので覚え書き。 吹き出しって三角の位置を微妙に修正することが多いと思うのですが、枠線つきの吹き出しって修正しづらくないでしょうか？ ※作成・確認環境は、Photoshop CS6です 例えば自分が配布しているSVGの吹き出しもそうなのですが、三角の部分を移動したり大きさを変えたい場合、パスが全て連結されていて動かしにくかったりします。 三角の部分を動かすには、土台の図形と三角部分を別々にすると良いですね。 吹き出しの図形をそれぞれシェイプで描きます。 このとき、吹き出しの三角の方は、パスを閉じないようにします。 ※訂正です、パスは閉じても閉じなくても表示は変わりませんでした。 良く確認せず申し訳ありません…。 2つの図形をちょうど良いところで重ね、ショートカットキーの「Ctrl + E」で結合します。 （レイヤーのところで右クリック→「シェイプ
Webで使える文章を書くために「人気ディレクター」が実践してる10個の手順
皆さんはWebサービスを作る時、自分で原稿書いていますか？ WebサイトでもWebサービスでも、至る所で文章は必要になってきますよね。 ユーザーを「動かす」文章を書こう もちろん文章は必要な分だけ何となく書けば良い訳ではありません。 「どこで」「何を伝えて」「どういうアクションをして欲しいのか」や、「その部分部分でのユーザーのテンション」に合わせて文章量なども変える必要があります。また、特にテンションが低い場所では、文章だけではなく視覚的に一瞬で分かる伝え方をしなければ行けません。 今回の記事では、スタートアップの方向けに、Webで使える文章を書くための手順をご紹介します。人気ディレクターである中村さん(Webディレクターズマニュアルの中の人)が実践している内容です。（今回の記事はパートナーの中村さんの許可を頂いて、こちらの記事を編集部側で加筆/編集して書いています。） 【手順1
ノンデザイナーこそ押さえておきたい! 配色・レイアウトの基礎が学べる7個の厳選スライド
まだまだメンバーの数が少なく、職種ごとの距離が近いスタートアップ。デザイナーの仕事をディレクターやエンジニアが理解することが、プロジェクトを円滑に進める秘訣です。 デザイナーではない方々にとって、デザイナーが普段何を悩み、どのようにWebデザインしているのか知るのは、非常に重要と言えるでしょう。今回は厳選した7つのスライドをご紹介しながら、「配色」「レイアウト」といったデザインのエッセンスを学びます。 もちろん、本職のデザイナーの方にも役立つスライド7連発です！ １．色彩センスのいらない配色講座 7000いいね! されたスライド 「時間がない！ 今すぐ作り始めないと納期に間に合わない！ でもどんな色を使ったらいいか分からない！」そんな人におすすめなのがコレ。Facebookで7000以上のいいね!がついた、@marippe_さんのモンスタースライドです。 配色や明度・彩度の基礎をお
知らないと損するプレスリリースの広め方 | ネタの作り方、書き方、送り方を網羅的に紹介
こちらの記事でも書いたように、このメディアの立ち上げにあたり、スタートアップに挑戦されている方やVCの方々にお話を伺いました。そこで聞いた最も共通する課題の一つが『プロモーション方法』でした。 良いサービスはあるのに広め方が分からない。 そこで、今回はプロモーション方法の一つとして、「プレスリリースのやり方」についてご紹介します。 ここに書いたようなちょっとした工夫をするだけで、かなり反響に違いが出ます。(私も前職でPR業務もやっていたのでその違いを実感しています) 資金が限られているスタートアップにこそ、プレスは必須施策だと思いますので、ぜひ実践してみて下さい！ ■目次 １．アイディアの考え方編 ２．書き方編 ３．送り方編 １．アイディアの考え方編 プレス企画の切り口チートシート PRTIMESさんのこちらのページでは、プレスリリース発信のタイミングとして下記を挙げてく
[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック | コリス
去年くらいからよく見かけるようになったスクロールすると、カーテンを持ち上げるように次々にコンテンツが表示されるテクニックをスタイルシートのみ版とスクリプト併用パワーアップ版の二つを紹介します。 まずは、スタイルシートのみ版から。 Fixed image backgrounds スクロールするとヘッダは固定表示で、画像を配置した背景がカーテンを持ち上げるように次のコンテンツが表示されます。 背景は写真も面白いですが、ソリッドなカラーでも面白い効果が得られますね。 Fixed image backgroundsをスクロール 実装はシンプルです、ポートフォリオなどでよく見かけるテクニックです。 Demo 1のHTML HTMLの基本構造は、header要素があり、各スライドはsection要素です。section内には見出しやテキストや画像などを自由に配置できます。 <header> <a hr
DreamweaverとPhotoshopを使い、神速でスライスする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる！」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス＆タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが！フォトショでもFW並か、それ以上に楽ができると思います。 そ
初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします！ もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…！ CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください！ 1.
[Photoshop]パターンを使って破線・点線を簡単に描く方法 | サイブリッジラボブログ
こんにちは。 デザイナーのYKKです。 今回は、Photoshopにでの作業効率がグンと上がる、 「パターン」についてご紹介致します。 凝ったものは自作するのが一番ですが、配布されているものを利用するのが便利です。 シンプルで使える！Photoshop パターン素材 – musign Simple Patterns http://www.trck4th.com/musign/2011/02/musign_simple_patterns.html 普通は模様（柄）として利用する為のパターンなのですが、 破線を描画したい時にも利用できます。 PhotoshopにはIllustratorのように破線を描く為のツールがありません。 かなり需要あると思うんですけどね。 Photoshopで破線を描くには、 ブラシの描画間隔を調整するやり方と、テキスト打ちの「——」を使用するやり方と大きく二通りの方法
![[Photoshop]パターンを使って破線・点線を簡単に描く方法 | サイブリッジラボブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/afb52993857c1108dcebfa1cf2537aba7789d851/height=288;version=1;width=512/http%3A%2F%2Flabs.cybridge.jp%2Fwp-content%2Fuploads%2F2014%2F09%2F110531_link1-thumb-580x369-919.jpg)
メールの文面を変えてフィードバックを5倍に増やす11のテクニック
By karen horton カスタマーサポート用ソフトウェアの開発・販売を行う「SupportFu」の創業者であるビナ・サーニさんが、自身のスタートアップの経験を生かしたエントリーを公式ブログ上で公開しました。サーニさんによると、シンプルな11のポイントをウェルカムメールに反映させると、メールに対するレスポンスが5倍に増えるとのことです。 11 Tips for Writing Effective Welcome Emails | Vinay Sahni http://www.vinaysahni.com/11-tips-for-writing-effective-welcome-emails ◆01：ウェルカムメールの「件名」をおもしろいものにする By glsims99 多くの受信メールが入ったメールボックスの中から、あなたのメールを開いてもらうには、メールの件名が「Product
身につけておきたいWebサイト高速化テクニック #4｜最適な画像書き出しの基本 | DevelopersIO
みなさんこんにちは、クラスメソッドWeb担当の野中です。 昨日行われたAdobe MAXの発表でFireworksの新機能開発が終了 *1だそうですね。びっくりです。 さて、前回の身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識では、画像の品質を保ちながらファイルサイズを抑えるためにそれぞれの画像形式の特性について紹介しました。 第3回でリクエスト数の削減について先に解説すると記載していますが、文章の構成を考えると画像の書き出しについて先に説明した方が流れとしてわかりやすいので順番を変更しています。 本題 今回はPhotoshopやIllustrator、Fireworksを使った最適な画像書き出しの基本的な手法について紹介したいと思います。 前回の記事で得た知識を前提に解説しますので、まだ前回の記事を読んでいない方は必ず読んでおいてください。 この記事の対象者 W
Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法 | ページ 2 / 3 | 東京上野のWeb制作会社LIG
こんにちは、デザイナー兼フォトグラファーのおまめ （@omame_creator） です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください！ 独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
はてブ数2000超え！ライフハック記事40本まとめ【実験】｜男子ハック
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
