タグ

japaneseとtutorialに関するhtn_50komaのブックマーク (21)

  • jQueryの基礎知識(2/3):初心者のためのjQueryプログラミング入門 - libro

    では、jQueryのライブラリはどのように利用すればよいのでしょうか。――JavaScriptのライブラリは、どんなものであれ、基的な使い方は共通です。すなわち、「ライブラリファイルをダウンロードし、使用したいWebサイトにアップロードし、<script>タグでそれをロードする」というものです。 ライブラリというとなんだか特殊な感じがしますが、要は「ただのスクリプトファイル」なのです。特にjQueryは、体がたった1つのスクリプトファイルでしかありません。 http://jquery.com/ まずは、上のアドレスにアクセスをしましょう。ここが、jQueryのサイトです。そして、ページの右側にある「Download(jQuery)」というボタンをクリックしてください。ぶわ~~!!っと画面にJavaScriptのスクリプトが表示されます。これが、jQueryのライブラリです。後は、それを

  • わりと面倒な後光を超簡単に10秒で描く方法 for Illustrator – poyosi.com

    後光のぽよしアイコンで話題の@poyosiです、こんにちは。(そんな話題見たこと聞いたことない) 後光をイラストレーターで描くのってわりと面倒で、三角形を作ってくるくる回してる人もいるかと思いますが、そんな面倒な後光をサクっと作ってしまうテクニックをご紹介します。 ちなみに「後光」と言うとちょっとださい感じがするので合コンでは「バックフラッシュッ!」とか「サンバーストッ!」とまるで必殺技のように言うときっとモテると思いますよ。 イラレで超簡単に後光を描いてみましょう。 円を描く ここでは背景なしの線のみで、例として「200px」×「200px」の正円を描きます。 線幅を設定する 線幅を、円と同じピクセル数にします。ここでは「200px」ですね。 破線を設定する そして、破線をお好みのサイズで追加すると…もうそれっぽいのができます!やばい超簡単ですね! パスに変更する このままでは扱いづらい

  • すぐに現場で役立ったPhotoshopの機能を紹介!CSS Nite LP, Disk 22参加レポート - Design Color

    今さら知りました…!便利すぎる「コンテンツに応じる」機能 皆さま、Photoshopの「コンテンツに応じる」機能をご存知でしょうか?巷では略して「コンじる」機能とも言われているようですw(以下、そう呼びます) PhotoshopはCS4以降、「コンテンツに応じて?」という言葉を使った自動処理機能を強化してきたようです。 では、その「コンじる」機能とは何でしょう。講師として登壇して下さった結城 しおりさんと鷹野さんが、「コンじる」機能を教えてくださいました! 人肌は守ります!「コンテンツに応じて拡大縮小」 こちらは講師の結城 しおりさんに教えていただきました。 みなさん、バナーなどを作る時、 「あー!素材の幅がちょっと足りない」ということはありませんか? こういう時、足りない部分を補完してあげてもいいいのですが、 時間がないのー!という時にはこれです! イヤイヤイヤイヤ!!と思いますよね?で

    すぐに現場で役立ったPhotoshopの機能を紹介!CSS Nite LP, Disk 22参加レポート - Design Color
    htn_50koma
    htn_50koma 2012/05/22
    チャンネルを使った切り抜きのチュートリアル
  • dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

    このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 ※1 日のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 ※1 レジストラ「GMO Internet, Inc. d/b/a Onamae.com」のシェア値を集計。 ※1 2020年8月時点の調査。

  • dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

  • WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm(プラズム)

    著者:シンタロヲフレッシュ Graphic Designer / cinematographer. 「prasm(プラズム、って読みます)」は週末だけが楽しいWeekenderではなく、1週間7日間、自分のしっくりを追い求め、日々をアップデートし続けるそんな“Weeker”に献げるブログです。 しっくりくるモノ・コトが好きなシンタロヲフレッシュがあなたの明日をしっくりさせるべく、しっくりにまつわるアレコレを書いていきます。 より詳しくプロフィールは「about」へ。

    WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm(プラズム)
  • dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

    このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 ※1 日のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 ※1 レジストラ「GMO Internet, Inc. d/b/a Onamae.com」のシェア値を集計。 ※1 2020年8月時点の調査。

    htn_50koma
    htn_50koma 2012/05/13
    とりあえずメモ
  • Webデザイナー(私)によるWeb制作のときに気をつけてることや制作フローとかいろいろ

    私はフリーランスの Web デザイナーとして、クライアントさんの Web サイトを作成するお手伝いをさせていただいています。今回は、私が仕事でデザインするときに気をつけている事や、Web 制作のフローをまとめてみました ...。 Webサイトを作るとき、みなさんはどんな制作フローをたどって作ってますか?私はフリーランス仕事をしていて、最初から最後までひとりで作ることが多いです。今回はふだんデザインする時に気をつけてる事や、いつもしている Webサイトの作成フローをまとめてみました。もっと効率化できることがあるはずだなーと思いつつ、最初から最後までを書いてみました。 また、Webデザイナーってどんな仕事なのっていう質問をときどきいただくので … こんなことしてます … みたいな紹介です。これはあくまで私が Webサイトを作る時にしているフローで、他の Webデザイナーさんや制作会社さんと違

  • ちょっとぼんやりした画像をくっきりさせるPhotoshopのチュートリアル | コリス

    元画像を一切劣化させることなく、ちょっとぼんやりしたねむい画像をくっきりさせるPhotoshopのチュートリアルを紹介します。 レースの柄をはじめ、よりくっきりしているのが分かると思います。 How to Non-destructively Sharpen Your Image In Photoshop [ad#ad-2] チュートリアルは4ステップで、慣れれば数分でできる思います。 下記は各ポイントを意訳したものです。 Step 1:画像の準備 Step 2:ディテールの抽出 Step 3:ディテールの調整準備 Step 4:ディテールの調整 完成 Step 1:画像の準備 まずは、元となる画像をダウンロードします。 Autumn Stock IV [ad#ad-2] ダウンロードした画像をPhotoshopで開いてください。 画像を加工するときは、元画像はそのまま残し、コピーした画像を

    htn_50koma
    htn_50koma 2012/02/24
    輪郭をはっきりさせる tutorial。新規アルファチャンネルに「輪郭検出」フィルタをかけて、その後微調整の方法も書いてある。とても参考になった
  • [CSS]ol要素を美しくスタイルし、アニメーションをちょっとだけ加えるテクニック

    擬似要素を使って、ol要素を美しくスタイルし、CSS3アニメーションをちょっとだけ加えたスタイルシートのテクニックを紹介します。 CSS3 ordered list styles [ad#ad-2] デモ 実装 対応ブラウザ デモ デモはIE9, Firefox, Chrome, Safariでご覧ください。 擬似要素のアニメーションは、Firefoxのみサポートしています。 デモページ:Demo 1 数字を矩形にスタイルし、ホバーで数字からアローが伸びます。 ※アニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルで、ol要素を入れ子にして実装するだけです。 <ol class="rounded-list"> <li><a href="">List item</a></li> <li><a href="">List item</a></li> <li><a h

  • プロが教える本当にシャープな写真の撮り方 第1回 | デジタルフォト達人への道 | Shuffle by COMMERCIAL PHOTO

    アメリカで大ベストセラーとなった書籍「The Digital Photography」が日語に翻訳されて発売された。この「デジタルフォト達人への道」(発行:ピアソン桐原)、著者は全米Photoshopプロフェッショナル協会(NAPP)会長のスコット・ケルビー氏、日語版の監修は日におけるデジタルフォトの第一人者・早川廣行氏だ。Shuffle読者のために、第1巻から第3巻まで各巻のハイライトを特別公開する。 ピントのしっかり合った鮮明でシャープな写真を撮ることが、プロの写真家にとっては何より重要です。「デジタルフォト達人への道」第1巻からは、「第1章 プロが教える当にシャープな写真の撮り方」を公開します。 SHUTTER SPEED: 1/60SEC F-STOP: F/11 ISO: 100 FOCAL LENGTH: 32MM PHOTOGRAPHER: SCOTT KELBY “

  • WPtouchを卒業iPhoneに最適化されたテーマと簡単なカスタマイズ方法などwordpress | nori510.com

    どーも@nori510です。 当ブログのiPhoneからのアクセスの際の表示はずっと、簡単にiphone最適化表示が出来る「WPtouch」を使ってきました。 pluginを導入するだけで簡単にiPhoneに最適化された表示になり、非常に使い勝手がよろしいのですが、色々と思うところがあり、この程WPtouchを卒業する事にしました。 iPhone最適化テーマとカスタマイズ方法など iPhone用に最適化されたテーマへの変更方法と、ちょっとだけカスタマイズの方法などをご紹介したいと思います。 が、まずはWPtouch卒業の理由。 WPtouch卒業の理由 1.唯でさえ狭いiPhone画面の横幅が、縁取りのお陰で更に狭いのが☓ 勿論文字もですが、画像が多い当ブログにとって、表示域の狭さは致命的だなと思いまして。 2.WPtouchを利用する人が多すぎるのが☓ やっぱりオリジナリティー(?)を大

    WPtouchを卒業iPhoneに最適化されたテーマと簡単なカスタマイズ方法などwordpress | nori510.com
  • 突発的にPhotoshopで「デスパラソル」を作ってみた。(10分で) - kojika17

    いつものようにRSSで情報収集していると、ふと目に止まった記事。 Macの警告ひどい - はぁはぁブログ。 一通り記事を読んで、一番上に戻って「デスパラソル」を眺めていると、デスパラソルをPhotoshopで制作する工程の神様が降りてきたので、Windowsユーザーだけど、これは記事にするしかないと。 ただし記事を見た、2時間後に外に出る用事があり、「Photoshopでキャプチャしながら制作」+「キャプチャした画像リサイズ、トリミング」+「ブログ記事」を2時間以内でやるので、説明不足のところも多々あるかと思いますが、ネタとして見てね☆ 「Macがフリーズするとくるくる廻るレインボーなカーソル」を、まみぺこさんが名づけました。 正式名称は「spinning wait cursor」というらしいです。 早速Photoshopを立ち上げてキャンバス設定。 ファイル名は「death-paraso

    突発的にPhotoshopで「デスパラソル」を作ってみた。(10分で) - kojika17
  • Illustratorチュートリアル【女の子】

    2013年11月28日 Illustrator 海外サイトでよく見るPhotoshopやIllustratorのチュートリアル記事って、見ていていろんな発見があります。自分が思っていたよりはるかに楽な方法や、知らないテクニックを教わったり。でも、日語のサイトでそんなチュートリアルをあまり見かけないので、Illustratorでイラストを描いたのを記事にしてみました。動画も撮っておいたのであわせて見てみてください! ↑私が10年以上利用している会計ソフト! 動画撮ってみました 個人的に、他の人が作っていく過程を見るのが好きなので撮ってみました。ベジェ曲線での描き方など、参考になるかもしれません。一部撮り忘れたところもありますが気にしないでください。 まずは準備 ラフ画の取り込み ラフ画は別レイヤーにフリーハンドで描く事も多いのですが、今回は紙に描いたものを使いました。通常スキャナーなどで取

    Illustratorチュートリアル【女の子】
  • dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

    このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 ※1 日のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 ※1 レジストラ「GMO Internet, Inc. d/b/a Onamae.com」のシェア値を集計。 ※1 2020年8月時点の調査。

  • [CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル

    階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></

    htn_50koma
    htn_50koma 2010/11/04
    三角をcssで作ってる
  • Photoshopのバッチ処理を使って、大量のaiファイルをpngに変換する

    こんにちは、鴨田です。 前回はPhotoshopで壁紙を作りながら、基的な使い方を覚えるという記事を書きました。 今日は、前回の続きをやりますと言いたいところですが、 ちょっと予定を変更してお届けしたいと思います。 最近、大量のaiファイルを指定の大きさのPNGに変換する、 というとても地味な作業をしたので、 俗に言うPhotoshopによるバッチ処理の解説をしたいと思います。 ちなみに、このときに使った元データはAUの絵文字データです。 AUさんのサイトからダウンロード可能です。 (http://www.au.kddi.com/ezfactory/tec/spec/3.html) こちらを用意したら、まずはaiファイルをふるいにかけます。 どういうことかという、aiファイルにも2種類あって、 pdf形式と、eps形式があるのです。 このpdf形式になっているものが厄介で、 Photos

    Photoshopのバッチ処理を使って、大量のaiファイルをpngに変換する
    htn_50koma
    htn_50koma 2010/10/17
    aiファイルには pdfとepsがあるらしい。それらを分類する方法も書いてある。
  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
  • Photoshopで葉っぱの壁紙を作る方法 / ウェブデザインライブラリー

    新規レイヤーを作成してください。 ペンツールを使い、葉っぱの形を作ってください。左右対称でない方がいいでしょう。 葉っぱのレイヤーに、下記のレイヤースタイルを適用してください。 光彩(外側): 黒、オーバーレイ、50〜70%、10〜15px 光彩(内側): 白、オーバーレイ、20〜40%、15〜25px 描画色を、黒に近い暗い緑に変えてください。 新規レイヤーを作成し、ペンツールを使って描いてください。 葉っぱができあがるまで、葉脈を描きます... このレイヤーに、下記のレイヤースタイルを適用してください。 描画モード : スクリーン 光彩(外側) : 黒、オーバーレイ、10〜20%、5〜8px

    htn_50koma
    htn_50koma 2010/07/02
    いつか試してみたい。応用できる部分が多い
  • Photoshopでカーボンファイバーをはめ込んだナビゲーションを作る方法 / ウェブデザインライブラリー

    Home > フォトショップ講座 > Photoshopでカーボンファイバーをはめ込んだナビゲーションを作る方法 Photoshopでカーボンファイバーをはめ込んだナビゲーションを作る方法 投稿日:2010年06月15日   レベル:中級者    ソフトウェア: このチュートリアルでは、カーボンファイバーをはめ込んだナビゲーションを作る方法を紹介します。 これは、テンプレートモンスターのテンプレートからヒントを得て作成しました。 Step1 : 背景を作る Step2 : ナビゲーションを作る Step3 : ナビゲーションのボタンを作る Step4 : ナビゲーションの球体を作る Step5 : オンマウス状態の画像を作る Step6 : 完成 1200ピクセル×600ピクセルの新規ドキュメントを作成し、背景を透明にします。 描画色を「#bebebf」にして背景色を「#d2d2d2」にし

    htn_50koma
    htn_50koma 2010/06/21
    引っ越したらやってみよう